@bit.rhplus/ag-grid 0.0.76 → 0.0.78

package/AgGridColumn.js

@@ -21,20 +21,50 @@ export const AgGridColumn = (column, options) => {
       (data.value && moment(data.value).format(column.dateRenderer)) || "";
   }
 
-  if (column.booleanRenderer) 
+  if (column.booleanRenderer) {
     column.cellRenderer = "booleanRenderer";
+    // AG-Grid deferRender: odkládá rendering během scrollování pro lepší výkon
+    column.cellRendererParams = {
+      ...column.booleanRendererParams,
+      deferRender: true
+    };
+  }
 
-  if (column.iconRenderer) 
+  if (column.iconRenderer) {
     column.cellRenderer = "iconRenderer";
+    // AG-Grid deferRender: odkládá rendering během scrollování pro lepší výkon
+    column.cellRendererParams = {
+      ...column.iconRendererParams,
+      deferRender: true
+    };
+  }
 
-  if (column.imageRenderer) 
+  if (column.imageRenderer) {
     column.cellRenderer = "imageRenderer";
+    // AG-Grid deferRender: odkládá rendering během scrollování pro lepší výkon
+    column.cellRendererParams = {
+      ...column.imageRendererParams,
+      deferRender: true
+    };
+  }
 
-  if (column.stateRenderer) 
+  if (column.stateRenderer) {
     column.cellRenderer = "stateRenderer";
+    // AG-Grid deferRender: odkládá rendering během scrollování pro lepší výkon
+    column.cellRendererParams = {
+      ...column.stateRendererParams,
+      deferRender: true
+    };
+  }
 
