@moontra/moonui-pro 2.17.3 → 2.17.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.17.3",
+  "version": "2.17.5",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/calendar-pro/index.tsx

@@ -271,7 +271,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../ui/command'
 import { motion, AnimatePresence, LayoutGroup, useMotionValue, useTransform, animate } from 'framer-motion'
 import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays, addWeeks, addMonths, addYears, subMonths, subYears, isSameMonth, isSameDay, isToday, isBefore, isAfter, differenceInDays, differenceInWeeks, differenceInMonths, parseISO, startOfDay, endOfDay, isWithinInterval, eachDayOfInterval, getDay, setHours, setMinutes, startOfYear, endOfYear, eachMonthOfInterval, getDaysInMonth, getWeek, startOfISOWeek, endOfISOWeek, addHours, subHours, isSameHour, differenceInHours, differenceInMinutes, addMinutes, subMinutes, isSameMinute, setSeconds, setMilliseconds, subDays, subWeeks } from 'date-fns'
-import { DragDropContext, Droppable, Draggable, DropResult, DraggableProvided, DraggableStateSnapshot, DroppableProvided } from 'react-beautiful-dnd'
+// Removed react-beautiful-dnd imports - using HTML5 drag & drop instead
 import { Calendar as CalendarBase } from '../ui/calendar'
 import { HexColorPicker } from 'react-colorful'
 
