@capillarytech/blaze-ui 5.23.3-beta.3 → 5.23.3-beta.4

package/CapEventCalendar/CalendarCanvas/index.js

@@ -1,74 +1,63 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import PropTypes from 'prop-types';
-import React, { useEffect, useState, useRef, useLayoutEffect, useMemo } from 'react';
-import dayjs, { FORMAT_TOKENS } from "../../utils/dayjs";
-import { FONT_COLOR_01, FONT_SIZE_S, FONT_FAMILY } from "../../styles/_variables";
-import { DATE_KEY_FORMAT } from "../constants";
-import { drawHeadingText, drawDashedLines, drawTodayLine, drawLineSeperator, drawRoundRectWithText } from "../drawUtils";
-import { getDaysOfMonth } from "../utils";
-import { toggleTooltip, togglePopover } from "./utils";
-//This is the default view of the popover if popoverContent props is empty
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var DefaultPopover = _ref => {
-  var {
-    title
-  } = _ref;
-  return /*#__PURE__*/_jsx("div", {
-    children: title
-  });
-};
+import { jsxs, jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useState, useRef, useEffect, useLayoutEffect, useMemo } from "react";
+import { FORMAT_TOKENS } from "../../utils/dayjs.js";
+import { FONT_COLOR_01, FONT_SIZE_S, FONT_FAMILY } from "../../styles/_variables.js";
+import { DATE_KEY_FORMAT } from "../constants.js";
+import { drawHeadingText, drawDashedLines, drawLineSeperator, drawTodayLine, drawRoundRectWithText } from "../drawUtils.js";
+import { getDaysOfMonth } from "../utils.js";
+import { toggleTooltip, togglePopover } from "./utils.js";
+import dayjs from "dayjs";
+const DefaultPopover = ({ title }) => /* @__PURE__ */ jsx("div", { children: title });
 DefaultPopover.propTypes = {
   title: PropTypes.string
 };
