willba-component-library 0.2.24 → 0.2.26

package/package.json

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

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

@@ -149,8 +149,17 @@
 
 /* No active selection */
 
-.will-root .will-calendar-filter-container .no-active-selection {
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_start.no-active-selection,
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.no-active-selection,
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_end.no-active-selection {
   background-color: var(--will-onahau);
+  color: inherit;
+}
+
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_start.no-active-selection:hover,
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.no-active-selection:hover,
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_end.no-active-selection:hover {
+  background-color: var(--rdp-background-color);
 }
 
 /* Overlapping date */

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

@@ -188,15 +188,9 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 setCalendarRange,
                 setDisabledDates,
                 calendarRange,
+                overlappingDate,
               })
             }
-            modifiersClassNames={{
-              today: 'my-today',
-              booked: 'booked',
-              disabledAfterCheckIn: 'disabled-after-check-in',
-              noActiveSelection: 'no-active-selection',
-              overlappingDate: 'overlapping-date',
-            }}
             captionLayout="dropdown-buttons"
             defaultMonth={
               selectedStartDate ||
@@ -217,6 +211,19 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 ? (requestDates(val), setUpdateCalendar((prev) => !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
@@ -228,8 +235,22 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 ? [{ after: calendarRange.from }]
                 : [],
 
-              noActiveSelection: !calendarRange
-                ? initialCalendarRange || []
+              noActiveSelectionStart: !calendarRange
+                ? initialCalendarRange?.from || []
+                : [],
+              noActiveSelectionMid:
+                !calendarRange &&
+                initialCalendarRange?.from &&
+                initialCalendarRange?.to
+                  ? [
+                      {
+                        after: initialCalendarRange?.from,
+                        before: initialCalendarRange?.to,
+                      },
+                    ]
+                  : [],
+              noActiveSelectionEnd: !calendarRange
+                ? initialCalendarRange?.to || []
                 : [],
 
               overlappingDate:
@@ -261,12 +282,14 @@ const handleSelectedCheckIn = ({
   setCalendarRange,
   setDisabledDates,
   calendarRange,
+  overlappingDate,
 }: {
   range: DateRange | undefined
   disableCalendarDates?: DisableCalendarDates
   setCalendarRange: (range: DateRange | undefined) => void
   setDisabledDates: ((arg: Matcher[]) => void) | undefined
   calendarRange?: DateRange
+  overlappingDate?: DateRange
 }) => {
   // Calendar dates select logic
   const dateFormat = 'dd-MM-yyyy'
@@ -279,6 +302,10 @@ const handleSelectedCheckIn = ({
     ? format(calendarRange?.to, dateFormat)
     : null
 
+  const overlappingDateFrom = overlappingDate?.from
+    ? format(overlappingDate.from, dateFormat)
+    : null
+
   const checkOutRange = disableCalendarDates?.availableDates?.length
     ? disableCalendarDates.availableDates.find(
         (checkInDate) =>
@@ -310,7 +337,8 @@ const handleSelectedCheckIn = ({
 
   if (
     (rangeTo && rangeFrom && rangeFrom === rangeTo) ||
-    (!rangeTo && !rangeFrom)
+    (!rangeTo && !rangeFrom) ||
+    rangeFrom === overlappingDateFrom
   ) {
     setCalendarRange(undefined)
     setDisabledDates && setDisabledDates([])