@stfrigerio/sito-template 0.1.33 → 0.1.35

package/dist/index.js

@@ -2690,7 +2690,7 @@ var styles$8 = {"calendar":"Calendar-module_calendar__3mIJS","loading":"Calendar
  *   onEventClick={handleEventClick}
  * />
  */
-function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDateClickByView, viewMode = 'month', initialDate = new Date(), config = {}, className = '', style = {}, loading = false, emptyState, hideHeader = false }) {
+function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDateClickByView, onTimeSlotClick, viewMode = 'month', initialDate = new Date(), config = {}, className = '', style = {}, loading = false, emptyState, hideHeader = false }) {
     const [currentDate, setCurrentDate] = React.useState(initialDate);
     const [currentViewMode, setCurrentViewMode] = React.useState(viewMode);
     const dayViewScrollRef = React.useRef(null);
@@ -2883,6 +2883,16 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
             onDateClick(date);
         }
     };
+    const handleTimeSlotClick = (hour) => {
+        if (onTimeSlotClick) {
+            // Create a date object with the current date and the clicked hour
+            const slotDate = new Date(currentDate);
+            slotDate.setHours(hour, 0, 0, 0);
+            // Format time as HH:00
+            const timeString = `${hour.toString().padStart(2, '0')}:00`;
+            onTimeSlotClick(slotDate, hour, timeString);
+        }
+    };
     const isToday = (date) => {
         const today = new Date();
         return date.toDateString() === today.toDateString();
@@ -2917,7 +2927,13 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                                             const eventHour = parseInt(event.time.split(':')[0]);
                                             return eventHour === hour;
                                         });
-                                        return (jsxRuntime.jsxs("div", { className: styles$8.hourSlot, children: [jsxRuntime.jsx("div", { className: styles$8.hourLine }), hourEvents.map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$8.dayEvent} ${event.status === 'completed' ? styles$8.completed : ''}`, style: {
+                                        return (jsxRuntime.jsxs("div", { className: styles$8.hourSlot, onClick: (e) => {
+                                                // Only trigger if clicking on the slot itself, not on an event
+                                                if (e.target === e.currentTarget ||
+                                                    e.target.classList.contains(styles$8.hourLine)) {
+                                                    handleTimeSlotClick(hour);
+                                                }
+                                            }, style: { cursor: 'pointer' }, children: [jsxRuntime.jsx("div", { className: styles$8.hourLine }), hourEvents.map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$8.dayEvent} ${event.status === 'completed' ? styles$8.completed : ''}`, style: {
                                                         backgroundColor: getEventColor(event),
                                                         color: getEventTextColor(event),
                                                         opacity: event.status === 'completed' ? 0.7 : 1
@@ -3041,8 +3057,10 @@ var styles$7 = {"container":"MoodChart-module_container__MB1Vr","chart":"MoodCha
 const MoodChart = ({ moodData, width = 800, height = 400 }) => {
     const svgRef = React.useRef(null);
     const containerRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
     const [selectedMood, setSelectedMood] = React.useState(null);
     const [tooltipPosition, setTooltipPosition] = React.useState({ x: 0, y: 0 });
+    const [isHoveringTooltip, setIsHoveringTooltip] = React.useState(false);
     const margin = { top: 20, right: 20, bottom: 50, left: 40 };
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
@@ -3120,11 +3138,26 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             .style('cursor', 'pointer')
             .on('mouseenter', (event, d) => {
             const rect = svgRef.current?.getBoundingClientRect();
-            if (rect) {
-                setTooltipPosition({
-                    x: event.clientX - rect.left + 20,
-                    y: event.clientY - rect.top - 10
-                });
+            const containerRect = containerRef.current?.getBoundingClientRect();
+            if (rect && containerRect) {
+                let x = event.clientX - rect.left + 10;
+                let y = event.clientY - rect.top - 10;
+                // Check if tooltip would overflow on the right
+                const estimatedTooltipWidth = 250; // Approximate tooltip width
+                const rightEdgeBuffer = 20; // Buffer from the right edge
+                if (x + estimatedTooltipWidth > chartWidth + margin.left - rightEdgeBuffer) {
+                    // Position tooltip to the left of the cursor, but keep it close
+                    x = event.clientX - rect.left - estimatedTooltipWidth - 10;
+                    // Ensure it doesn't go off the left edge
+                    if (x < 0) {
+                        x = 10;
+                    }
+                }
+                // Ensure tooltip doesn't go above the container
+                if (y < 0) {
+                    y = 10;
+                }
+                setTooltipPosition({ x, y });
             }
             setSelectedMood(d);
             d3__namespace.select(event.currentTarget)
@@ -3133,28 +3166,33 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
                 .attr('r', 8);
         })
             .on('mouseleave', (event) => {
-            // Use a timeout to ensure the event fires
+            // Add delay to allow mouse to move to tooltip
             setTimeout(() => {
-                setSelectedMood(null);
-            }, 0);
+                if (!isHoveringTooltip) {
+                    setSelectedMood(null);
+                }
+            }, 250);
             d3__namespace.select(event.currentTarget)
                 .transition()
                 .duration(200)
                 .attr('r', 5);
         });
-    }, [processedData, chartWidth, chartHeight, colorScale, margin]);
+    }, [processedData, chartWidth, chartHeight, colorScale, margin, isHoveringTooltip]);
     // Clean up tooltip on unmount
     React.useEffect(() => {
         return () => {
             setSelectedMood(null);
         };
     }, []);
-    return (jsxRuntime.jsxs("div", { className: styles$7.container, ref: containerRef, onMouseLeave: () => setSelectedMood(null), children: [jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$7.chart }), selectedMood && (jsxRuntime.jsxs("div", { className: styles$7.tooltip, style: {
+    return (jsxRuntime.jsxs("div", { className: styles$7.container, ref: containerRef, children: [jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$7.chart }), selectedMood && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: styles$7.tooltip, style: {
                     position: 'absolute',
-                    pointerEvents: 'none',
+                    pointerEvents: 'auto',
                     left: tooltipPosition.x,
                     top: tooltipPosition.y,
                     zIndex: 1000
+                }, onMouseEnter: () => setIsHoveringTooltip(true), onMouseLeave: () => {
+                    setIsHoveringTooltip(false);
+                    setSelectedMood(null);
                 }, children: [jsxRuntime.jsxs("div", { className: styles$7.tooltipHeader, children: [jsxRuntime.jsx("div", { className: styles$7.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxRuntime.jsxs("div", { className: styles$7.tooltipRating, children: [jsxRuntime.jsx("span", { className: styles$7.ratingValue, children: selectedMood.rating }), jsxRuntime.jsx("span", { className: styles$7.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsxRuntime.jsx("div", { className: styles$7.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsxRuntime.jsx("span", { className: styles$7.tag, children: tag }, index))) })), selectedMood.comment && (jsxRuntime.jsx("div", { className: styles$7.tooltipComment, children: selectedMood.comment }))] }))] }));
 };