@bit.rhplus/ag-grid 0.0.39 → 0.0.41

package/BulkEdit/BulkEditButton.jsx

@@ -31,6 +31,7 @@ const BulkEditButton = ({
   onCancel,
 }) => {
   const [popoverVisible, setPopoverVisible] = useState(false);
+  const [popoverPosition, setPopoverPosition] = useState(null);
   const buttonRef = useRef(null);
   const popoverRef = useRef(null);
 
@@ -39,6 +40,41 @@ const BulkEditButton = ({
     setPopoverVisible(editPopover.visible);
   }, [editPopover.visible]);
 
+  // Viewport-aware positioning pro popover
+  useEffect(() => {
+    if (popoverVisible && popoverRef.current && position) {
+      requestAnimationFrame(() => {
+        const popoverRect = popoverRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const MARGIN = 10;
+        
+        let top = position.y + 35;
+        let left = position.x;
+        
+        if (left + popoverRect.width > viewportWidth - MARGIN) {
+          left = viewportWidth - popoverRect.width - MARGIN;
+        }
+        
+        if (left < MARGIN) {
+          left = MARGIN;
+        }
+        
+        if (top + popoverRect.height > viewportHeight - MARGIN) {
+          top = position.y - popoverRect.height - 5;
+        }
+        
+        if (top < MARGIN) {
+          top = MARGIN;
+        }
+        
+        setPopoverPosition({ top, left });
+      });
+    } else {
+      setPopoverPosition(null);
+    }
+  }, [popoverVisible, position]);
+
   if (!visible) return null;
 
   const colDef = column?.getColDef();
@@ -122,10 +158,12 @@ const BulkEditButton = ({
           ref={popoverRef}
           style={{
             position: 'fixed',
-            top: (position?.y || 0) + 35, // Pod buttonem
-            left: position?.x || 0,
+            top: popoverPosition?.top ?? (position?.y || 0) + 35,
+            left: popoverPosition?.left ?? (position?.x || 0),
             zIndex: 10000,
             pointerEvents: 'auto',
+            opacity: popoverPosition ? 1 : 0,
+            transition: 'opacity 0.1s ease-in-out',
           }}
         >
           <BulkEditPopover

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

@@ -3,6 +3,7 @@ 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';