@@ -441,6 +441,9 @@ export const CalendarPro = React.forwardRef<HTMLDivElement, CalendarProProps>(({
   theme = 'system',
   ...props
 }, ref) => {
+  // Drag state
+  const [draggedEventId, setDraggedEventId] = useState<string | null>(null)
+  const [dragOverInfo, setDragOverInfo] = useState<{ date: Date; hour?: number } | null>(null)
   const [internalSidebarCollapsed, setInternalSidebarCollapsed] = useState(false)
   const sidebarCollapsed = controlledSidebarCollapsed ?? internalSidebarCollapsed
   
@@ -617,29 +620,91 @@ export const CalendarPro = React.forwardRef<HTMLDivElement, CalendarProProps>(({
   }, [selectedEvent, onEventDelete])
   
   // Handle drag start
-  const handleDragStart = useCallback((event: CalendarEvent) => {
+  const handleDragStart = useCallback((e: React.DragEvent, event: CalendarEvent) => {
     if (!allowEventDragging) return
+    
+    setDraggedEventId(event.id)
     setIsDragging(true)
-    setDraggedEvent(event)
+    
+    // Store event data in dataTransfer
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', event.id)
+    
+    // Create drag image with preserved dimensions
+    const dragImage = e.currentTarget.cloneNode(true) as HTMLElement
+    const originalRect = e.currentTarget.getBoundingClientRect()
+    dragImage.style.opacity = '0.8'
+    dragImage.style.position = 'absolute'
+    dragImage.style.top = '-1000px'
+    dragImage.style.width = `${originalRect.width}px`
+    dragImage.style.height = `${originalRect.height}px`
+    dragImage.style.boxSizing = 'border-box'
+    document.body.appendChild(dragImage)
+    e.dataTransfer.setDragImage(dragImage, e.nativeEvent.offsetX, e.nativeEvent.offsetY)
+    setTimeout(() => document.body.removeChild(dragImage), 0)
   }, [allowEventDragging])
   
-  // Handle drag end
-  const handleDragEnd = useCallback((result: DropResult) => {
-    setIsDragging(false)
-    setDraggedEvent(null)
-    setDropTarget(null)
+  // Handle drag over
+  const handleDragOver = useCallback((e: React.DragEvent, date: Date, hour?: number) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    setDragOverInfo({ date, hour })
+  }, [])
+  
+  // Handle drag leave
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    // Only clear if we're leaving the drop zone entirely
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = e.clientX
+    const y = e.clientY
+    
+    if (x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom) {
+      setDragOverInfo(null)
+    }
+  }, [])
+  
+  // Handle drop
+  const handleDrop = useCallback((e: React.DragEvent, date: Date, hour?: number) => {
+    e.preventDefault()
+    
+    const eventId = e.dataTransfer.getData('text/plain')
+    const draggedEvent = events.find(ev => ev.id === eventId)
+    
+    if (!draggedEvent || !onEventDrop) return
+    
+    // Calculate new start and end times
+    let newStart: Date
+    let newEnd: Date
     
-    if (!result.destination || !draggedEvent || !onEventDrop) return
+    if (hour !== undefined) {
+      // Dropped on a specific hour slot
+      newStart = setHours(setMinutes(date, 0), hour)
+    } else {
+      // Dropped on a day (keep original time)
+      const originalHours = draggedEvent.start.getHours()
+      const originalMinutes = draggedEvent.start.getMinutes()
+      newStart = setHours(setMinutes(date, originalMinutes), originalHours)
+    }
     
-    // Calculate new start and end dates based on drop position
-    // This is a simplified version - you'd need to implement proper date calculation
-    // based on the view and drop position
-    const newStart = new Date(result.destination.droppableId)
+    // Keep the same duration
     const duration = differenceInMinutes(draggedEvent.end, draggedEvent.start)
-    const newEnd = addMinutes(newStart, duration)
+    newEnd = addMinutes(newStart, duration)
     
+    // Update event
     onEventDrop(draggedEvent.id, newStart, newEnd)
-  }, [draggedEvent, onEventDrop])
+    
+    // Reset drag state
+    setDraggedEventId(null)
+    setDragOverInfo(null)
+    setIsDragging(false)
+  }, [events, onEventDrop])
+  
+  // Handle drag end (cleanup)
+  const handleDragEnd = useCallback(() => {
+    setDraggedEventId(null)
+    setDragOverInfo(null)
+    setIsDragging(false)
+  }, [])
   
   // Export calendar
   const exportCalendar = useCallback((format: 'ics' | 'csv' | 'json') => {
@@ -721,7 +786,15 @@ END:VCALENDAR`
         <div className="flex-1 overflow-auto">
           <div className="min-h-full">
             {/* All day events */}
-            <div className="border-b p-2">
+            <div 
+              className={cn(
+                "border-b p-2",
+                dragOverInfo?.date && !dragOverInfo?.hour && isSameDay(dragOverInfo.date, currentDate) && "bg-primary/10"
+              )}
+              onDragOver={(e) => handleDragOver(e, currentDate)}
+              onDragLeave={handleDragLeave}
+              onDrop={(e) => handleDrop(e, currentDate)}
+            >
               <div className="text-xs text-muted-foreground mb-1">All Day</div>
               <div className="space-y-1">
                 {dayEvents
@@ -729,10 +802,14 @@ END:VCALENDAR`
                   .map(event => (
                     <div
                       key={event.id}
+                      draggable={allowEventDragging}
+                      onDragStart={(e) => handleDragStart(e, event)}
+                      onDragEnd={handleDragEnd}
                       className="p-2 rounded text-xs cursor-pointer hover:opacity-80"
                       style={{ 
                         backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
-                        color: '#ffffff'
+                        color: '#ffffff',
+                        opacity: draggedEventId === event.id ? 0.5 : 1
                       }}
                       onClick={(e) => handleEventClick(event, e)}
                     >
@@ -750,7 +827,13 @@ END:VCALENDAR`
                     {format(setHours(new Date(), hour), timeFormat === '12h' ? 'h a' : 'HH:00')}
                   </div>
                   <div 
-                    className="flex-1 relative border-l cursor-pointer hover:bg-muted/20"
+                    className={cn(
+                      "flex-1 relative border-l cursor-pointer hover:bg-muted/20",
+                      dragOverInfo?.date && dragOverInfo?.hour === hour && isSameDay(dragOverInfo.date, currentDate) && "bg-primary/10"
+                    )}
+                    onDragOver={(e) => handleDragOver(e, currentDate, hour)}
+                    onDragLeave={handleDragLeave}
+                    onDrop={(e) => handleDrop(e, currentDate, hour)}
                     onClick={() => {
                       if (allowEventCreation) {
                         const clickedTime = setHours(setMinutes(currentDate, 0), hour)
@@ -783,13 +866,18 @@ END:VCALENDAR`
                         return (
                           <div
                             key={event.id}
+                            draggable={allowEventDragging}
+                            onDragStart={(e) => handleDragStart(e, event)}
+                            onDragEnd={handleDragEnd}
                             className="absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden"
                             style={{
                               top: `${top}px`,
                               height: `${height}px`,
                               backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
                               color: '#ffffff',
-                              zIndex: 10
+                              zIndex: 10,
+                              opacity: draggedEventId === event.id ? 0.5 : 1,
+                              cursor: allowEventDragging ? 'move' : 'pointer'
                             }}
                             onClick={(e) => {
                               e.stopPropagation()
@@ -860,14 +948,17 @@ END:VCALENDAR`
                     const dayEvents = eventsInView.filter(event => 
                       isSameDay(new Date(event.start), day) && !event.allDay
                     )
-                    
                     return (
                       <div 
                         key={day.toISOString()} 
                         className={cn(
                           "flex-1 relative border-l border-b cursor-pointer hover:bg-muted/20",
-                          isToday(day) && "bg-primary/5"
+                          isToday(day) && "bg-primary/5",
+                          dragOverInfo?.date && dragOverInfo?.hour === hour && isSameDay(dragOverInfo.date, day) && "bg-primary/10"
                         )}
+                        onDragOver={(e) => handleDragOver(e, day, hour)}
+                        onDragLeave={handleDragLeave}
+                        onDrop={(e) => handleDrop(e, day, hour)}
                         onClick={() => {
                           if (allowEventCreation) {
                             const clickedTime = setHours(setMinutes(day, 0), hour)
@@ -898,13 +989,18 @@ END:VCALENDAR`
                             return (
                               <div
                                 key={event.id}
+                                draggable={allowEventDragging}
+                                onDragStart={(e) => handleDragStart(e, event)}
+                                onDragEnd={handleDragEnd}
                                 className="absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden"
                                 style={{
                                   top: `${top}px`,
                                   height: `${height}px`,
                                   backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
                                   color: '#ffffff',
-                                  zIndex: 10
+                                  zIndex: 10,
+                                  opacity: draggedEventId === event.id ? 0.5 : 1,
+                                  cursor: allowEventDragging ? 'move' : 'pointer'
                                 }}
                                 onClick={(e) => {
                                   e.stopPropagation()
@@ -971,8 +1067,12 @@ END:VCALENDAR`
                       "min-h-[100px] p-2 border rounded-lg cursor-pointer transition-colors",
                       !isCurrentMonth && "opacity-50",
                       isToday(day) && "bg-primary/10 border-primary",
-                      "hover:bg-muted/50"
+                      "hover:bg-muted/50",
+                      dragOverInfo?.date && !dragOverInfo?.hour && isSameDay(dragOverInfo.date, day) && "bg-primary/20 border-primary"
                     )}
+                    onDragOver={(e) => handleDragOver(e, day)}
+                    onDragLeave={handleDragLeave}
+                    onDrop={(e) => handleDrop(e, day)}
                     onClick={() => handleDateSelect(day)}
                   >
                     <div className={cn(
@@ -986,10 +1086,15 @@ END:VCALENDAR`
                         return (
                           <motion.div
                             key={event.id}
+                            draggable={allowEventDragging}
+                            onDragStart={(e) => handleDragStart(e, event)}
+                            onDragEnd={handleDragEnd}
                             className="text-xs p-1 rounded cursor-pointer truncate"
                             style={{
                               backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
-                              color: '#ffffff'
+                              color: '#ffffff',
+                              opacity: draggedEventId === event.id ? 0.5 : 1,
+                              cursor: allowEventDragging ? 'move' : 'pointer'
                             }}
                             whileHover={{ scale: 1.02 }}
                             whileTap={{ scale: 0.98 }}
@@ -1057,8 +1162,8 @@ END:VCALENDAR`
                 </CardHeader>
                 <CardContent>
                   <div className="grid grid-cols-7 gap-1 text-xs">
-                    {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map(day => (
-                      <div key={day} className="text-center text-muted-foreground p-1">
+                    {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => (
+                      <div key={`${day}-${index}`} className="text-center text-muted-foreground p-1">
                         {day}
                       </div>
                     ))}