-  if (column.buttonRenderer)
+  if (column.buttonRenderer) {
     column.cellRenderer = "buttonRenderer";
+    // AG-Grid deferRender: odkládá rendering během scrollování pro lepší výkon
+    column.cellRendererParams = {
+      ...column.buttonRendererParams,
+      deferRender: true
+    };
+  }
 
   if (column.headerHtmlText) {
     column.headerComponentParams = {

package/BulkEdit/BulkEditButton.jsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import { Button, Tooltip } from 'antd';
 import { EditOutlined } from '@ant-design/icons';
 import BulkEditPopover from './BulkEditPopover';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
 
 /**
  * Floating button komponenta pro bulk edit
@@ -209,4 +210,13 @@ const BulkEditButton = ({
   );
 };
 
-export default BulkEditButton;
+// React.memo optimalizace - rerender pouze při změně kritických props
+// Callback změny (onOpenPopover, onValueChange, onSubmit, onCancel) ignorujeme
+const arePropsEqual = createMemoComparison(
+  ['visible', 'position', 'range', 'column', 'cellCount', 'rowsContainer', 'editPopover'],
+  ['onOpenPopover', 'onValueChange', 'onSubmit', 'onCancel'],
+  false,
+  'BulkEditButton'
+);
+
+export default React.memo(BulkEditButton, arePropsEqual);

package/BulkEdit/BulkEditDatePicker.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import React, { useState, useCallback, useMemo } from 'react';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
 import { Calendar, Button, Space, Tooltip } from 'antd';
 import dayjs from 'dayjs';
 import 'dayjs/locale/cs';
@@ -292,4 +293,12 @@ const BulkEditDatePicker = ({
   );
 };
 
-export default BulkEditDatePicker;
+// React.memo optimalizace
+const arePropsEqual = createMemoComparison(
+  [], // všechny props jsou kritické
+  [], // žádné ignorované
+  false,
+  'BulkEditDatePicker'
+);
+
+export default React.memo(BulkEditDatePicker, arePropsEqual);

package/BulkEdit/BulkEditInput.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import React, { useRef, useEffect } from 'react';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
 import { Input, Button, Space } from 'antd';
 
 const BulkEditInput = ({
@@ -68,4 +69,12 @@ const BulkEditInput = ({
   );
 };
 
-export default BulkEditInput;
+// React.memo optimalizace
+const arePropsEqual = createMemoComparison(
+  [], // všechny props jsou kritické
+  [], // žádné ignorované
+  false,
+  'BulkEditInput'
+);
+
+export default React.memo(BulkEditInput, arePropsEqual);

package/BulkEdit/BulkEditModule.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import React, { useRef, useEffect } from 'react';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
 import { Button, Space } from 'antd';
 import ModuleDropdownList from '@bit.rhplus/ui2.module-dropdown-list';
 
@@ -65,4 +66,12 @@ const BulkEditModule = ({
   );
 };
 
-export default BulkEditModule;
+// React.memo optimalizace
+const arePropsEqual = createMemoComparison(
+  [], // všechny props jsou kritické
+  [], // žádné ignorované
+  false,
+  'BulkEditModule'
+);
+
+export default React.memo(BulkEditModule, arePropsEqual);

package/BulkEdit/BulkEditPopover.jsx

@@ -2,6 +2,7 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { Input, InputNumber, Button, Alert, Space } from 'antd';
 import { validateValue, getInputType } from './utils';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
 
 /**
  * Popover komponenta s inputem pro bulk edit
@@ -298,4 +299,12 @@ const BulkEditPopover = ({
   );
 };
 
-export default BulkEditPopover;
+// React.memo optimalizace - rerender pouze při změně kritických props
+const arePropsEqual = createMemoComparison(
+  ['visible', 'value', 'loading', 'error', 'column', 'range', 'cellCount'],
+  ['onValueChange', 'onSubmit', 'onCancel'],
+  false,
+  'BulkEditPopover'
+);
+
+export default React.memo(BulkEditPopover, arePropsEqual);

package/BulkEdit/BulkEditSelect.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import React, { useRef, useEffect } from 'react';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
 import { Select, Button, Space } from 'antd';
 import * as LucideIcons from 'lucide-react';
 
@@ -93,4 +94,12 @@ const BulkEditSelect = ({
   );
 };
 
-export default BulkEditSelect;
+// React.memo optimalizace
+const arePropsEqual = createMemoComparison(
+  [], // všechny props jsou kritické
+  [], // žádné ignorované
+  false,
+  'BulkEditSelect'
+);
+
+export default React.memo(BulkEditSelect, arePropsEqual);

package/Renderers/BooleanRenderer.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import * as React from 'react';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
 import { CircleHelp, Check, X } from 'lucide-react';
 
 // Memoized Icon component
@@ -83,4 +84,12 @@ function BooleanRenderer(props) {
   );
 }
 
-export default React.memo(BooleanRenderer);
+// React.memo optimalizace pro AG-Grid renderer
+const arePropsEqual = createMemoComparison(
+  ['value', 'colDef'],
+  [],
+  false,
+  'BooleanRenderer'
+);
+
+export default React.memo(BooleanRenderer, arePropsEqual);

package/Renderers/ButtonRenderer.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import React, { useState, useCallback, useMemo } from 'react';
 import Button from 'antd/es/button';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
 
 const DEFAULT_STYLE = {
   fontSize: '12px'
@@ -82,7 +83,9 @@ function ButtonRenderer(props) {
 
   const isEmptyValue = value === null || value === '' || value === undefined;
 
-  const visible = useMemo(() => visibleGetter(props), [visibleGetter, props]);
+  // ✅ FIX: Odstranit props z dependencies - props objekt se mění každý render
+  // visibleGetter je stabilní funkce, props bereme přímo z closure
+  const visible = useMemo(() => visibleGetter(props), [visibleGetter]);
 
   const containerStyle = useMemo(() => ({
     display: 'flex',
@@ -119,4 +122,15 @@ function ButtonRenderer(props) {
   );
 }
 
-export default React.memo(ButtonRenderer);
+ButtonRenderer.displayName = 'ButtonRenderer';
+
+// React.memo optimalizace s custom comparison
+// AG-Grid renderery dostávají props které obsahují AG-Grid API reference
+const arePropsEqual = createMemoComparison(
+  ['value', 'colDef'],
+  [],
+  false,
+  'ButtonRenderer'
+);
+
+export default React.memo(ButtonRenderer, arePropsEqual);

package/Renderers/CheckboxRenderer.jsx

@@ -1,7 +1,20 @@
 import * as React from 'react';
 
 // Style constant
-const CONTAINER_STYLE = { textAlign: "center" };
+const CONTAINER_STYLE = {
+  textAlign: "center",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+};
+
+// Memoizovaný CheckboxElement sub-komponenta
+const CheckboxElement = React.memo(({ checked, onChange }) => (
+  <input type="checkbox" checked={checked} onChange={onChange} />
+));
+
+CheckboxElement.displayName = 'CheckboxElement';
 
 function CheckboxRenderer(props) {
   const {
@@ -12,9 +25,10 @@ function CheckboxRenderer(props) {
 
   const onChange = React.useCallback((e) => {
     e.preventDefault();
-    const {context: { componentParent: {onCheckboxChange} = {}} = {}} = props || {};
-    if (onCheckboxChange)
+    const { context: { componentParent: { onCheckboxChange } = {} } = {} } = props || {};
+    if (onCheckboxChange) {
       onCheckboxChange(props);
+    }
   }, [props]);
 
   const visibleCondition = React.useMemo(() =>
@@ -27,17 +41,16 @@ function CheckboxRenderer(props) {
     return !newItem && (showOnGroup || !!data) && visibleCondition;
   }, [data, showOnGroup, visibleCondition]);
 
-  if (!showCondition) return <div />;
-
-  if (value === undefined) {
-    return <div />
-  }
+  if (!showCondition) return null;
+  if (value === undefined) return null;
 
   return (
     <div style={CONTAINER_STYLE}>
-      <input type="checkbox" checked={value} onChange={onChange} />
+      <CheckboxElement checked={value} onChange={onChange} />
     </div>
   );
 }
 
+CheckboxRenderer.displayName = 'CheckboxRenderer';
+
 export default React.memo(CheckboxRenderer);

package/Renderers/CountrySelectRenderer.jsx

@@ -1,8 +1,55 @@
 import * as React from 'react';
 
 // Style constants
-const SPAN_STYLE = { marginLeft: 10, marginRight: 10 };
-const IMG_STYLE = { marginTop: -5 };
+const CONTAINER_STYLE = {
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+};
+
+const FLAG_WRAPPER_STYLE = {
+  marginLeft: 10,
+  marginRight: 10,
+  display: 'inline-flex',
+  alignItems: 'center',
+};
+
+const IMG_STYLE = {
+  marginTop: -5,
+  objectFit: 'contain',
+};
+
+// Memoizovaná CountryFlag sub-komponenta
+const CountryFlag = React.memo(({ code, size = 16 }) => {
+  const [hasError, setHasError] = React.useState(false);
+
+  const imageUrl = React.useMemo(() => {
+    if (!code) return "";
+    return `https://rhplus.blob.core.windows.net/countries/${code.toUpperCase()}.png`;
+  }, [code]);
+
+  const handleError = React.useCallback(() => {
+    setHasError(true);
+  }, []);
+
+  React.useEffect(() => {
+    setHasError(false);
+  }, [imageUrl]);
+
+  if (hasError || !imageUrl) return null;
+
+  return (
+    <img
+      alt="country flag"
+      style={{ ...IMG_STYLE, width: size, height: size }}
+      src={imageUrl}
+      loading="lazy"
+      onError={handleError}
+    />
+  );
+});
+
+CountryFlag.displayName = 'CountryFlag';
 
 function SimpleCountryCellRenderer(params) {
   const {
@@ -14,31 +61,32 @@ function SimpleCountryCellRenderer(params) {
       } = {},
     } = {},
   } = params;
-  const {id, name, code} = value;
+  const { id, name, code } = value;
 
-  const visibleCondition = condition ? condition(data) : true;
+  // Memoizovaná visibleCondition
+  const visibleCondition = React.useMemo(() =>
+    condition ? condition(data) : true,
+    [condition, data]
+  );
 
   const showCondition = React.useMemo(() => {
     const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
     return !newItem && (showOnGroup || !!data) && visibleCondition;
   }, [data, showOnGroup, visibleCondition]);
 
-  const imageUrl = React.useMemo(() => {
-    if (!code) return "";
-    return `https://rhplus.blob.core.windows.net/countries/${code.toUpperCase()}.png`;
-  }, [code]);
-
-  if (!showCondition) return <div />;
-  if (!id || !code) return <div />;
+  if (!showCondition) return null;
+  if (!id || !code) return null;
 
   return (
-    <div>
-      <span style={SPAN_STYLE}>
-        <img alt="img" style={IMG_STYLE} src={imageUrl} />
+    <div style={CONTAINER_STYLE}>
+      <span style={FLAG_WRAPPER_STYLE}>
+        <CountryFlag code={code} size={16} />
       </span>
       {name}
     </div>
   );
 }
 
+SimpleCountryCellRenderer.displayName = 'SimpleCountryCellRenderer';
+
 export default React.memo(SimpleCountryCellRenderer);

package/Renderers/IconRenderer.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import * as React from 'react';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
 import { CircleHelp } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
 
@@ -255,4 +256,12 @@ function IconRenderer(props) {
   );
 }
 
-export default React.memo(IconRenderer);
+// React.memo optimalizace pro AG-Grid renderer
+const arePropsEqual = createMemoComparison(
+  ['value', 'colDef'],
+  [],
+  false,
+  'IconRenderer'
+);
+
+export default React.memo(IconRenderer, arePropsEqual);

package/Renderers/ImageRenderer.jsx

@@ -1,11 +1,12 @@
 /* eslint-disable */
 import * as React from 'react';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
 
 function ImageRenderer(props) {
   const { data, value, colDef: { imageRendererParams = {} } = {} } = props;
 
   if (!imageRendererParams) return null;
-
+  
   const {
     cellAlign = 'center',
     visibleGetter,
@@ -88,4 +89,14 @@ function ImageRenderer(props) {
   );
 }
 
-export default React.memo(ImageRenderer);
+ImageRenderer.displayName = 'ImageRenderer';
+
+// React.memo optimalizace pro AG-Grid renderer
+const arePropsEqual = createMemoComparison(
+  ['value', 'colDef'],
+  [],
+  false,
+  'ImageRenderer'
+);
+
+export default React.memo(ImageRenderer, arePropsEqual);

package/Renderers/LinkRenderer.jsx

@@ -0,0 +1,132 @@
+/* eslint-disable */
+import * as React from 'react';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
+
+// Style constants
+const CONTAINER_STYLE = {
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const DEFAULT_LINK_STYLE = {
+  color: '#1a73e8',
+  textDecoration: 'none',
+  cursor: 'pointer',
+};
+
+const DEFAULT_HOVER_STYLE = {
+  textDecoration: 'underline',
+};
+
+function LinkRenderer(props) {
+  const {
+    value,
+    data,
+    colDef: { linkRendererParams = {} } = {},
+  } = props;
+
+  const {
+    onClick,
+    linkStyle,
+    hoverStyle,
+    overviewToggle = false,
+    showOnGroup = false,
+    visibleGetter,
+  } = linkRendererParams;
+
+  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 && props.api) {
+        props.api.dispatchEvent({
+          type: 'overviewToggle',
+          data: props.data,
+          params: props,
+        });
+      }
+
+      if (onClick) {
+        onClick(props);
+      }
+    },
+    [onClick, overviewToggle, props]
+  );
+
+  const handleKeyPress = React.useCallback(
+    (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        handleClick(event);
+      }
+    },
+    [handleClick]
+  );
+
+  const visibleResult = React.useMemo(() =>
+    visibleGetter ? visibleGetter(data) : true,
+    [visibleGetter, data]
+  );
+
+  const showCondition = React.useMemo(() => {
+    const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
+    return !newItem && (showOnGroup || !!data) && visibleResult;
+  }, [data, showOnGroup, visibleResult]);
+
+  const computedLinkStyle = React.useMemo(() => ({
+    ...DEFAULT_LINK_STYLE,
+    ...(typeof linkStyle === 'function'
+      ? linkStyle(props)
+      : linkStyle || {}),
+  }), [linkStyle, props]);
+
+  const computedHoverStyle = React.useMemo(() => ({
+    ...DEFAULT_LINK_STYLE,
+    ...computedLinkStyle,
+    ...DEFAULT_HOVER_STYLE,
+    ...(typeof hoverStyle === 'function'
+      ? hoverStyle(props)
+      : hoverStyle || {}),
+  }), [computedLinkStyle, hoverStyle, props]);
+
+  if (!showCondition || !value) return null;
+
+  return (
+    <div className="link-cell-container" style={CONTAINER_STYLE}>
+      <span
+        onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onKeyPress={handleKeyPress}
+        style={isHovered ? computedHoverStyle : computedLinkStyle}
+        role="button"
+        tabIndex={0}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+LinkRenderer.displayName = 'LinkRenderer';
+
+// React.memo optimalizace pro AG-Grid renderer
+const arePropsEqual = createMemoComparison(
+  ['value', 'colDef'],
+  [],
+  false,
+  'LinkRenderer'
+);
+
+export default React.memo(LinkRenderer, arePropsEqual);