willba-component-library 0.2.23 → 0.2.25

package/lib/index.esm.js

@@ -1,5 +1,5 @@
 import * as React__default from 'react';
-import React__default__default, { useState, createContext, useContext, useRef, useEffect, forwardRef } from 'react';
+import React__default__default, { useState, createContext, useContext, useRef, useEffect, forwardRef, useMemo } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2851,6 +2851,7 @@ var apply$1 = "Apply";
 var clearDates$1 = "Clear dates";
 var noCheckIn$1 = "Room not available";
 var noCheckOut$1 = "Check-out not available";
+var checkOutOnly$1 = "Check-out only";
 var enCommon = {
 	night: night$1,
 	nights: nights$1,
@@ -2860,7 +2861,8 @@ var enCommon = {
 	apply: apply$1,
 	clearDates: clearDates$1,
 	noCheckIn: noCheckIn$1,
-	noCheckOut: noCheckOut$1
+	noCheckOut: noCheckOut$1,
+	checkOutOnly: checkOutOnly$1
 };
 
 var calendar = {
@@ -2908,6 +2910,7 @@ var apply = "Aseta";
 var clearDates = "Tyhjennä";
 var noCheckIn = "Huone ei saatavilla";
 var noCheckOut = "Uloskirjaus ei saatavilla";
+var checkOutOnly = "Vain uloskirjaus";
 var fiCommon = {
 	night: night,
 	nights: nights,
@@ -2917,7 +2920,8 @@ var fiCommon = {
 	apply: apply,
 	clearDates: clearDates,
 	noCheckIn: noCheckIn,
-	noCheckOut: noCheckOut
+	noCheckOut: noCheckOut,
+	checkOutOnly: checkOutOnly
 };
 
 var urlParams = typeof window !== 'undefined'
@@ -10786,7 +10790,7 @@ var reactResponsiveExports = reactResponsive.exports;
 var css_248z$9 = ".rdp {\n  --rdp-cell-size: 40px;\n  --rdp-caption-font-size: 18px;\n  --rdp-accent-color: #0000ff;\n  --rdp-background-color: #e7edff;\n  --rdp-accent-color-dark: #3003e1;\n  --rdp-background-color-dark: #180270;\n  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n  margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  position: absolute !important;\n  top: 0;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n  appearance: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  cursor: default;\n  color: inherit;\n  background: none;\n  font: inherit;\n\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n  /* Make sure to reset outline only when :focus-visible is supported */\n  outline: none;\n}\n\n.rdp-button {\n  border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n  opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n  cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n  color: inherit;\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n  background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n  display: flex;\n}\n\n.rdp-month {\n  margin: 0 1em;\n}\n\n.rdp-month:first-child {\n  margin-left: 0;\n}\n\n.rdp-month:last-child {\n  margin-right: 0;\n}\n\n.rdp-table {\n  margin: 0;\n  max-width: calc(var(--rdp-cell-size) * 7);\n  border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n  max-width: calc(var(--rdp-cell-size) * 8);\n  border-collapse: collapse;\n}\n\n.rdp-caption {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n  position: relative;\n  display: block;\n  text-align: center;\n}\n\n.rdp-caption_dropdowns {\n  position: relative;\n  display: inline-flex;\n}\n\n.rdp-caption_label {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  padding: 0 0.25em;\n  white-space: nowrap;\n  color: currentColor;\n  border: 0;\n  border: 2px solid transparent;\n  font-family: inherit;\n  font-size: var(--rdp-caption-font-size);\n  font-weight: bold;\n}\n\n.rdp-nav {\n  white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  padding: 0.25em;\n  border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns  */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown {\n  appearance: none;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  opacity: 0;\n  border: none;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n  opacity: unset;\n  color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n  border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n  margin: 0 0 0 5px;\n}\n\n.rdp-head {\n  border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n  height: 100%;\n}\n\n.rdp-head_cell {\n  vertical-align: middle;\n  font-size: 0.75em;\n  font-weight: 700;\n  text-align: center;\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-transform: uppercase;\n}\n\n.rdp-tbody {\n  border: 0;\n}\n\n.rdp-tfoot {\n  margin: 0.5em;\n}\n\n.rdp-cell {\n  width: var(--rdp-cell-size);\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-align: center;\n}\n\n.rdp-weeknumber {\n  font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--rdp-cell-size);\n  max-width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  margin: 0;\n  border: 2px solid transparent;\n  border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n  font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n  color: white;\n  opacity: 1;\n  background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n  opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n  /* Since the background is the same use again the outline */\n  outline: var(--rdp-outline);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n  border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n  border-radius: 0;\n}";
 styleInject(css_248z$9);
 
-var css_248z$8 = ".will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n  font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked  {\n  font-weight: 400;\n  cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n  opacity: 0.5;\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_start {\n    padding-left: 10px;\n  }\n  \n  .will-calendar-filter-container .rdp-month.rdp-caption_end {\n    padding-right: 10px;\n  }\n}\n\n/* Tooltip */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out> div {\n  background-color: white;\n  position: relative;\n  padding: 5px 10px;\n  border: 1px solid var(--will-primary);\n  border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  border: 1px solid var(--will-primary);\n  position: absolute;\n  bottom: -4px;\n  left:calc(50% - 5.555px);\n  rotate: 45deg;\n  z-index: 0;\n  background-color: var(--will-white);\n}\n\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out {\n  display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n  position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n  position: absolute;\n  top:0;\n  bottom:0;\n  left: 0;\n  right: 0;\n  background-color: var(--will-white-transparent);\n  z-index: 3;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .no-active-selection {\n  background-color: lightgrey;\n}\n\n\n";
+var css_248z$8 = ".will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n  font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked  {\n  font-weight: 400;\n  cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n  opacity: 0.5;\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_start {\n    padding-left: 10px;\n  }\n  \n  .will-calendar-filter-container .rdp-month.rdp-caption_end {\n    padding-right: 10px;\n  }\n}\n\n/* Tooltip */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date > div {\n  background-color: white;\n  position: relative;\n  padding: 5px 10px;\n  border: 1px solid var(--will-primary);\n  border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  border: 1px solid var(--will-primary);\n  position: absolute;\n  bottom: -4px;\n  left:calc(50% - 5.555px);\n  rotate: 45deg;\n  z-index: 0;\n  background-color: var(--will-white);\n}\n\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-overlapping-date {\n  display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n  position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n  position: absolute;\n  top:0;\n  bottom:0;\n  left: 0;\n  right: 0;\n  background-color: var(--will-white-transparent);\n  z-index: 3;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_start.no-active-selection,\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.no-active-selection,\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_end.no-active-selection {\n  background-color: var(--will-grey);\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n  user-select: none;\n  pointer-events: none;\n  \n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n  cursor: not-allowed;\n}\n\n\n";
 styleInject(css_248z$8);
 
 var Calendar = forwardRef(function (_a, ref) {
@@ -10797,54 +10801,6 @@ var Calendar = forwardRef(function (_a, ref) {
     var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
     var today = startOfDay(new Date());
     var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
-    useEffect(function () {
-        if (!calendarRange) {
-            setCalendarRange(undefined);
-        }
-        else if (calendarRange.from && calendarRange.to) {
-            handleSelectedCheckIn({
-                range: calendarRange,
-                disableCalendarDates: disableCalendarDates,
-                setCalendarRange: setCalendarRange,
-                setDisabledDates: setDisabledDates,
-                calendarRange: calendarRange,
-            });
-        }
-    }, [disableCalendarDates, calendarRange]);
-    // Handle tooltip
-    useEffect(function () {
-        if (typeof document === 'undefined' || !showFeedback)
-            return;
-        var calendarTooltip = document.querySelector('.will-calendar-tooltip');
-        var calendarTooltipCheckOut = document.querySelector('.will-calendar-tooltip-check-out');
-        var loadingSpinner = document.querySelector('.will-filter-bar-calendar .will-calendar-spinner');
-        var calendarButtons = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))');
-        var calendarButtonsCheckOut = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked.disabled-after-check-in)');
-        var calendarMonthContainer = document.querySelector('.will-filter-bar-calendar .rdp-months');
-        var tooltipClones = [];
-        var tooltipClonesCheckOut = [];
-        if (calendarTooltip && calendarButtons.length > 0) {
-            calendarButtons.forEach(function (element) {
-                var tooltipClone = calendarTooltip.cloneNode(true);
-                element.appendChild(tooltipClone);
-                tooltipClones.push(tooltipClone);
-            });
-        }
-        if (calendarTooltipCheckOut && calendarButtonsCheckOut.length > 0) {
-            calendarButtonsCheckOut.forEach(function (element) {
-                var tooltipClone = calendarTooltipCheckOut.cloneNode(true);
-                element.appendChild(tooltipClone);
-                tooltipClonesCheckOut.push(tooltipClone);
-            });
-        }
-        if (loadingSpinner && calendarMonthContainer) {
-            calendarMonthContainer.appendChild(loadingSpinner);
-        }
-        return function () {
-            tooltipClones.forEach(function (clone) { return clone.remove(); });
-            tooltipClonesCheckOut.forEach(function (clone) { return clone.remove(); });
-        };
-    }, [calendarRange, updateCalendar]);
     // Handle loading spinner
     useEffect(function () {
         if (typeof document === 'undefined')
@@ -10860,9 +10816,10 @@ var Calendar = forwardRef(function (_a, ref) {
         }
     }, [loadingData]);
     // Handle overlapping availableDates.lastCheckOut and disabledDates.start
-    useEffect(function () {
+    var _c = __read(useState(undefined), 2), overlappingDate = _c[0], setOverlappingDate = _c[1];
+    useMemo(function () {
         var _a, _b;
-        if (disableCalendarDates) {
+        if (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) {
             var dateFormat_1 = 'dd-MM-yyyy';
             var availableDateMap_1 = new Map();
             (_a = disableCalendarDates.availableDates) === null || _a === void 0 ? void 0 : _a.forEach(function (available) {
@@ -10871,6 +10828,7 @@ var Calendar = forwardRef(function (_a, ref) {
             var updatedDisabledDates = (_b = disableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.map(function (dateRange) {
                 var formattedFromDate = format(dateRange.from, dateFormat_1);
                 if (availableDateMap_1.has(formattedFromDate)) {
+                    setOverlappingDate(dateRange);
                     return __assign$2(__assign$2({}, dateRange), { from: addDays(dateRange.from, 1) });
                 }
                 return dateRange;
@@ -10884,6 +10842,55 @@ var Calendar = forwardRef(function (_a, ref) {
         selectedPath: selectedPath,
         disableCalendarDates: disableCalendarDates,
     });
+    // Handle tooltip
+    useEffect(function () {
+        if (typeof document === 'undefined' || !showFeedback)
+            return;
+        var calendarTooltip = document.querySelector('.will-calendar-tooltip');
+        var calendarTooltipCheckOut = document.querySelector('.will-calendar-tooltip-check-out');
+        var calendarTooltipOverlappingDate = document.querySelector('.will-calendar-tooltip-overlapping-date');
+        var loadingSpinner = document.querySelector('.will-filter-bar-calendar .will-calendar-spinner');
+        var calendarButtons = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))');
+        var calendarButtonsCheckOut = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked.disabled-after-check-in)');
+        var calendarMonthContainer = document.querySelector('.will-filter-bar-calendar .rdp-months');
+        var calendarOverlappingDate = document.querySelector('.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)');
+        var appendedOverlappingDateTooltip = document.querySelector('.will-filter-bar-calendar .rdp-cell .will-calendar-tooltip-overlapping-date');
+        var tooltipClones = [];
+        var tooltipClonesCheckOut = [];
+        if (calendarTooltip && calendarButtons.length > 0) {
+            calendarButtons.forEach(function (element) {
+                var tooltipClone = calendarTooltip.cloneNode(true);
+                element.appendChild(tooltipClone);
+                tooltipClones.push(tooltipClone);
+            });
+        }
+        if (calendarTooltipCheckOut && calendarButtonsCheckOut.length > 0) {
+            calendarButtonsCheckOut.forEach(function (element) {
+                var tooltipClone = calendarTooltipCheckOut.cloneNode(true);
+                element.appendChild(tooltipClone);
+                tooltipClonesCheckOut.push(tooltipClone);
+            });
+        }
+        if (loadingSpinner && calendarMonthContainer) {
+            calendarMonthContainer.appendChild(loadingSpinner);
+        }
+        if (calendarOverlappingDate &&
+            calendarTooltipOverlappingDate &&
+            !appendedOverlappingDateTooltip &&
+            !calendarRange) {
+            calendarOverlappingDate.appendChild(calendarTooltipOverlappingDate);
+        }
+        else if (calendarRange && appendedOverlappingDateTooltip) {
+            appendedOverlappingDateTooltip.style.visibility = 'hidden';
+        }
+        else if (!calendarRange && appendedOverlappingDateTooltip) {
+            appendedOverlappingDateTooltip.style.visibility = 'visible';
+        }
+        return function () {
+            tooltipClones.forEach(function (clone) { return clone.remove(); });
+            tooltipClonesCheckOut.forEach(function (clone) { return clone.remove(); });
+        };
+    }, [calendarRange, updateCalendar, overlappingDate]);
     return (React__default__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
         React__default__default.createElement("div", { className: "will-calendar-filter-container" },
             React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) {
@@ -10893,12 +10900,8 @@ var Calendar = forwardRef(function (_a, ref) {
                         setCalendarRange: setCalendarRange,
                         setDisabledDates: setDisabledDates,
                         calendarRange: calendarRange,
+                        overlappingDate: overlappingDate,
                     });
-                }, modifiersClassNames: {
-                    today: 'my-today',
-                    booked: 'booked',
-                    disabledAfterCheckIn: 'disabled-after-check-in',
-                    noActiveSelection: 'no-active-selection',
                 }, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate ||
                     (((_b = disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
                         ? disableCalendarDates.disabledDates[0].from
@@ -10910,6 +10913,14 @@ var Calendar = forwardRef(function (_a, ref) {
                     requestDates && setUpdateCalendar
                         ? (requestDates(val), setUpdateCalendar(function (prev) { return !prev; }))
                         : null;
+                }, modifiersClassNames: {
+                    today: 'my-today',
+                    booked: 'booked',
+                    disabledAfterCheckIn: 'disabled-after-check-in',
+                    overlappingDate: 'overlapping-date',
+                    noActiveSelectionStart: 'rdp-day_selected rdp-day_range_start no-active-selection ',
+                    noActiveSelectionMid: 'rdp-day_selected rdp-day_range_middle no-active-selection',
+                    noActiveSelectionEnd: 'rdp-day_selected rdp-day_range_end no-active-selection',
                 }, modifiers: {
                     booked: disabledDatesByPage.length
                         ? disabledDatesByPage
@@ -10919,20 +10930,36 @@ var Calendar = forwardRef(function (_a, ref) {
                     disabledAfterCheckIn: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
                         ? [{ after: calendarRange.from }]
                         : [],
-                    noActiveSelection: !calendarRange
-                        ? initialCalendarRange || []
+                    noActiveSelectionStart: !calendarRange
+                        ? (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from) || []
+                        : [],
+                    noActiveSelectionMid: !calendarRange &&
+                        (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from) &&
+                        (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to)
+                        ? [
+                            {
+                                after: initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from,
+                                before: initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to,
+                            },
+                        ]
                         : [],
+                    noActiveSelectionEnd: !calendarRange
+                        ? (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to) || []
+                        : [],
+                    overlappingDate: (!(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && (overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.from)) || [],
                 } }),
             React__default__default.createElement("div", { className: 'will-calendar-tooltip' },
                 React__default__default.createElement("div", null, t('noCheckIn'))),
             React__default__default.createElement("div", { className: 'will-calendar-tooltip-check-out' },
                 React__default__default.createElement("div", null, t('noCheckOut'))),
+            React__default__default.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
+                React__default__default.createElement("div", null, t('checkOutOnly'))),
             React__default__default.createElement("div", { className: 'will-calendar-spinner' }, "Loading..."))));
 });
 /////////
 var handleSelectedCheckIn = function (_a) {
     var _b;
-    var range = _a.range, disableCalendarDates = _a.disableCalendarDates, setCalendarRange = _a.setCalendarRange, setDisabledDates = _a.setDisabledDates, calendarRange = _a.calendarRange;
+    var range = _a.range, disableCalendarDates = _a.disableCalendarDates, setCalendarRange = _a.setCalendarRange, setDisabledDates = _a.setDisabledDates, calendarRange = _a.calendarRange, overlappingDate = _a.overlappingDate;
     // Calendar dates select logic
     var dateFormat = 'dd-MM-yyyy';
     var rangeFrom = (range === null || range === void 0 ? void 0 : range.from) ? format(range.from, dateFormat) : null;
@@ -10943,6 +10970,9 @@ var handleSelectedCheckIn = function (_a) {
     (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to)
         ? format(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to, dateFormat)
         : null;
+    var overlappingDateFrom = (overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.from)
+        ? format(overlappingDate.from, dateFormat)
+        : null;
     var checkOutRange = ((_b = disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) === null || _b === void 0 ? void 0 : _b.length)
         ? disableCalendarDates.availableDates.find(function (checkInDate) {
             return format(checkInDate.checkIn || 1, dateFormat) ===
@@ -10954,18 +10984,6 @@ var handleSelectedCheckIn = function (_a) {
         var firstCheckOut = addDays(checkOutRange.firstCheckOut, -1);
         var noDatesRange = format(checkIn, dateFormat) ===
             format(checkOutRange.firstCheckOut, dateFormat);
-        // Handle overlapping availableDates.lastCheckOut and disabledDates.start
-        // const filteredDisabledCalendarDates =
-        //   disableCalendarDates?.disabledDates?.map((dateRange) => {
-        //     if (
-        //       dateRange.from &&
-        //       format(dateRange.from, dateFormat) ===
-        //         format(checkOutRange.lastCheckOut, dateFormat)
-        //     ) {
-        //       return { ...dateRange, from: addDays(checkOutRange.lastCheckOut, 1) }
-        //     }
-        //     return dateRange
-        //   })
         setDisabledDates(__spreadArray$1(__spreadArray$1([], __read(((disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDates) || [])), false), [
             {
                 from: noDatesRange ? undefined : checkIn,
@@ -10975,7 +10993,8 @@ var handleSelectedCheckIn = function (_a) {
         ], false));
     }
     if ((rangeTo && rangeFrom && rangeFrom === rangeTo) ||
-        (!rangeTo && !rangeFrom)) {
+        (!rangeTo && !rangeFrom) ||
+        rangeFrom === overlappingDateFrom) {
         setCalendarRange(undefined);
         setDisabledDates && setDisabledDates([]);
     }
@@ -11008,31 +11027,6 @@ var handleDisabledDatesByPage = function (_a) {
         ]
         : [];
 };
-// const handleOverlappingDates = ({
-//   disableCalendarDates,
-// }: {
-//   disableCalendarDates?: DisableCalendarDates
-// }): DisableCalendarDates | undefined => {
-//   if (!disableCalendarDates) return undefined
-//   const dateFormat = 'dd-MM-yyyy'
-//   disableCalendarDates.disabledDates = disableCalendarDates.disabledDates?.map(
-//     (dateRange) => {
-//       const overlappingDate = disableCalendarDates.availableDates?.find(
-//         (available) =>
-//           format(available.lastCheckOut, dateFormat) ===
-//           format(dateRange.from, dateFormat)
-//       )
-//       if (overlappingDate) {
-//         return {
-//           ...dateRange,
-//           from: addDays(dateRange.from, 1),
-//         }
-//       }
-//       return dateRange
-//     }
-//   )
-//   return disableCalendarDates
-// }
 
 var parseDates = function (_a) {
     var calendarRange = _a.calendarRange;