@bit.rhplus/ag-grid 0.0.38 → 0.0.40

package/Aggregations.js

@@ -61,7 +61,7 @@ let cachedAggregations = null;
 let cachedRangeHash = null;
 
 // Jednoduchý hash funkce pro rychlé porovnání ranges
-const hashRanges = (ranges) => {
+export const hashRanges = (ranges) => {
   if (!ranges || ranges.length === 0) return null;
   return ranges.map(r => 
     `${r.startRow?.rowIndex}-${r.endRow?.rowIndex}-${r.columns?.length}-${r.columns?.[0]?.colId}`

package/BulkEdit/BulkEditDatePicker.jsx

@@ -0,0 +1,295 @@
+/* eslint-disable */
+import React, { useState, useCallback, useMemo } from 'react';
+import { Calendar, Button, Space, Tooltip } from 'antd';
+import dayjs from 'dayjs';
+import 'dayjs/locale/cs';
+import styled from 'styled-components';
+import Holidays from 'date-holidays';
+
+dayjs.locale('cs');
+
+const CalendarContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  width: 900px;
+  justify-content: space-between;
+  
+  .ant-picker-calendar {
+    max-width: 260px;
+    flex: 1;
+  }
+  
+  .ant-picker-calendar-header {
+    padding: 8px 12px;
+  }
+  
+  .ant-picker-cell-selected .ant-picker-cell-inner {
+    background: transparent !important;
+    color: inherit !important;
+    font-weight: normal !important;
+  }
+  
+  .ant-picker-cell-disabled {
+    pointer-events: none;
+  }
+  
+  .ant-picker-cell-disabled .ant-picker-cell-inner {
+    color: rgba(0, 0, 0, 0.25) !important;
+    background: transparent !important;
+  }
+  
+  .ant-picker-cell:not(.ant-picker-cell-in-view) .ant-picker-cell-inner {
+    color: rgba(0, 0, 0, 0.25) !important;
+    background: transparent !important;
+  }
+`;
+
+const BulkEditDatePicker = ({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  loading,
+  format = 'DD.MM.YYYY',
+  showTime = false,
+}) => {
+  const today = dayjs();
+  const [selectedDate, setSelectedDate] = useState(value ? dayjs(value) : null);
+  const [baseMonth, setBaseMonth] = useState(today);
+  
+  const month1 = baseMonth;
+  const month2 = baseMonth.add(1, 'month');
+  const month3 = baseMonth.add(2, 'month');
+
+  const hd = useMemo(() => new Holidays('CZ'), []);
+
+  const handleDateSelect = (date) => {
+    setSelectedDate(date);
+    if (showTime) {
+      onChange(date.toISOString());
+    } else {
+      onChange(date.format('YYYY-MM-DD'));
+    }
+  };
+
+  const getHoliday = useCallback((date) => {
+    const holidays = hd.isHoliday(date.toDate());
+    return holidays && holidays.length > 0 ? holidays[0].name : null;
+  }, [hd]);
+
+  const getVisibleHolidays = useCallback(() => {
+    const holidays = [];
+    const months = [month1, month2, month3];
+    
+    months.forEach(month => {
+      const startOfMonth = month.startOf('month');
+      const endOfMonth = month.endOf('month');
+      let current = startOfMonth;
+      
+      while (current.isBefore(endOfMonth) || current.isSame(endOfMonth, 'day')) {
+        const holidayName = getHoliday(current);
+        if (holidayName) {
+          holidays.push({
+            date: current.format('DD.MM.YYYY'),
+            name: holidayName,
+          });
+        }
+        current = current.add(1, 'day');
+      }
+    });
+    
+    return holidays;
+  }, [month1, month2, month3, getHoliday]);
+
+  const visibleHolidays = useMemo(() => getVisibleHolidays(), [getVisibleHolidays]);
+
+  const createCellRender = useCallback((monthValue) => {
+    return (current, info) => {
+      const isSelected = selectedDate && 
+        current.date() === selectedDate.date() && 
+        current.month() === selectedDate.month() && 
+        current.year() === selectedDate.year();
+      const isToday = current.isSame(today, 'day');
+      const holidayName = getHoliday(current);
+      
+      if (isSelected) {
+        return (
+          <div className="ant-picker-cell-inner" style={{
+            background: '#1890ff',
+            color: 'white',
+            fontWeight: 600,
+          }}>
+            {current.date()}
+          </div>
+        );
+      }
+
+      if (holidayName) {
+        return (
+          <div className="ant-picker-cell-inner" style={{
+            background: '#fff1f0',
+            color: '#cf1322',
+            fontWeight: 600,
+          }}>
+            {current.date()}
+          </div>
+        );
+      }
+      
+      if (isToday) {
+        return (
+          <div className="ant-picker-cell-inner" style={{
+            background: '#e6f7ff',
+            color: '#1890ff',
+            fontWeight: 600,
+            border: '1px solid #1890ff',
+          }}>
+            {current.date()}
+          </div>
+        );
+      }
+      
+      return (
+        <div className="ant-picker-cell-inner">
+          {current.date()}
+        </div>
+      );
+    };
+  }, [selectedDate, today, getHoliday]);
+
+  return (
+    <>
+      <CalendarContainer onClick={(e) => e.stopPropagation()}>
+        <Calendar
+          fullscreen={false}
+          value={month1}
+          onSelect={handleDateSelect}
+          fullCellRender={createCellRender(month1)}
+          headerRender={({ value: currentValue }) => (
+            <div style={{ 
+              padding: '8px 12px', 
+              fontWeight: 500, 
+              textAlign: 'center',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between'
+            }}>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.subtract(1, 'month'))}
+              >
+                ‹
+              </span>
+              <span>{currentValue.format('MMMM YYYY')}</span>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.add(1, 'month'))}
+              >
+                ›
+              </span>
+            </div>
+          )}
+        />
+        <Calendar
+          fullscreen={false}
+          value={month2}
+          onSelect={handleDateSelect}
+          fullCellRender={createCellRender(month2)}
+          headerRender={({ value: currentValue }) => (
+            <div style={{ 
+              padding: '8px 12px', 
+              fontWeight: 500, 
+              textAlign: 'center',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between'
+            }}>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.subtract(1, 'month'))}
+              >
+                ‹
+              </span>
+              <span>{currentValue.format('MMMM YYYY')}</span>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.add(1, 'month'))}
+              >
+                ›
+              </span>
+            </div>
+          )}
+        />
+        <Calendar
+          fullscreen={false}
+          value={month3}
+          onSelect={handleDateSelect}
+          fullCellRender={createCellRender(month3)}
+          headerRender={({ value: currentValue }) => (
+            <div style={{ 
+              padding: '8px 12px', 
+              fontWeight: 500, 
+              textAlign: 'center',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between'
+            }}>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.subtract(1, 'month'))}
+              >
+                ‹
+              </span>
+              <span>{currentValue.format('MMMM YYYY')}</span>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.add(1, 'month'))}
+              >
+                ›
+              </span>
+            </div>
+          )}
+        />
+      </CalendarContainer>
+
+      {visibleHolidays.length > 0 && (
+        <div style={{ marginBottom: '12px', fontSize: '11px', color: '#666' }}>
+          {visibleHolidays.map((holiday, index) => {
+            const isSelectedHoliday = selectedDate && holiday.date === selectedDate.format('DD.MM.YYYY');
+            return (
+              <div 
+                key={index} 
+                style={{ 
+                  marginBottom: '2px',
+                  background: isSelectedHoliday ? '#e6f7ff' : 'transparent',
+                  padding: isSelectedHoliday ? '2px 4px' : '0',
+                  borderRadius: '2px',
+                  fontWeight: isSelectedHoliday ? 600 : 'normal',
+                }}
+              >
+                <span style={{ color: '#cf1322', fontWeight: 500 }}>{holiday.date}</span> - {holiday.name}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
+        <Button size="small" onClick={onCancel} disabled={loading}>
+          Zrušit
+        </Button>
+        <Button
+          type="primary"
+          size="small"
+          onClick={() => onSubmit(value)}
+          loading={loading}
+        >
+          Použít
+        </Button>
+      </Space>
+    </>
+  );
+};
+
+export default BulkEditDatePicker;

package/BulkEdit/BulkEditPopover.jsx

@@ -163,7 +163,7 @@ const BulkEditPopover = ({
           padding: '12px',
           boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
           minWidth: '280px',
-          maxWidth: '320px',
+          maxWidth: '1050px',
         }}
       >
         <div style={{ marginBottom: '8px' }}>
@@ -218,7 +218,7 @@ const BulkEditPopover = ({
           padding: '12px',
           boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
           minWidth: '280px',
-          maxWidth: '320px',
+          maxWidth: '1050px',
         }}
       >
         <div style={{ marginBottom: '8px' }}>

package/BulkEdit/index.js

@@ -2,4 +2,8 @@
 export { useBulkCellEdit } from './useBulkCellEdit';
 export { default as BulkEditButton } from './BulkEditButton';
 export { default as BulkEditPopover } from './BulkEditPopover';
+export { default as BulkEditSelect } from './BulkEditSelect';
+export { default as BulkEditDatePicker } from './BulkEditDatePicker';
+
 export * from './utils';
+

package/BulkEdit/useBulkCellEdit.js

@@ -44,27 +44,111 @@ export const useBulkCellEdit = (gridRef, options = {}) => {
   });
 
   const scrollListenerRef = useRef(null);
-  const rangeTimeoutRef = useRef(null);
+  const debounceTimeoutRef = useRef(null);
+  const pendingEventRef = useRef(null);
 
   /**
-   * Handler pro změnu range selection
+   * Helper funkce pro výpočet pozice buttonu
+   */
+  const calculateButtonPosition = useCallback((cellPosition) => {
+    let buttonX, buttonY;
+
+    switch (buttonPosition) {
+      case 'bottom-right':
+        buttonX = cellPosition.right + buttonOffset.x;
+        buttonY = cellPosition.bottom + buttonOffset.y;
+        break;
+      case 'bottom-left':
+        buttonX = cellPosition.left - buttonOffset.x;
+        buttonY = cellPosition.bottom + buttonOffset.y;
+        break;
+      case 'top-right':
+        buttonX = cellPosition.right + buttonOffset.x;
+        buttonY = cellPosition.top - buttonOffset.y;
+        break;
+      case 'top-left':
+        buttonX = cellPosition.left - buttonOffset.x;
+        buttonY = cellPosition.top - buttonOffset.y;
+        break;
+      default:
+        buttonX = cellPosition.right + buttonOffset.x;
+        buttonY = cellPosition.bottom + buttonOffset.y;
+    }
+
+    return { x: buttonX, y: buttonY };
+  }, [buttonPosition, buttonOffset]);
+
+  /**
+   * Handler pro změnu range selection s okamžitou + debounced validací
    */
   const handleRangeChange = useCallback(
     (event) => {
-      // Clear předchozí timeout
-      if (rangeTimeoutRef.current) {
-        clearTimeout(rangeTimeoutRef.current);
-      }
-
-      // 1. Kontrola enableBulkEdit
+      // Lightweight pre-checks - okamžitě bez debounce
       if (!enabled) {
         setFloatingButton({ visible: false });
         return;
       }
 
       const ranges = event.api.getCellRanges();
+      if (!ranges || ranges.length === 0) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      const range = ranges[0];
+
+      // ✨ OKAŽITÁ lightweight validace - zobraz button HNED
+      if (allowMultiColumn || range.columns.length === 1) {
+        const cellCount = Math.abs(range.endRow.rowIndex - range.startRow.rowIndex) + 1;
+        
+        if (cellCount >= minCells) {
+          // Kontrola zda má sloupec bulkEditApi (rychlá kontrola)
+          const column = range.columns[0];
+          const colDef = column?.getColDef();
+          const hasBulkEditApi = colDef?.bulkEditApi || colDef?.bulkEditPopover;
+          
+          // Zobraz button jen pokud má bulkEditApi nebo bulkEditPopover
+          if (hasBulkEditApi) {
+            const cellPosition = getLastCellPosition(range, event.api);
+            if (cellPosition) {
+              setFloatingButton({
+                visible: true,
+                position: calculateButtonPosition(cellPosition),
+                range,
+                column: column,
+                cellCount,
+              });
+            }
+          } else {
+            // Skryj button pokud sloupec nemá bulk edit podporu
+            setFloatingButton({ visible: false });
+          }
+        }
+      }
+
+      // Uložit event pro debounced těžkou validaci (editable check)
+      pendingEventRef.current = event;
 
-      // 2. Kontrola existence ranges
+      // Debounce logika - těžká validace proběhne na pozadí (50ms)
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+
+      debounceTimeoutRef.current = setTimeout(() => {
+        if (pendingEventRef.current) {
+          executeRangeValidation(pendingEventRef.current);
+        }
+      }, 50);
+    },
+    [enabled, allowMultiColumn, minCells, calculateButtonPosition]
+  );
+
+  /**
+   * Těžké validace a výpočty v debounced callbacku
+   */
+  const executeRangeValidation = useCallback(
+    (event) => {
+      const ranges = event.api.getCellRanges();
       if (!ranges || ranges.length === 0) {
         setFloatingButton({ visible: false });
         return;
@@ -72,70 +156,44 @@ export const useBulkCellEdit = (gridRef, options = {}) => {
 
       const range = ranges[0];
 
-      // 3. Kontrola single column (pokud není povoleno multi-column)
+      // Kontrola single column
       if (!allowMultiColumn && range.columns.length !== 1) {
         setFloatingButton({ visible: false });
         return;
       }
 
-      // 4. Výpočet počtu buněk
+      // Výpočet počtu buněk
       const cellCount =
         Math.abs(range.endRow.rowIndex - range.startRow.rowIndex) + 1;
 
-      // 5. Kontrola min počtu buněk
+      // Kontrola min počtu buněk
       if (cellCount < minCells) {
         setFloatingButton({ visible: false });
         return;
       }
 
-      // 6. Kontrola editable sloupce
+      // Těžká validace - editable sloupce
       if (!validateRangeEditable(range, event.api)) {
         setFloatingButton({ visible: false });
         return;
       }
 
-      // 7-9. Debounce výpočet pozice a zobrazení buttonu (500ms)
-      rangeTimeoutRef.current = setTimeout(() => {
-        const cellPosition = getLastCellPosition(range, event.api);
-        if (!cellPosition) {
-          setFloatingButton({ visible: false });
-          return;
-        }
-
-        let buttonX, buttonY;
-
-        switch (buttonPosition) {
-          case 'bottom-right':
-            buttonX = cellPosition.right + buttonOffset.x;
-            buttonY = cellPosition.bottom + buttonOffset.y;
-            break;
-          case 'bottom-left':
-            buttonX = cellPosition.left - buttonOffset.x;
-            buttonY = cellPosition.bottom + buttonOffset.y;
-            break;
-          case 'top-right':
-            buttonX = cellPosition.right + buttonOffset.x;
-            buttonY = cellPosition.top - buttonOffset.y;
-            break;
-          case 'top-left':
-            buttonX = cellPosition.left - buttonOffset.x;
-            buttonY = cellPosition.top - buttonOffset.y;
-            break;
-          default:
-            buttonX = cellPosition.right + buttonOffset.x;
-            buttonY = cellPosition.bottom + buttonOffset.y;
-        }
+      // Těžký výpočet - pozice buňky
+      const cellPosition = getLastCellPosition(range, event.api);
+      if (!cellPosition) {
+        setFloatingButton({ visible: false });
+        return;
+      }
 
-        setFloatingButton({
-          visible: true,
-          position: { x: buttonX, y: buttonY },
-          range,
-          column: range.columns[0],
-          cellCount,
-        });
-      }, 500);
+      setFloatingButton({
+        visible: true,
+        position: calculateButtonPosition(cellPosition),
+        range,
+        column: range.columns[0],
+        cellCount,
+      });
     },
-    [enabled, minCells, allowMultiColumn, buttonPosition, buttonOffset]
+    [minCells, allowMultiColumn, buttonPosition, buttonOffset]
   );
 
   /**
@@ -310,8 +368,8 @@ export const useBulkCellEdit = (gridRef, options = {}) => {
    */
   useEffect(() => {
     return () => {
-      if (rangeTimeoutRef.current) {
-        clearTimeout(rangeTimeoutRef.current);
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
       }
     };
   }, []);

package/BulkEdit/utils.js

@@ -386,13 +386,28 @@ export const applyBulkChangesWithApi = async (
       };
     }
     
-    // Sestavit request podle bulkEditApi.mapRequest
-    const requestData = bulkEditApi.mapRequest
-      ? bulkEditApi.mapRequest(ids, newValue, field, rows)
-      : {
-          ids,
-          patch: [{ op: 'replace', path: `/${field}`, value: newValue }]
-        };
+    // Sestavit request podle bulkEditApi konfigurace
+    let requestData;
+    if (bulkEditApi.lookup) {
+      // Lookup pattern - automaticky vytvořit PATCH request
+      requestData = {
+        ids,
+        patch: [{
+          op: 'replace',
+          path: bulkEditApi.lookup.patchPath,
+          value: newValue
+        }]
+      };
+    } else if (bulkEditApi.mapRequest) {
+      // Custom mapRequest funkce
+      requestData = bulkEditApi.mapRequest(ids, newValue, field, rows);
+    } else {
+      // Fallback default
+      requestData = {
+        ids,
+        patch: [{ op: 'replace', path: `/${field}`, value: newValue }]
+      };
+    }
     
     // Zavolat API
     const response = await fetchDataUIAsync(
@@ -404,7 +419,32 @@ export const applyBulkChangesWithApi = async (
     if (response.success) {
       // Update grid - použít data z response nebo lokálně
       let updatedData;
-      if (bulkEditApi.mapResponse) {
+      if (bulkEditApi.lookup) {
+        // Lookup pattern - najít objekt v lookupData a aktualizovat rows
+        let selectedItem = null;
+        
+        // Pokud je newValue prázdné ("" nebo null), nastavit selectedItem na null
+        if (newValue !== "" && newValue !== null && newValue !== undefined) {
+          selectedItem = bulkEditApi.lookup.data.find(item => item.id === newValue);
+          
+          if (!selectedItem) {
+            console.warn(`⚠️ ${bulkEditApi.lookup.objectField} nenalezen pro ID:`, newValue);
+          }
+        }
+        
+        // Aktualizovat rows - i když je selectedItem null (= clear hodnoty)
+        updatedData = rows.map(row => {
+          if (ids.includes(row.id)) {
+            return {
+              ...row,
+              [bulkEditApi.lookup.objectField]: selectedItem,
+              [bulkEditApi.lookup.idField]: selectedItem ? selectedItem.id : null
+            };
+          }
+          return row;
+        });
+      } else if (bulkEditApi.mapResponse) {
+        // Custom mapResponse funkce
         updatedData = bulkEditApi.mapResponse(response.data, ids, rows, field);
       } else if (response.data?.records) {
         // Mapovat response records (id + value) na existující rows

package/dist/Aggregations.d.ts

@@ -1 +1,2 @@
 export default function Aggregations(gridRef: any): any;
+export function hashRanges(ranges: any): any;

package/dist/Aggregations.js

@@ -53,7 +53,7 @@ const isValidDate = value => {
 let cachedAggregations = null;
 let cachedRangeHash = null;
 // Jednoduchý hash funkce pro rychlé porovnání ranges
-const hashRanges = (ranges) => {
+export const hashRanges = (ranges) => {
     if (!ranges || ranges.length === 0)
         return null;
     return ranges.map(r => `${r.startRow?.rowIndex}-${r.endRow?.rowIndex}-${r.columns?.length}-${r.columns?.[0]?.colId}`).join('|');