willba-component-library 0.2.15 → 0.2.16

package/lib/index.js

@@ -544,7 +544,7 @@ function useTheme(_a) {
     return themePalette;
 }
 
-var css_248z$c = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n \n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n  /* Confines */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
+var css_248z$c = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n \n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-white-transparent: #ffffffcf;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n  /* Confines */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
 styleInject(css_248z$c);
 
 var useAwaitRender = function () {
@@ -2829,7 +2829,7 @@ instance.loadNamespaces;
 instance.loadLanguages;
 
 var calendar$1 = {
-	label: "Date",
+	label: "Dates",
 	roomsLabelPlaceholder: "Add check-in and check-out",
 	eventsLabelPlaceholder: "Add search dates",
 	startDate: "Start date",
@@ -2867,12 +2867,20 @@ var nights$1 = "nights";
 var checkIn$1 = "check-in";
 var checkOut$1 = "check-out";
 var search$1 = "Search";
+var apply$1 = "Apply";
+var clearDates$1 = "Clear dates";
+var noCheckIn$1 = "No check-in";
+var noCheckOut$1 = "No check-out";
 var enCommon = {
 	night: night$1,
 	nights: nights$1,
 	checkIn: checkIn$1,
 	checkOut: checkOut$1,
-	search: search$1
+	search: search$1,
+	apply: apply$1,
+	clearDates: clearDates$1,
+	noCheckIn: noCheckIn$1,
+	noCheckOut: noCheckOut$1
 };
 
 var calendar = {
@@ -2916,12 +2924,20 @@ var nights = "yötä";
 var checkIn = "check-in";
 var checkOut = "check-out";
 var search = "Hae";
+var apply = "Apply";
+var clearDates = "Clear dates";
+var noCheckIn = "No check-in";
+var noCheckOut = "No check-out";
 var fiCommon = {
 	night: night,
 	nights: nights,
 	checkIn: checkIn,
 	checkOut: checkOut,
-	search: search
+	search: search,
+	apply: apply,
+	clearDates: clearDates,
+	noCheckIn: noCheckIn,
+	noCheckOut: noCheckOut
 };
 
 var urlParams = typeof window !== 'undefined'
@@ -10790,85 +10806,190 @@ 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\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.my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\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\n.will-root .will-calendar-filter-container .will-calendar-tooltip {\n position: absolute;\n top: -42px;\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip > 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  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\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 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\n";
 styleInject(css_248z$8);
 
 var Calendar = React__default.forwardRef(function (_a, ref) {
     var _b;
-    var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, calendarOffset = _a.calendarOffset, selectedPath = _a.selectedPath, language = _a.language, calendarOffsetGroup = _a.calendarOffsetGroup, requestDates = _a.requestDates;
+    var selectedPath = _a.selectedPath, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, language = _a.language, disableCalendarDates = _a.disableCalendarDates, requestDates = _a.requestDates, disabledDates = _a.disabledDates, setDisabledDates = _a.setDisabledDates, updateCalendar = _a.updateCalendar, setUpdateCalendar = _a.setUpdateCalendar, loadingData = _a.loadingData;
     // Translations
-    var t = useTranslation('filterBar').t;
+    var t = useTranslation('common').t;
     var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
+    var today = startOfDay(new Date());
+    var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
     React__default.useEffect(function () {
         if (!calendarRange)
             setCalendarRange(undefined);
     }, []);
-    var today = startOfDay(new Date());
-    var daysToOffsetCalendar = calendarOffset && selectedPath
-        ? (_b = Object.entries(calendarOffset)) === null || _b === void 0 ? void 0 : _b.find(function (page) { return (selectedPath === null || selectedPath === void 0 ? void 0 : selectedPath.substring(1)) === page[0]; })
-        : null;
-    var disabledDays = [
-        {
-            from: addDays(today, !!(daysToOffsetCalendar === null || daysToOffsetCalendar === void 0 ? void 0 : daysToOffsetCalendar.length) ? daysToOffsetCalendar[1] : -2),
-            to: addDays(today, -100),
-        },
-    ];
-    var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
-    // Handle selected dates with disable dates and tooltip feedback
-    var _c = __read(React__default.useState(''), 2), openTooltip = _c[0], setOpenTooltip = _c[1];
-    var handleSelectedDates = function (range, e) {
-        var isNextDayDisabled = calendarOffsetGroup === null || calendarOffsetGroup === void 0 ? void 0 : calendarOffsetGroup.find(function (item) {
-            return isSameDay(item.from, addDays((range === null || range === void 0 ? void 0 : range.from) || 1, 1));
-        });
-        var rangeHasDisabledDay = calendarOffsetGroup === null || calendarOffsetGroup === void 0 ? void 0 : calendarOffsetGroup.find(function (date) {
-            return isAfter(date.from, (range === null || range === void 0 ? void 0 : range.from) || 1) &&
-                isBefore(date.from, (range === null || range === void 0 ? void 0 : range.to) || 1);
-        });
-        var handleTooltip = function (type) {
-            var calendarButton = e.currentTarget;
-            var calendarTooltip = document.querySelector('.will-calendar-tooltip');
-            if (calendarButton && calendarTooltip) {
-                if (type) {
-                    calendarButton.appendChild(calendarTooltip);
-                    calendarTooltip.style.display = 'block';
-                    calendarButton.style.overflow = 'visible';
-                    calendarButton.style.position = 'relative';
-                }
-                else {
-                    calendarTooltip.style.display = 'none';
-                }
-            }
-        };
-        if (isNextDayDisabled) {
-            setOpenTooltip('next');
-            handleTooltip('next');
-            setCalendarRange(undefined);
+    // Handle tooltip
+    React__default.useEffect(function () {
+        if (typeof document === 'undefined')
+            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);
+            });
         }
-        else if (rangeHasDisabledDay) {
-            setOpenTooltip('between');
-            handleTooltip('range');
-            setCalendarRange(undefined);
+        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
+    React__default.useEffect(function () {
+        if (typeof document === 'undefined')
+            return;
+        var loadingSpinner = document.querySelector('.will-filter-bar-calendar .will-calendar-spinner');
+        if (loadingData) {
+            if (loadingSpinner)
+                loadingSpinner.style.display = 'flex';
         }
         else {
-            setCalendarRange(range);
-            setOpenTooltip('');
-            handleTooltip('');
+            if (loadingSpinner)
+                loadingSpinner.style.display = 'none';
         }
-    };
+    }, [loadingData]);
+    // Handle disable dates by page
+    var disabledDatesByPage = handleDisabledDatesByPage({
+        today: today,
+        selectedPath: selectedPath,
+        disableCalendarDates: disableCalendarDates,
+    });
     return (React__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
         React__default.createElement("div", { className: "will-calendar-filter-container" },
             React__default.createElement(DayPicker, { id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range, days, activeModifiers, e) {
-                    return handleSelectedDates(range, e);
+                    return handleSelectedCheckIn({
+                        range: range,
+                        e: e,
+                        disableCalendarDates: disableCalendarDates,
+                        setCalendarRange: setCalendarRange,
+                        setDisabledDates: setDisabledDates,
+                        calendarRange: calendarRange,
+                    });
                 }, modifiersClassNames: {
                     today: 'my-today',
-                }, modifiersStyles: {
-                    disabled: { opacity: '0.2' },
-                }, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate || disabledDays[0].from, disabled: calendarOffsetGroup || disabledDays, fromMonth: today, onMonthChange: function (val) { return (requestDates ? requestDates(val) : null); } }),
+                    booked: 'booked',
+                    disabledAfterCheckIn: 'disabled-after-check-in',
+                }, 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
+                        : today), disabled: disabledDatesByPage.length
+                    ? disabledDatesByPage
+                    : (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
+                        ? disabledDates
+                        : (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDates) || [], fromMonth: today, onMonthChange: function (val) {
+                    requestDates && setUpdateCalendar
+                        ? (requestDates(val), setUpdateCalendar(function (prev) { return !prev; }))
+                        : null;
+                }, modifiers: {
+                    booked: disabledDatesByPage.length
+                        ? disabledDatesByPage
+                        : (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
+                            ? disabledDates
+                            : (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDates) || [],
+                    disabledAfterCheckIn: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
+                        ? [{ after: calendarRange.from }]
+                        : [],
+                } }),
             React__default.createElement("div", { className: 'will-calendar-tooltip' },
-                React__default.createElement("div", null, openTooltip === 'next'
-                    ? t('calendar.checkoutOnly')
-                    : t('calendar.hasDisableDates'))))));
+                React__default.createElement("div", null, t('noCheckIn'))),
+            React__default.createElement("div", { className: 'will-calendar-tooltip-check-out' },
+                React__default.createElement("div", null, t('noCheckOut'))),
+            React__default.createElement("div", { className: 'will-calendar-spinner' }, "Loading..."))));
 });