-var CalendarCanvas = _ref2 => {
-  var {
-    displayMonths,
-    dayGrid,
-    formattedEvents,
-    todayTooltipProps,
-    dashLineOffsetY,
-    eventHeight,
-    eventRowGap,
-    textPadding,
-    eventStartYOffset,
-    minCanvasHeight,
-    canvasFont,
-    popoverPlacement,
-    carouselDate,
-    popoverContent
-  } = _ref2;
-  var [width, setWidth] = useState(0);
-  var [height, setHeight] = useState(0);
-  var pixelRatio = window.devicePixelRatio;
-  var canvasContainerRef = useRef(null);
-  var canvas = useRef(null);
-  var contextRef = useRef(null);
-  var drawObject = useRef(null);
-  var isTooltipVisible = useRef(null);
-  var isPopoverVisible = useRef(null);
-  var currentHoverEvent = useRef(null);
-  var totalEventRowsPerQuater = useRef(0);
-  var rootTooltipRef = useRef(null);
-  var rootPopoverRef = useRef(null);
-
-  // responsive width and height
+const CalendarCanvas = ({
+  displayMonths,
+  dayGrid,
+  formattedEvents,
+  todayTooltipProps,
+  dashLineOffsetY,
+  eventHeight,
+  eventRowGap,
+  textPadding,
+  eventStartYOffset,
+  minCanvasHeight,
+  canvasFont,
+  popoverPlacement,
+  carouselDate,
+  popoverContent
+}) => {
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const pixelRatio = window.devicePixelRatio;
+  const canvasContainerRef = useRef(null);
+  const canvas = useRef(null);
+  const contextRef = useRef(null);
+  const drawObject = useRef(null);
+  const isTooltipVisible = useRef(null);
+  const isPopoverVisible = useRef(null);
+  const currentHoverEvent = useRef(null);
+  const totalEventRowsPerQuater = useRef(0);
+  const rootTooltipRef = useRef(null);
+  const rootPopoverRef = useRef(null);
   useEffect(() => {
     totalEventRowsPerQuater.current = formattedEvents.length;
     handleDimension();
   }, [formattedEvents]);
   useEffect(() => {
-    window.addEventListener('resize', doResize, true);
-    window.addEventListener('scroll', onWindowScroll, true);
-    window.addEventListener('mousemove', onWindowMouseMove, false);
+    window.addEventListener("resize", doResize, true);
+    window.addEventListener("scroll", onWindowScroll, true);
+    window.addEventListener("mousemove", onWindowMouseMove, false);
     return () => {
-      window.removeEventListener('resize', doResize);
-      window.removeEventListener('scroll', onWindowScroll);
-      window.removeEventListener('mousemove', onWindowMouseMove);
+      window.removeEventListener("resize", doResize);
+      window.removeEventListener("scroll", onWindowScroll);
+      window.removeEventListener("mousemove", onWindowMouseMove);
     };
   }, []);
   useLayoutEffect(() => {
-    if (canvas != null && canvas.current) {
-      var context = canvas.current.getContext('2d');
+    if (canvas == null ? void 0 : canvas.current) {
+      const context = canvas.current.getContext("2d");
       contextRef.current = context;
     }
   }, []);
@@ -77,112 +66,89 @@ var CalendarCanvas = _ref2 => {
       contextRef.current.scale(pixelRatio, pixelRatio);
     }
   }, [width, height]);
-  var hidePopoverAndToolTip = () => {
+  const hidePopoverAndToolTip = () => {
     toggleTooltip(false, isTooltipVisible, todayTooltipProps, rootTooltipRef);
-    togglePopover({
-      visible: false,
-      rootPopoverRef,
-      isPopoverVisible
-    });
+    togglePopover({ visible: false, rootPopoverRef, isPopoverVisible });
   };
   useEffect(() => {
-    //checking canvasContainerRef is defined to prevent client width undefined errors
     if (width > 0 && height > 0 && canvasContainerRef && canvasContainerRef.current) {
       reDrawCanvas();
     }
   }, [width, height, formattedEvents, dayGrid]);
-  var noOfDaysInQuarter = useMemo(() => displayMonths.reduce((acc, _ref3) => {
-    var {
-      daysInMonth
-    } = _ref3;
-    return acc + daysInMonth;
-  }, 0), [displayMonths]);
-  var showBorder = (month, day, monthIndex) => {
+  const noOfDaysInQuarter = useMemo(
+    () => displayMonths.reduce((acc, { daysInMonth }) => acc + daysInMonth, 0),
+    [displayMonths]
+  );
+  const showBorder = (month, day, monthIndex) => {
     if (dayjs(month.end).date() === dayjs(day).date()) return true;
     if (!monthIndex) {
       if (dayjs(month.start).date() === dayjs(day).date()) return true;
     }
     return false;
   };
-  var handleDimension = () => {
-    var minHeight = minCanvasHeight || canvasContainerRef.current.clientHeight;
-    var {
-      y: rectY
-    } = getRectInitDimension();
-    var estimatedHeight = rectY + eventStartYOffset + (eventHeight + eventRowGap) * totalEventRowsPerQuater.current;
+  const handleDimension = () => {
+    const minHeight = minCanvasHeight || canvasContainerRef.current.clientHeight;
+    const { y: rectY } = getRectInitDimension();
+    const estimatedHeight = rectY + eventStartYOffset + (eventHeight + eventRowGap) * totalEventRowsPerQuater.current;
     setWidth(canvasContainerRef.current.clientWidth);
     setHeight(estimatedHeight > minHeight ? estimatedHeight : minHeight);
   };
-
-  //for all page actions like resize and scroll and mouse move, check if canvas container ref is present
-  //this is needed to tackle empty state page resizing and navigation between quarters with empty states
-  var doResize = () => (canvasContainerRef == null ? void 0 : canvasContainerRef.current) && handleDimension();
-  var onWindowScroll = event => {
-    var _document$getElements;
-    var popoverContainer = (_document$getElements = document.getElementsByClassName('event-calendar-popover-overlay')) == null ? void 0 : _document$getElements[0];
-    if (canvasContainerRef != null && canvasContainerRef.current && !(popoverContainer && popoverContainer.contains(event.target))) {
+  const doResize = () => (canvasContainerRef == null ? void 0 : canvasContainerRef.current) && handleDimension();
+  const onWindowScroll = (event) => {
+    var _a;
+    const popoverContainer = (_a = document.getElementsByClassName("event-calendar-popover-overlay")) == null ? void 0 : _a[0];
+    if ((canvasContainerRef == null ? void 0 : canvasContainerRef.current) && !(popoverContainer && popoverContainer.contains(event.target))) {
       hidePopoverAndToolTip();
     }
   };
-  var onWindowMouseMove = event => {
+  const onWindowMouseMove = (event) => {
+    var _a;
     if (canvasContainerRef.current) {
-      var _document$getElements2;
-      var canvasContainer = canvasContainerRef.current;
-      var moveX = event.clientX;
-      var moveY = event.clientY;
-      // Mouse x and y should be between canvas container co-ordinates
-      // If not tooltip and popover will be closed
-      var {
-        top,
-        left
-      } = canvasContainer.getBoundingClientRect();
-      var popoverContainer = (_document$getElements2 = document.getElementsByClassName('event-calendar-popover-overlay')) == null ? void 0 : _document$getElements2[0];
+      const canvasContainer = canvasContainerRef.current;
+      const moveX = event.clientX;
+      const moveY = event.clientY;
+      const { top, left } = canvasContainer.getBoundingClientRect();
+      const popoverContainer = (_a = document.getElementsByClassName(
+        "event-calendar-popover-overlay"
+      )) == null ? void 0 : _a[0];
       if (!(moveX > left && moveX < left + canvasContainer.clientWidth && moveY > top && moveY < top + canvasContainer.clientHeight || popoverContainer && popoverContainer.contains(event.target))) {
         hidePopoverAndToolTip();
       }
     }
   };
-  var initDayObject = _ref4 => {
-    var {
-      x: rectX,
-      y: rectY,
-      midX: rectMidX,
-      width: rectWidth,
-      height: rectHeight
-    } = _ref4;
-    return {
-      x: rectX,
-      y: rectY,
-      midX: rectMidX,
-      width: rectWidth,
-      height: rectHeight
-    };
-  };
-  var getRectInitDimension = () => ({
+  const initDayObject = ({
+    x: rectX,
+    y: rectY,
+    midX: rectMidX,
+    width: rectWidth,
+    height: rectHeight
+  }) => ({
+    x: rectX,
+    y: rectY,
+    midX: rectMidX,
+    width: rectWidth,
+    height: rectHeight
+  });
+  const getRectInitDimension = () => ({
     x: 0,
     y: 0,
     height,
     width: width / noOfDaysInQuarter
   });
-  var drawLayout = () => {
-    var context = contextRef.current;
-    var dayObject = {};
-    var {
-      x: rectX,
-      y: rectY,
-      height: rectHeight,
-      width: rectWidth
-    } = getRectInitDimension();
-    var startX = rectX;
+  const drawLayout = () => {
+    const context = contextRef.current;
+    const dayObject = {};
+    const { x: rectX, y: rectY, height: rectHeight, width: rectWidth } = getRectInitDimension();
+    let startX = rectX;
     displayMonths.forEach((month, monthIndex) => {
-      var allDays = getDaysOfMonth(month.start);
-      allDays.forEach(day => {
-        var rectMidX = startX + rectWidth / 2;
+      const allDays = getDaysOfMonth(month.start);
+      allDays.forEach((day) => {
+        const rectMidX = startX + rectWidth / 2;
         context.beginPath();
         context.rect(startX, rectY, rectWidth, rectHeight);
-        var dayKey = dayjs(day).format(DATE_KEY_FORMAT);
-        var today = dayjs().format(DATE_KEY_FORMAT);
-        var isToday = dayKey === today;
+        const dayKey = dayjs(day).format(DATE_KEY_FORMAT);
+        const today = dayjs().format(DATE_KEY_FORMAT);
+        const isToday = dayKey === today;
         dayObject[dayKey] = initDayObject({
           x: startX,
           y: rectY,
@@ -190,9 +156,9 @@ var CalendarCanvas = _ref2 => {
           width: rectWidth,
           height: rectHeight
         });
-        var showMonthBorder = showBorder(month, day, monthIndex);
+        const showMonthBorder = showBorder(month, day, monthIndex);
         if (dayjs(day).day() === dayGrid && !isToday && !showMonthBorder) {
-          var headingMarginBottom = 8;
+          const headingMarginBottom = 8;
           drawHeadingText({
             context,
             x: rectMidX,
@@ -221,81 +187,44 @@ var CalendarCanvas = _ref2 => {
         startX += rectWidth;
       });
     });
-    drawObject.current = _extends({}, drawObject.current, {
-      day: dayObject
-    });
+    drawObject.current = { ...drawObject.current, day: dayObject };
     return dayObject;
   };
-  var updatePosition = _ref5 => {
-    var {
-      mouseX,
-      mouseY,
-      knob,
-      offsetX = 0
-    } = _ref5;
-    var {
-      style
-    } = knob;
+  const updatePosition = ({ mouseX, mouseY, knob, offsetX = 0 }) => {
+    const { style: style2 } = knob;
     if (mouseX) {
-      style.display = 'block';
-      style.left = mouseX + offsetX + "px";
-      style.top = mouseY + "px";
+      style2.display = "block";
+      style2.left = `${mouseX + offsetX}px`;
+      style2.top = `${mouseY}px`;
     } else {
-      style.display = 'none';
-      style.left = '-1000px';
-      style.top = '-1000px';
+      style2.display = "none";
+      style2.left = "-1000px";
+      style2.top = "-1000px";
     }
   };
-  var updateToolTipKnobPosition = function updateToolTipKnobPosition(_temp) {
-    var {
-      mouseX,
-      mouseY
-    } = _temp === void 0 ? {} : _temp;
-    var toolTipKnob = document.getElementById('event-calendar-tool-tip-knob');
-    updatePosition({
-      mouseX,
-      mouseY,
-      knob: toolTipKnob
-    });
+  const updateToolTipKnobPosition = ({ mouseX, mouseY } = {}) => {
+    const toolTipKnob = document.getElementById("event-calendar-tool-tip-knob");
+    updatePosition({ mouseX, mouseY, knob: toolTipKnob });
   };
-  var updatePopoverKnobPosition = function updatePopoverKnobPosition(_temp2) {
-    var {
-      mouseX,
-      mouseY
-    } = _temp2 === void 0 ? {} : _temp2;
-    var popoverKnob = document.getElementById('event-calendar-popover-knob');
-    // offsetX - 6 to make "popover arrow" completely touch over "event" left
-    // To avoid popover close - From mouse move from "event" to "popover content"
-    updatePosition({
-      mouseX,
-      mouseY,
-      knob: popoverKnob,
-      offsetX: 6
-    });
+  const updatePopoverKnobPosition = ({ mouseX, mouseY } = {}) => {
+    const popoverKnob = document.getElementById("event-calendar-popover-knob");
+    updatePosition({ mouseX, mouseY, knob: popoverKnob, offsetX: 6 });
   };
-  var getDayObject = () => {
-    var _drawObject$current;
-    return (drawObject == null || (_drawObject$current = drawObject.current) == null ? void 0 : _drawObject$current.day) || {};
+  const getDayObject = () => {
+    var _a;
+    return ((_a = drawObject == null ? void 0 : drawObject.current) == null ? void 0 : _a.day) || {};
   };
-  var getTodayRectObj = () => {
-    var today = dayjs().year(dayjs(carouselDate).year()).format(DATE_KEY_FORMAT);
+  const getTodayRectObj = () => {
+    const today = dayjs().year(dayjs(carouselDate).year()).format(DATE_KEY_FORMAT);
     return getDayObject()[today];
   };
-  var handleTodayLine = function handleTodayLine(_temp3) {
-    var {
-      mouseX,
-      mouseY
-    } = _temp3 === void 0 ? {} : _temp3;
-    var context = contextRef.current;
-    var currentDayObj = getTodayRectObj();
+  const handleTodayLine = ({ mouseX, mouseY } = {}) => {
+    const context = contextRef.current;
+    const currentDayObj = getTodayRectObj();
     if (!currentDayObj) {
       return null;
     }
-    var {
-      y,
-      midX,
-      height: currentDayRectHeight
-    } = currentDayObj;
+    const { y, midX, height: currentDayRectHeight } = currentDayObj;
     return drawTodayLine({
       context,
       x: midX,
@@ -306,67 +235,53 @@ var CalendarCanvas = _ref2 => {
       mouseY
     });
   };
-  var toggleCursor = pointer => {
-    canvas.current.style.cursor = pointer ? 'pointer' : 'auto';
+  const toggleCursor = (pointer) => {
+    canvas.current.style.cursor = pointer ? "pointer" : "auto";
   };
-  var getRectDimensionOnNotFound = (date, isEnd) => {
-    var day = getDayObject();
-    var {
-      x: rectX,
-      y: rectY,
-      height: rectHeight,
-      width: rectWidth
-    } = getRectInitDimension();
-    var dayObject = isEnd ? _extends({}, initDayObject({
-      x: width,
-      y: rectY,
-      midX: width,
-      width: rectWidth,
-      height: rectHeight
-    }), {
+  const getRectDimensionOnNotFound = (date, isEnd) => {
+    const day = getDayObject();
+    const { x: rectX, y: rectY, height: rectHeight, width: rectWidth } = getRectInitDimension();
+    const dayObject = isEnd ? {
+      ...initDayObject({
+        x: width,
+        y: rectY,
+        midX: width,
+        width: rectWidth,
+        height: rectHeight
+      }),
       isCont: true
-    }) : _extends({}, initDayObject({
-      x: rectX,
-      y: rectY,
-      midX: 1,
-      width: rectWidth,
-      height: rectHeight
-    }), {
+    } : {
+      ...initDayObject({
+        x: rectX,
+        y: rectY,
+        midX: 1,
+        width: rectWidth,
+        height: rectHeight
+      }),
       isCont: true
-    });
+    };
     if (date) {
-      drawObject.current = _extends({}, drawObject.current, {
-        day: _extends({}, day, {
-          [date]: dayObject
-        })
-      });
+      drawObject.current = {
+        ...drawObject.current,
+        day: { ...day, [date]: dayObject }
+      };
     }
     return dayObject;
   };
-  var drawEvent = function drawEvent(_temp4) {
-    var {
-      mouseX,
-      mouseY
-    } = _temp4 === void 0 ? {} : _temp4;
-    var {
-      y: rectY
-    } = getRectInitDimension();
-    var eventStartY = rectY + eventStartYOffset;
-    var day = getDayObject();
-    var context = contextRef.current;
-    var currentHoverItem = null;
-    formattedEvents.forEach(eventRow => {
-      eventRow.forEach(event => {
-        var {
-          title,
-          start,
-          end,
-          backgroundColor
-        } = event;
-        var startDate = dayjs(start).format(DATE_KEY_FORMAT);
-        var endDate = dayjs(end).format(DATE_KEY_FORMAT);
-        var startRect = day[startDate];
-        var endRect = day[endDate];
+  const drawEvent = ({ mouseX, mouseY } = {}) => {
+    var _a, _b;
+    const { y: rectY } = getRectInitDimension();
+    let eventStartY = rectY + eventStartYOffset;
+    const day = getDayObject();
+    const context = contextRef.current;
+    let currentHoverItem = null;
+    formattedEvents.forEach((eventRow) => {
+      eventRow.forEach((event) => {
+        const { title, start, end, backgroundColor } = event;
+        const startDate = dayjs(start).format(DATE_KEY_FORMAT);
+        const endDate = dayjs(end).format(DATE_KEY_FORMAT);
+        let startRect = day[startDate];
+        let endRect = day[endDate];
         if (!startRect) {
           startRect = getRectDimensionOnNotFound(startDate);
         }
@@ -374,8 +289,8 @@ var CalendarCanvas = _ref2 => {
           endRect = getRectDimensionOnNotFound(endDate, true);
         }
         if (startRect && endRect) {
-          var eventWidth = endRect.midX + endRect.width - startRect.midX;
-          var isPointInRoundRectTextPath = drawRoundRectWithText({
+          const eventWidth = endRect.midX + endRect.width - startRect.midX;
+          const isPointInRoundRectTextPath = drawRoundRectWithText({
             context,
             x: startRect.midX,
             y: eventStartY,
@@ -406,56 +321,45 @@ var CalendarCanvas = _ref2 => {
       eventStartY += eventHeight + eventRowGap;
     });
     if (currentHoverItem) {
-      var _currentHoverEvent$cu;
-      var {
-        event: {
-          event_id: currentEventId
-        }
+      const {
+        event: { event_id: currentEventId }
       } = currentHoverItem;
-      if (((_currentHoverEvent$cu = currentHoverEvent.current) == null || (_currentHoverEvent$cu = _currentHoverEvent$cu.event) == null ? void 0 : _currentHoverEvent$cu.event_id) !== currentEventId) {
+      if (((_b = (_a = currentHoverEvent.current) == null ? void 0 : _a.event) == null ? void 0 : _b.event_id) !== currentEventId) {
         currentHoverEvent.current = currentHoverItem;
       }
     } else {
       currentHoverEvent.current = null;
     }
   };
-  var reDrawCanvas = () => {
-    var context = contextRef.current;
+  const reDrawCanvas = () => {
+    const context = contextRef.current;
     context.clearRect(0, 0, width, height);
     context.beginPath();
     context.font = canvasFont;
     drawCanvas();
     context.closePath();
   };
-  var drawCanvas = () => {
+  const drawCanvas = () => {
     drawLayout();
     handleTodayLine();
     drawEvent();
   };
-  var displayWidth = Math.floor(pixelRatio * width);
-  var displayHeight = Math.floor(pixelRatio * height);
-  var style = {
-    width,
-    height
-  };
-  var onMouseMove = mouseEvent => {
-    var mouseX = mouseEvent.nativeEvent.offsetX * pixelRatio;
-    var mouseY = mouseEvent.nativeEvent.offsetY * pixelRatio;
-    drawEvent({
-      mouseX,
-      mouseY
-    });
+  const displayWidth = Math.floor(pixelRatio * width);
+  const displayHeight = Math.floor(pixelRatio * height);
+  const style = { width, height };
+  const onMouseMove = (mouseEvent) => {
+    const mouseX = mouseEvent.nativeEvent.offsetX * pixelRatio;
+    const mouseY = mouseEvent.nativeEvent.offsetY * pixelRatio;
+    drawEvent({ mouseX, mouseY });
     if (currentHoverEvent.current) {
       if (currentHoverEvent.current.isNewEvent) {
-        var {
+        const {
           event: hoverEvent,
           startRect: hoverStartRect,
           eventHeight: hoverEventHeight,
           eventStartY: hoverEventStartY
         } = currentHoverEvent.current;
-        var {
-          midX
-        } = hoverStartRect;
+        const { midX } = hoverStartRect;
         updatePopoverKnobPosition({
           mouseX: midX,
           mouseY: hoverEventStartY + hoverEventHeight / 2
@@ -466,66 +370,47 @@ var CalendarCanvas = _ref2 => {
           isPopoverVisible,
           popoverContent,
           popoverPlacement,
-          popoverContentProps: _extends({}, hoverEvent, hoverEvent.popoverProps)
+          popoverContentProps: { ...hoverEvent, ...hoverEvent.popoverProps }
         });
-        currentHoverEvent.current = _extends({}, currentHoverEvent.current, {
+        currentHoverEvent.current = {
+          ...currentHoverEvent.current,
           isNewEvent: false
-        });
+        };
       }
     } else {
-      togglePopover({
-        visible: false,
-        rootPopoverRef,
-        isPopoverVisible
-      });
+      togglePopover({ visible: false, rootPopoverRef, isPopoverVisible });
     }
-    var isTodayLineHovered = handleTodayLine({
-      mouseX,
-      mouseY
-    });
+    const isTodayLineHovered = handleTodayLine({ mouseX, mouseY });
     if (isTodayLineHovered && !currentHoverEvent.current) {
       if (!isTooltipVisible.current) {
-        var currentDayObj = getTodayRectObj();
-        var {
-          midX: _midX
-        } = currentDayObj;
+        const currentDayObj = getTodayRectObj();
+        const { midX } = currentDayObj;
         updateToolTipKnobPosition({
-          mouseX: _midX,
+          mouseX: midX,
           mouseY: mouseY / pixelRatio
         });
         toggleTooltip(mouseEvent, isTooltipVisible, todayTooltipProps, rootTooltipRef);
       }
     } else {
-      toggleTooltip(undefined, isTooltipVisible, todayTooltipProps, rootTooltipRef);
+      toggleTooltip(void 0, isTooltipVisible, todayTooltipProps, rootTooltipRef);
     }
     toggleCursor(isTodayLineHovered || currentHoverEvent.current);
   };
-  return /*#__PURE__*/_jsxs("div", {
-    style: {
-      width: '100%',
-      height: '100%',
-      position: 'relative'
-    },
-    ref: canvasContainerRef,
-    children: [/*#__PURE__*/_jsx("canvas", {
-      "data-testid": "calendar-canvas",
-      ref: canvas,
-      style: style,
-      width: displayWidth,
-      height: displayHeight,
-      onMouseMove: onMouseMove
-    }), /*#__PURE__*/_jsx("div", {
-      style: {
-        position: 'absolute'
-      },
-      id: "event-calendar-tool-tip-knob"
-    }), /*#__PURE__*/_jsx("div", {
-      style: {
-        position: 'absolute'
-      },
-      id: "event-calendar-popover-knob"
-    })]
-  });
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", height: "100%", position: "relative" }, ref: canvasContainerRef, children: [
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        "data-testid": "calendar-canvas",
+        ref: canvas,
+        style,
+        width: displayWidth,
+        height: displayHeight,
+        onMouseMove
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { position: "absolute" }, id: "event-calendar-tool-tip-knob" }),
+    /* @__PURE__ */ jsx("div", { style: { position: "absolute" }, id: "event-calendar-popover-knob" })
+  ] });
 };
 CalendarCanvas.propTypes = {
   popoverContent: PropTypes.any,
@@ -547,10 +432,10 @@ CalendarCanvas.defaultProps = {
   textPadding: 12,
   eventStartYOffset: 40,
   minCanvasHeight: 0,
-  todayTooltipProps: {
-    title: 'Today'
-  },
-  canvasFont: "normal " + FONT_SIZE_S + " " + FONT_FAMILY,
-  popoverPlacement: 'leftTop'
+  todayTooltipProps: { title: "Today" },
+  canvasFont: `normal ${FONT_SIZE_S} ${FONT_FAMILY}`,
+  popoverPlacement: "leftTop"
+};
+export {
+  CalendarCanvas as default
 };
-export default CalendarCanvas;