willba-component-library 0.2.68 → 0.2.70

package/package.json

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

package/src/components/FilterCalendar/FilterCalendar.stories.tsx

@@ -760,8 +760,8 @@ export const RangeContext: Story = {
   args: {
     ...baseData,
     rangeContext: {
-      from: new Date('2024-11-20'),
-      to: new Date('2024-11-23'),
+      from: new Date('2025-01-09'),
+      to: new Date('2025-01-26'),
     },
   },
   render: (args) => {
@@ -783,8 +783,8 @@ export const DisabledRangeContextDates: Story = {
   args: {
     ...baseData,
     rangeContext: {
-      from: new Date('2024-12-03'),
-      to: new Date('2024-12-28'),
+      from: new Date('2025-01-09'),
+      to: new Date('2025-01-26'),
     },
   },
   render: (args) => {

package/src/components/FilterCalendar/hooks/useFilterCalendar.ts

@@ -63,6 +63,13 @@ export const useFilterCalendar = ({
           : [],
       })
     }
+
+    if (disabledDates && !!outerDisableCalendarDates?.disabledDates?.length) {
+      setDisabledDates({
+        ...disabledDates,
+        ...outerDisableCalendarDates.disabledDates,
+      })
+    }
   }, [outerDisableCalendarDates])
 
   // Handle Range Context initial selections

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

@@ -158,20 +158,45 @@
 
 /* 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,
-.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_start.no-active-selection.checkout-option,
-.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.no-active-selection.checkout-option,
-.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_end.no-active-selection.checkout-option {
-  background-color: var(--rdp-background-color);
-  color: inherit;
+
+
+
+/* ---- */
+
+.will-root .will-calendar-filter-container .no-active-selection-start,
+.will-root .will-calendar-filter-container .no-active-selection-mid,
+.will-root .will-calendar-filter-container .no-active-selection-end { 
+  position: initial;
 }
 
-.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);
+.will-root .will-calendar-filter-container .no-active-selection-start::before,
+.will-root .will-calendar-filter-container .no-active-selection-mid::before,
+.will-root .will-calendar-filter-container .no-active-selection-end::before { 
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 91%;
+  margin-top: -2px;
+
+  border: 3px dashed var(--will-grey);
+}
+
+
+.will-root .will-calendar-filter-container .no-active-selection-start::before {
+  border-right: none;
+  border-top-left-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+
+.will-root .will-calendar-filter-container .no-active-selection-mid::before {
+  border-right: none;
+  border-left: none;
+}
+
+.will-root .will-calendar-filter-container .no-active-selection-end::before {
+  border-left: none;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
 }
 
 .will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.checkout-option {
@@ -185,7 +210,6 @@
 .will-root .will-calendar-filter-container .overlapping-date {
   user-select: none;
   pointer-events: none;
-  
 }
 
 .will-root .will-calendar-filter-container .overlapping-date:hover {

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

@@ -146,7 +146,6 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 ? disabledDatesByPage
                 : disabledDates?.length
                 ? [
-                    ...(newDisableCalendarDates?.disabledDates || []),
                     lastPossibleCheckout && lastPossibleCheckout,
                     ...disabledDates,
                     ...firstPossibleRangeContextCheckIn,
@@ -177,12 +176,11 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
               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',
+
+              noActiveSelectionStart: 'no-active-selection-start',
+              noActiveSelectionMid: 'no-active-selection-mid',
+              noActiveSelectionEnd: 'no-active-selection-end',
+
               checkoutOptionsMid:
                 'rdp-day_selected rdp-day_range_middle checkout-option',
 
@@ -218,10 +216,10 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
             <div>{t('checkOutOnly')}</div>
           </div>
           <div className={'will-calendar-tooltip-check-in-only'}>
-            <div>Check-in Only</div>
+            <div>{t('checkInOnly')}</div>
           </div>
           <div className={'will-calendar-tooltip-check-out-only'}>
-            <div>Checkout Only</div>
+            <div>{t('checkOutOnly')}</div>
           </div>
           <div className={'will-calendar-spinner'}>
             <IconsSvg

package/src/core/components/calendar/utils/calendarSelectionRules.tsx

@@ -193,6 +193,8 @@ const disableFutureDates = ({
       // Will disable all dates before the check-in date
       // { before: findCheckOutRange?.checkIn },
 
+      ...(newDisableCalendarDates?.disabledDates || []),
+
       {
         from: noDatesRange ? undefined : checkIn,
         to: noDatesRange ? undefined : firstCheckOut,

package/src/core/components/calendar/utils/handleCalendarModifiers.tsx

@@ -1,14 +1,4 @@
-import {
-  format,
-  addDays,
-  endOfDay,
-  differenceInDays,
-  isEqual,
-  eachDayOfInterval,
-  isAfter,
-  isBefore,
-  isWithinInterval,
-} from 'date-fns'
+import { addDays, endOfDay } from 'date-fns'
 import { DateRange, Matcher } from 'react-day-picker'
 
 import { DisableCalendarDates, RangeContext } from '../CalendarTypes'
@@ -57,44 +47,6 @@ export const handleCalendarModifiers = ({
   const rangeContextFrom = rangeContext?.from && endOfDay(rangeContext.from)
   const rangeContextTo = rangeContext?.to && endOfDay(rangeContext.to)
 
-  // Create range for range context middle selection and current overlapping selection
-
-  const rangeContextMiddleSelection =
-    rangeContextFrom && rangeContextTo
-      ? eachDayOfInterval({
-          start: addDays(rangeContextFrom, 1),
-          end: addDays(rangeContextTo, -1),
-        }).filter(
-          (date) =>
-            !(
-              (calendarRangeFrom &&
-                isEqual(endOfDay(calendarRangeFrom), endOfDay(date))) ||
-              (calendarRangeTo &&
-                isEqual(endOfDay(calendarRangeTo), endOfDay(date))) ||
-              (calendarRangeFrom &&
-                !calendarRangeTo &&
-                currentSelectionLastCheckoutDate?.lastCheckOut &&
-                isAfter(calendarRangeFrom, rangeContextFrom) &&
-                isBefore(
-                  currentSelectionLastCheckoutDate?.lastCheckOut,
-                  rangeContextTo
-                ) &&
-                isWithinInterval(date, {
-                  start: currentSelectionLastCheckoutDate.checkIn,
-                  end: currentSelectionLastCheckoutDate.lastCheckOut,
-                })) ||
-              (calendarRangeFrom &&
-                calendarRangeTo &&
-                isAfter(calendarRangeFrom, rangeContextFrom) &&
-                isBefore(calendarRangeTo, rangeContextTo) &&
-                isWithinInterval(date, {
-                  start: calendarRangeFrom,
-                  end: calendarRangeTo,
-                }))
-            )
-        )
-      : []
-
   return {
     booked: disabledDatesByPage.length
       ? disabledDatesByPage
@@ -124,31 +76,15 @@ export const handleCalendarModifiers = ({
         : []),
     ],
 
-    noActiveSelectionStart:
-      rangeContextFrom &&
-      !(
-        calendarRangeFrom &&
-        rangeContextFrom &&
-        isEqual(endOfDay(rangeContextFrom), endOfDay(calendarRangeFrom))
-      )
-        ? rangeContextFrom
-        : [],
+    noActiveSelectionStart: rangeContextFrom || [],
 
     noActiveSelectionMid: [
-      ...(rangeContextMiddleSelection.length
-        ? rangeContextMiddleSelection
-        : []),
+      rangeContextFrom && rangeContextTo
+        ? { after: rangeContextFrom, before: rangeContextTo }
+        : [],
     ],
 
-    noActiveSelectionEnd:
-      rangeContextTo &&
-      !(
-        calendarRangeFrom &&
-        rangeContextTo &&
-        isEqual(endOfDay(rangeContextTo), endOfDay(calendarRangeFrom))
-      )
-        ? rangeContextTo
-        : [],
+    noActiveSelectionEnd: rangeContextTo || [],
 
     checkoutOptionsMid: [
       ...(calendarRangeFrom &&

package/src/locales/en/common.json

@@ -9,8 +9,7 @@
 "noCheckIn": "Room not available",
 "noCheckOut": "Check-out not available",
 "checkOutOnly": "Check-out only",
-"onlyCheckOut": "Check-in only",
-"onlyCheckIn": "Check-out only",
+"checkInOnly": "Check-in only",
 "errors": {
     "calendarErrors": {
         "checkInAvailabilityError": "Check-in available for second room only with connection dates",

package/src/locales/fi/common.json

@@ -9,8 +9,7 @@
 "noCheckIn": "Huone ei saatavilla",
 "noCheckOut": "Uloskirjaus ei saatavilla",
 "checkOutOnly": "Vain uloskirjaus",
-"onlyCheckOut": "Check-in only",
-"onlyCheckIn": "Check-out only",
+"checkInOnly": "Check-in only",
 "errors": {
     "calendarErrors": {
         "checkInAvailabilityError": "Check-in available for second room only with connection dates",