willba-component-library 0.2.28 → 0.2.30

package/lib/assets/SpinnerSvg.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const SpinnerSVG: ({ fill, size, }: {
+    fill?: string | undefined;
+    size?: number | undefined;
+}) => React.JSX.Element;

package/lib/core/components/calendar/CalendarTypes.d.ts

@@ -1,4 +1,5 @@
 import { DateRange, Matcher } from 'react-day-picker';
+import { Palette } from 'src/themes/useTheme';
 export type CalendarOffset = {
     [key: string]: number;
 };
@@ -33,4 +34,5 @@ export type CalendarTypes = {
     initialCalendarRange?: DateRange | undefined;
     showFeedback?: boolean;
     noActiveSelection?: boolean;
+    palette?: Palette;
 };

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DateRange, Matcher } from 'react-day-picker';
+import { Palette as Palette$1 } from 'src/themes/useTheme';
 
 interface ButtonProps {
     /**
@@ -62,6 +63,7 @@ type CalendarTypes = {
     initialCalendarRange?: DateRange | undefined;
     showFeedback?: boolean;
     noActiveSelection?: boolean;
+    palette?: Palette$1;
 };
 
 type Palette = {

package/lib/index.esm.js

@@ -10787,6 +10787,14 @@ var reactResponsive = {exports: {}};
 
 var reactResponsiveExports = reactResponsive.exports;
 
+var SpinnerSVG = function (_a) {
+    var fill = _a.fill, size = _a.size;
+    return (React__default__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
+        React__default__default.createElement("style", null, "\n  .spinner_z9k8 {\n  transform-origin: center;\n  animation: spinner_StKS .75s infinite linear;\n  }\n  @keyframes spinner_StKS {\n  100% {\n  transform: rotate(360deg);\n  }\n  }\n  "),
+        React__default__default.createElement("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }),
+        React__default__default.createElement("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })));
+};
+
 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);
 
@@ -10795,7 +10803,7 @@ styleInject(css_248z$8);
 
 var Calendar = forwardRef(function (_a, ref) {
     var _b;
-    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; _a.updateCalendar; var setUpdateCalendar = _a.setUpdateCalendar, loadingData = _a.loadingData, initialCalendarRange = _a.initialCalendarRange, showFeedback = _a.showFeedback;
+    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, initialCalendarRange = _a.initialCalendarRange, showFeedback = _a.showFeedback, palette = _a.palette;
     // Translations
     var t = useTranslation('common').t;
     var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
@@ -10846,17 +10854,19 @@ var Calendar = forwardRef(function (_a, ref) {
     useEffect(function () {
         if (typeof document === 'undefined' || !showFeedback)
             return;
+        // Children
         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');
+        // Parents
         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 calendarOverlappingDate = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)');
         var tooltipClones = [];
         var tooltipClonesCheckOut = [];
+        var tooltipClonesOverlappingDates = [];
         if (calendarTooltip && calendarButtons.length > 0) {
             calendarButtons.forEach(function (element) {
                 var tooltipClone = calendarTooltip.cloneNode(true);
@@ -10874,23 +10884,20 @@ var Calendar = forwardRef(function (_a, ref) {
         if (loadingSpinner && calendarMonthContainer) {
             calendarMonthContainer.appendChild(loadingSpinner);
         }
-        if (calendarOverlappingDate &&
-            calendarTooltipOverlappingDate &&
-            !appendedOverlappingDateTooltip &&
-            !calendarRange) {
-            calendarOverlappingDate.appendChild(calendarTooltipOverlappingDate);
-        }
-        else if (calendarRange && appendedOverlappingDateTooltip) {
-            appendedOverlappingDateTooltip.style.display = 'none';
-        }
-        else if (!calendarRange && appendedOverlappingDateTooltip) {
-            appendedOverlappingDateTooltip.style.display = 'block';
+        if (calendarTooltipOverlappingDate &&
+            calendarOverlappingDate.length > 0) {
+            calendarOverlappingDate.forEach(function (element) {
+                var tooltipClone = calendarTooltipOverlappingDate.cloneNode(true);
+                element.appendChild(tooltipClone);
+                tooltipClonesOverlappingDates.push(tooltipClone);
+            });
         }
         return function () {
             tooltipClones.forEach(function (clone) { return clone.remove(); });
             tooltipClonesCheckOut.forEach(function (clone) { return clone.remove(); });
+            tooltipClonesOverlappingDates.forEach(function (clone) { return clone.remove(); });
         };
-    }, [calendarRange, overlappingDate]);
+    }, [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) {
@@ -10902,7 +10909,8 @@ var Calendar = forwardRef(function (_a, ref) {
                         calendarRange: calendarRange,
                         overlappingDate: overlappingDate,
                     });
-                }, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate ||
+                }, captionLayout: "dropdown-buttons", defaultMonth: (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from) ||
+                    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
@@ -10954,7 +10962,8 @@ var Calendar = forwardRef(function (_a, ref) {
                 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..."))));
+            React__default__default.createElement("div", { className: 'will-calendar-spinner' },
+                React__default__default.createElement(SpinnerSVG, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50 })))));
 });
 /////////
 var handleSelectedCheckIn = function (_a) {
@@ -11490,7 +11499,7 @@ function FilterCalendar(_a) {
             React__default__default.createElement("h2", null, t('filterBar:calendar.title')),
             React__default__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
         React__default__default.createElement("div", { className: "will-calendar-main" },
-            React__default__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, initialCalendarRange: initialCalendarRange, showFeedback: showFeedback, noActiveSelection: noActiveSelection })),
+            React__default__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, initialCalendarRange: initialCalendarRange, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette })),
         React__default__default.createElement("div", { className: "will-calendar-footer" },
             React__default__default.createElement("div", { className: "will-calendar-footer-dates" },
                 React__default__default.createElement("div", null,