willba-component-library 0.2.30 → 0.2.32

package/package.json

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

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -42,8 +42,9 @@ export default function FilterCalendar({
     calendarRange,
     disabledDates,
     setDisabledDates,
-    updateCalendar,
-    setUpdateCalendar,
+    updateCalendarMonthNavigation,
+    updateCalendarDefaultMoth,
+    setUpdateCalendarMonthNavigation,
     initialCalendarRange,
   } = useFilterCalendar({
     onSubmit,
@@ -81,8 +82,11 @@ export default function FilterCalendar({
               requestDates={requestDates}
               disabledDates={disabledDates}
               setDisabledDates={setDisabledDates}
-              updateCalendar={updateCalendar}
-              setUpdateCalendar={setUpdateCalendar}
+              updateCalendarMonthNavigation={updateCalendarMonthNavigation}
+              setUpdateCalendarMonthNavigation={
+                setUpdateCalendarMonthNavigation
+              }
+              updateCalendarDefaultMoth={updateCalendarDefaultMoth}
               loadingData={loadingData}
               initialCalendarRange={initialCalendarRange}
               showFeedback={showFeedback}

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

@@ -19,7 +19,10 @@ export const useFilterCalendar = ({
     DateRange | undefined
   >()
   const [disabledDates, setDisabledDates] = useState<Matcher[]>([])
-  const [updateCalendar, setUpdateCalendar] = useState<boolean>(false)
+  const [updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation] =
+    useState<boolean>(false)
+  const [updateCalendarDefaultMoth, setUpdateCalendarDefaultMoth] =
+    useState<number>(0)
 
   useEffect(() => {
     if (typeof window === 'undefined') return
@@ -31,8 +34,8 @@ export const useFilterCalendar = ({
 
     if (startDateParam && endDateParam) {
       if (noActiveSelection) {
-        console.log(startDateParam, endDateParam)
         setCalendarRange(undefined)
+        setUpdateCalendarDefaultMoth((prev) => prev + 1)
         setInitialCalendarRange({
           from: new Date(startDateParam),
           to: new Date(endDateParam),
@@ -61,10 +64,11 @@ export const useFilterCalendar = ({
     handleClearDates,
     setCalendarRange,
     setDisabledDates,
-    setUpdateCalendar,
+    setUpdateCalendarMonthNavigation,
     calendarRange,
     disabledDates,
-    updateCalendar,
+    updateCalendarMonthNavigation,
+    updateCalendarDefaultMoth,
     initialCalendarRange,
   }
 }

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

@@ -22,8 +22,9 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       requestDates,
       disabledDates,
       setDisabledDates,
-      updateCalendar,
-      setUpdateCalendar,
+      updateCalendarMonthNavigation,
+      setUpdateCalendarMonthNavigation,
+      updateCalendarDefaultMoth,
       loadingData,
       initialCalendarRange,
       showFeedback,
@@ -171,12 +172,18 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
         tooltipClonesCheckOut.forEach((clone) => clone.remove())
         tooltipClonesOverlappingDates.forEach((clone) => clone.remove())
       }
-    }, [calendarRange, updateCalendar, overlappingDate])
+    }, [
+      calendarRange,
+      updateCalendarMonthNavigation,
+      overlappingDate,
+      initialCalendarRange,
+    ])
 
     return (
       <div className="will-filter-bar-calendar" ref={ref}>
         <div className="will-calendar-filter-container">
           <DayPicker
+            key={updateCalendarDefaultMoth}
             id="will-calendar"
             mode="range"
             locale={language === 'en' ? enUS : fi}
@@ -210,8 +217,9 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
             }
             fromMonth={today}
             onMonthChange={(val) => {
-              requestDates && setUpdateCalendar
-                ? (requestDates(val), setUpdateCalendar((prev) => !prev))
+              requestDates && setUpdateCalendarMonthNavigation
+                ? (requestDates(val),
+                  setUpdateCalendarMonthNavigation((prev) => !prev))
                 : null
             }}
             modifiersClassNames={{
@@ -303,9 +311,6 @@ const handleSelectedCheckIn = ({
   const calendarFrom = calendarRange?.from
     ? format(calendarRange?.from, dateFormat)
     : null
-  const calendarTo = calendarRange?.to
-    ? format(calendarRange?.to, dateFormat)
-    : null
 
   const overlappingDateFrom = overlappingDate?.from
     ? format(overlappingDate.from, dateFormat)

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

@@ -28,11 +28,13 @@ export type CalendarTypes = {
   requestDates?: (val: Date) => void
   disabledDates?: Matcher[]
   setDisabledDates?: (arg: Matcher[]) => void
-  updateCalendar?: boolean
-  setUpdateCalendar?: (arg: (prev: boolean) => boolean) => void
   loadingData?: boolean
   initialCalendarRange?: DateRange | undefined
   showFeedback?: boolean
   noActiveSelection?: boolean
   palette?: Palette
+
+  updateCalendarMonthNavigation?: boolean
+  setUpdateCalendarMonthNavigation?: (arg: (prev: boolean) => boolean) => void
+  updateCalendarDefaultMoth?: number
 }