+/////////
+var handleSelectedCheckIn = function (_a) {
+    var _b;
+    var range = _a.range; _a.e; var disableCalendarDates = _a.disableCalendarDates, setCalendarRange = _a.setCalendarRange, setDisabledDates = _a.setDisabledDates, calendarRange = _a.calendarRange;
+    // 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;
+    var rangeTo = (range === null || range === void 0 ? void 0 : range.to) ? format(range.to, dateFormat) : null;
+    var calendarFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
+        ? format(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from, dateFormat)
+        : null;
+    var calendarTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to)
+        ? format(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to, 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) ===
+                format((range === null || range === void 0 ? void 0 : range.from) || 1, dateFormat);
+        })
+        : null;
+    if (rangeFrom &&
+        rangeFrom !== calendarTo &&
+        checkOutRange &&
+        setDisabledDates) {
+        var checkIn = addDays(checkOutRange.checkIn, 1);
+        var firstCheckOut = addDays(checkOutRange.firstCheckOut, -1);
+        var noDatesRange = format(checkIn, dateFormat) ===
+            format(checkOutRange.firstCheckOut, dateFormat);
+        setDisabledDates(__spreadArray$1(__spreadArray$1([], __read(((disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDates) || [])), false), [
+            {
+                from: noDatesRange ? undefined : checkIn,
+                to: noDatesRange ? undefined : firstCheckOut,
+            },
+            { after: checkOutRange === null || checkOutRange === void 0 ? void 0 : checkOutRange.lastCheckOut },
+        ], false));
+    }
+    if (rangeFrom && rangeFrom === calendarTo) {
+        return;
+    }
+    else if ((rangeTo && rangeFrom && rangeFrom === rangeTo) ||
+        (!rangeTo && !rangeFrom)) {
+        setCalendarRange(undefined);
+        setDisabledDates && setDisabledDates([]);
+    }
+    else if (calendarFrom && rangeFrom && rangeFrom !== calendarFrom) {
+        setCalendarRange({
+            from: range === null || range === void 0 ? void 0 : range.from,
+            to: undefined,
+        });
+    }
+    else {
+        setCalendarRange(range);
+    }
+};
+var handleDisabledDatesByPage = function (_a) {
+    var _b, _c, _d;
+    var disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, today = _a.today;
+    var daysToOffsetCalendar = (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDatesByPage) && selectedPath
+        ? [
+            (_b = disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDatesByPage) === null || _b === void 0 ? void 0 : _b.find(function (item) { return selectedPath === item.page; }),
+        ]
+        : [];
+    return daysToOffsetCalendar.length
+        ? [
+            {
+                from: addDays(today, daysToOffsetCalendar.length && ((_c = daysToOffsetCalendar[0]) === null || _c === void 0 ? void 0 : _c.offset)
+                    ? (_d = daysToOffsetCalendar[0]) === null || _d === void 0 ? void 0 : _d.offset
+                    : -2),
+                to: addDays(today, -100),
+            },
+        ]
+        : [];
+};
 
 var parseDates = function (_a) {
     var calendarRange = _a.calendarRange;
@@ -11185,7 +11306,7 @@ var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-wi
 styleInject(css_248z$1);
 
 function FilterBar(_a) {
-    var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, calendarOffset = _a.calendarOffset, mode = _a.mode, tabs = _a.tabs;
+    var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs;
     var themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
@@ -11232,7 +11353,7 @@ function FilterBar(_a) {
             React__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default.createElement(FaSearch, null), label: t('common:search') })),
         selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
             React__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
