willba-component-library 0.2.32 → 0.2.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "description": "A custom UI component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/core/components/calendar/Calendar.tsx

@@ -54,7 +54,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
 
     // Handle overlapping availableDates.lastCheckOut and disabledDates.start
     const [overlappingDate, setOverlappingDate] = useState<
-      DateRange | undefined
+      DateRange[] | undefined
     >(undefined)
 
     useMemo(() => {
@@ -73,7 +73,11 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
           (dateRange) => {
             const formattedFromDate = format(dateRange.from, dateFormat)
             if (availableDateMap.has(formattedFromDate)) {
-              setOverlappingDate(dateRange)
+              if (!overlappingDate) {
+                setOverlappingDate([dateRange])
+              } else {
+                setOverlappingDate([...overlappingDate, dateRange])
+              }
 
               return {
                 ...dateRange,
@@ -127,8 +131,9 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
         '.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)'
       )
 
-      const tooltipClones: Element[] = []
+      const tooltipClonesCheckIn: Element[] = []
       const tooltipClonesCheckOut: Element[] = []
+      const tooltipClonesSpinner: Element[] = []
       const tooltipClonesOverlappingDates: Element[] = []
 
       if (calendarTooltip && calendarButtons.length > 0) {
@@ -137,7 +142,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
             true
           ) as Element
           element.appendChild(tooltipClone)
-          tooltipClones.push(tooltipClone)
+          tooltipClonesCheckIn.push(tooltipClone)
         })
       }
 
@@ -152,7 +157,9 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       }
 
       if (loadingSpinner && calendarMonthContainer) {
-        calendarMonthContainer.appendChild(loadingSpinner)
+        const tooltipClone: Element = loadingSpinner.cloneNode(true) as Element
+        calendarMonthContainer.appendChild(tooltipClone)
+        tooltipClonesSpinner.push(tooltipClone)
       }
 
       if (
@@ -168,8 +175,9 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       }
 
       return () => {
-        tooltipClones.forEach((clone) => clone.remove())
+        tooltipClonesCheckIn.forEach((clone) => clone.remove())
         tooltipClonesCheckOut.forEach((clone) => clone.remove())
+        tooltipClonesSpinner.forEach((clone) => clone.remove())
         tooltipClonesOverlappingDates.forEach((clone) => clone.remove())
       }
     }, [
@@ -177,6 +185,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       updateCalendarMonthNavigation,
       overlappingDate,
       initialCalendarRange,
+      updateCalendarDefaultMoth,
     ])
 
     return (
@@ -265,7 +274,11 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 : [],
 
               overlappingDate:
-                (!calendarRange?.from && overlappingDate?.from) || [],
+                (!calendarRange?.from &&
+                  overlappingDate?.map((item) => ({
+                    from: item.from,
+                  }))) ||
+                [],
             }}
           />
 
@@ -302,7 +315,7 @@ const handleSelectedCheckIn = ({
   setCalendarRange: (range: DateRange | undefined) => void
   setDisabledDates: ((arg: Matcher[]) => void) | undefined
   calendarRange?: DateRange
-  overlappingDate?: DateRange
+  overlappingDate?: DateRange[]
 }) => {
   // Calendar dates select logic
   const dateFormat = 'dd-MM-yyyy'
@@ -312,8 +325,14 @@ const handleSelectedCheckIn = ({
     ? format(calendarRange?.from, dateFormat)
     : null
 
-  const overlappingDateFrom = overlappingDate?.from
-    ? format(overlappingDate.from, dateFormat)
+  // const overlappingDateFrom = overlappingDate?.from
+  //   ? format(overlappingDate.from, dateFormat)
+  //   : null
+
+  const overlappingDateFrom = overlappingDate?.length
+    ? overlappingDate.find(
+        (date) => format(date.from || 1, dateFormat) === rangeFrom
+      )
     : null
 
   const checkOutRange = disableCalendarDates?.availableDates?.length
@@ -348,7 +367,8 @@ const handleSelectedCheckIn = ({
   if (
     (rangeTo && rangeFrom && rangeFrom === rangeTo) ||
     (!rangeTo && !rangeFrom) ||
-    rangeFrom === overlappingDateFrom
+    // rangeFrom === overlappingDateFrom
+    overlappingDateFrom
   ) {
     setCalendarRange(undefined)
     setDisabledDates && setDisabledDates([])

package/src/core/components/calendar/CalendarTypes.ts

@@ -1,5 +1,5 @@
 import { DateRange, Matcher } from 'react-day-picker'
-import { Palette } from 'src/themes/useTheme'
+import { Palette } from '../../../themes/useTheme'
 
 export type CalendarOffset = {
   [key: string]: number