willba-component-library 0.2.41 → 0.2.43

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 
 import FilterCalendar from './FilterCalendar'
@@ -165,9 +165,17 @@ export const Primary: Story = {
     showFeedback: true,
     noActiveSelection: true,
   },
-  render: (args) => (
-    <div style={{ padding: '30px', height: '100vh' }}>
-      <FilterCalendar {...args} />
-    </div>
-  ),
+  render: (args) => {
+    const [toggleCalendar, setToggleCalendar] = useState(true)
+    return (
+      <div style={{ padding: '30px', height: '100vh' }}>
+        <FilterCalendar
+          {...args}
+          toggleCalendar={toggleCalendar}
+          setToggleCalendar={setToggleCalendar}
+        />
+        <button onClick={() => setToggleCalendar(true)}>Open calendar</button>
+      </div>
+    )
+  },
 }

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -61,7 +61,9 @@ export default function FilterCalendar({
     handleSelectedFilter: setToggleCalendar,
   })
 
-  const nights = nightsCount({ calendarRange })
+  const nights = nightsCount({
+    calendarRange: calendarRange || initialCalendarRange,
+  })
 
   return (
     <div className={`will-root`} style={themePalette}>
@@ -99,7 +101,7 @@ export default function FilterCalendar({
               <div>
                 <span>
                   {parseDate({
-                    date: initialCalendarRange?.from || calendarRange?.from,
+                    date: calendarRange?.from || initialCalendarRange?.from,
                     dateFormat: 'EEEEEE d.M.yyyy',
                     language,
                   }) || t('common:checkIn')}
@@ -109,7 +111,7 @@ export default function FilterCalendar({
                 </span>
                 <span>
                   {parseDate({
-                    date: initialCalendarRange?.to || calendarRange?.to,
+                    date: calendarRange?.to || initialCalendarRange?.to,
                     dateFormat: 'EEEEEE d.M.yyyy',
                     language,
                   }) || t('common:checkOut')}

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

@@ -34,7 +34,7 @@ export const useFilterCalendar = ({
 
     if (startDateParam && endDateParam) {
       if (noActiveSelection) {
-        setCalendarRange(undefined)
+        handleClearDates()
         setUpdateCalendarDefaultMoth((prev) => prev + 1)
         setInitialCalendarRange({
           from: new Date(startDateParam),

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

@@ -44,7 +44,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       DateRange[] | undefined
     >(undefined)
 
-    useMemo(() => {
+    const newDisableCalendarDates = useMemo(() => {
       if (disableCalendarDates?.availableDates) {
         const dateFormat = 'dd-MM-yyyy'
 
@@ -98,15 +98,27 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
           setOverlappingDate((prev = []) => [...prev, ...newOverlappingDates])
         }
 
-        disableCalendarDates.disabledDates = updatedDisabledDates
+        const newDisableCalendarDates = {
+          ...disableCalendarDates,
+          disabledDates: updatedDisabledDates,
+        }
+
+        return newDisableCalendarDates
       }
-    }, [disableCalendarDates])
+      return disableCalendarDates
+    }, [
+      disableCalendarDates,
+      calendarRange,
+      updateCalendarMonthNavigation,
+      initialCalendarRange,
+      updateCalendarDefaultMoth,
+    ])
 
     // Handle disable dates by page
     const disabledDatesByPage = handleDisabledDatesByPage({
       today,
       selectedPath,
-      disableCalendarDates,
+      newDisableCalendarDates,
     })
 
     // Handle tooltip
@@ -225,7 +237,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
             onSelect={(range) =>
               handleSelectedCheckIn({
                 range,
-                disableCalendarDates,
+                newDisableCalendarDates,
                 setCalendarRange,
                 setDisabledDates,
                 calendarRange,
@@ -236,8 +248,8 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
             defaultMonth={
               initialCalendarRange?.from ||
               selectedStartDate ||
-              (disableCalendarDates?.disabledDates?.length
-                ? disableCalendarDates.disabledDates[0].from
+              (newDisableCalendarDates?.disabledDates?.length
+                ? newDisableCalendarDates.disabledDates[0].from
                 : today)
             }
             disabled={
@@ -245,7 +257,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 ? disabledDatesByPage
                 : disabledDates?.length
                 ? disabledDates
-                : disableCalendarDates?.disabledDates || []
+                : newDisableCalendarDates?.disabledDates || []
             }
             fromMonth={today}
             onMonthChange={(val) => {
@@ -272,7 +284,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 ? disabledDatesByPage
                 : disabledDates?.length
                 ? disabledDates
-                : disableCalendarDates?.disabledDates || [],
+                : newDisableCalendarDates?.disabledDates || [],
 
               disabledAfterCheckIn: calendarRange?.from
                 ? [{ after: calendarRange.from }]
@@ -327,14 +339,14 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
 
 const handleSelectedCheckIn = ({
   range,
-  disableCalendarDates,
+  newDisableCalendarDates,
   setCalendarRange,
   setDisabledDates,
   calendarRange,
   overlappingDate,
 }: {
   range: DateRange | undefined
-  disableCalendarDates?: DisableCalendarDates
+  newDisableCalendarDates?: DisableCalendarDates
   setCalendarRange: (range: DateRange | undefined) => void
   setDisabledDates: ((arg: Matcher[]) => void) | undefined
   calendarRange?: DateRange
@@ -354,8 +366,8 @@ const handleSelectedCheckIn = ({
       )
     : null
 
-  const checkOutRange = disableCalendarDates?.availableDates?.length
-    ? disableCalendarDates.availableDates.find(
+  const checkOutRange = newDisableCalendarDates?.availableDates?.length
+    ? newDisableCalendarDates.availableDates.find(
         (checkInDate) =>
           format(checkInDate.checkIn || 1, dateFormat) ===
           format(range?.from || 1, dateFormat)
@@ -372,7 +384,7 @@ const handleSelectedCheckIn = ({
     setDisabledDates([
       // { before: findCheckOutRange?.checkIn },
 
-      ...(disableCalendarDates?.disabledDates || []),
+      ...(newDisableCalendarDates?.disabledDates || []),
 
       {
         from: noDatesRange ? undefined : checkIn,
@@ -401,18 +413,18 @@ const handleSelectedCheckIn = ({
 }
 
 const handleDisabledDatesByPage = ({
-  disableCalendarDates,
+  newDisableCalendarDates,
   selectedPath,
   today,
 }: {
-  disableCalendarDates?: DisableCalendarDates
+  newDisableCalendarDates?: DisableCalendarDates
   selectedPath?: string
   today: Date
 }) => {
   const daysToOffsetCalendar =
-    disableCalendarDates?.disabledDatesByPage && selectedPath
+    newDisableCalendarDates?.disabledDatesByPage && selectedPath
       ? [
-          disableCalendarDates?.disabledDatesByPage?.find(
+          newDisableCalendarDates?.disabledDatesByPage?.find(
             (item) => selectedPath === item.page
           ),
         ]