-            selectedFilter === FilterSections.CALENDAR && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef, calendarOffset: calendarOffset, selectedPath: selectedPath, language: language })),
+            selectedFilter === FilterSections.CALENDAR && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language })),
             selectedFilter === FilterSections.GUESTS && (React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef })),
             selectedFilter === FilterSections.CATEGORIES && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
 }
@@ -11256,18 +11377,41 @@ var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
 var useFilterCalendar = function (_a) {
     var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar;
     var _b = __read(React__default.useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
+    var _c = __read(React__default.useState([]), 2), disabledDates = _c[0], setDisabledDates = _c[1];
+    var _d = __read(React__default.useState(false), 2), updateCalendar = _d[0], setUpdateCalendar = _d[1];
+    React__default.useEffect(function () {
+        if (typeof window === 'undefined')
+            return;
+        var urlSearchParams = new URLSearchParams(window.location.search);
+        var startDateParam = urlSearchParams.get('startDate');
+        var endDateParam = urlSearchParams.get('endDate');
+        if (startDateParam && endDateParam) {
+            setCalendarRange({
+                from: new Date(startDateParam),
+                to: new Date(endDateParam),
+            });
+        }
+    }, []);
+    React__default.useEffect(function () {
+        onSubmit(calendarRange);
+    }, []);
     var handleSubmit = function () {
         setToggleCalendar(false);
         return onSubmit(calendarRange);
     };
     var handleClearDates = function () {
+        setDisabledDates([]);
         setCalendarRange(undefined);
     };
     return {
         handleSubmit: handleSubmit,
         handleClearDates: handleClearDates,
         setCalendarRange: setCalendarRange,
+        setDisabledDates: setDisabledDates,
+        setUpdateCalendar: setUpdateCalendar,
         calendarRange: calendarRange,
+        disabledDates: disabledDates,
+        updateCalendar: updateCalendar,
     };
 };
 
@@ -11275,12 +11419,12 @@ var css_248z = ".will-root .will-calendar-wrapper {\n    box-shadow: var(--will-
 styleInject(css_248z);
 
 function FilterCalendar(_a) {
-    var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, calendarOffsetGroup = _a.calendarOffsetGroup, toggleCalendar = _a.toggleCalendar, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates;
+    var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, disableCalendarDates = _a.disableCalendarDates, toggleCalendar = _a.toggleCalendar, loadingData = _a.loadingData, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates;
     var themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
     var t = useTranslation().t;
-    var _b = useFilterCalendar({ onSubmit: onSubmit, setToggleCalendar: setToggleCalendar }), handleSubmit = _b.handleSubmit, setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange;
+    var _b = useFilterCalendar({ onSubmit: onSubmit, setToggleCalendar: setToggleCalendar }), handleSubmit = _b.handleSubmit, setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, setDisabledDates = _b.setDisabledDates, updateCalendar = _b.updateCalendar, setUpdateCalendar = _b.setUpdateCalendar;
     // Display component after fully loaded
     useAwaitRender();
     // Handle close filter section
@@ -11293,7 +11437,7 @@ function FilterCalendar(_a) {
             React__default.createElement("h2", null, t('filterBar:calendar.title')),
             React__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
         React__default.createElement("div", { className: "will-calendar-main" },
-            React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, calendarOffsetGroup: calendarOffsetGroup, requestDates: requestDates })),
+            React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, setDisabledDates: setDisabledDates, updateCalendar: updateCalendar, setUpdateCalendar: setUpdateCalendar, loadingData: loadingData })),
         React__default.createElement("div", { className: "will-calendar-footer" },
             React__default.createElement("div", { className: "will-calendar-footer-dates" },
                 React__default.createElement("div", null,
@@ -11308,8 +11452,8 @@ function FilterCalendar(_a) {
                     }) || t('common:checkOut'))),
                 !!nights && (React__default.createElement("span", null, "".concat(nights, " ").concat(t("common:".concat(nights > 1 ? 'nights' : 'night')))))),
             React__default.createElement("div", { className: "will-calendar-footer-actions" },
-                React__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: 'Clear dates' }),
-                React__default.createElement(SubmitButton, { onClick: handleSubmit, label: t("common:search") })))))));
+                React__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates") }),
+                React__default.createElement(SubmitButton, { onClick: handleSubmit, label: t("common:apply"), disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) || !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) })))))));
 }
 
 exports.Button = Button$1;