Issue with day selection while implementing "custom" logic and components

[ShacharZ1]

Hey everyone!

I am using react-day-picker as such:

          export const StyledDayPicker = styled(DayPicker)<{
           selectedDates: DateRange | undefined;
          }>`
          //... styles
          `

          <StyledDayPicker
            mode="range"
            selected={props.selectedRange}
            disabled={props.disabledDates}
            month={props.month}
            onSelect={callbacks.onSelect}
            onMonthChange={callbacks.onMonthChange}
            selectedDates={props.selectedRange}
            onDayMouseEnter={(d) => {
              callbacks.onDayMouseEnter?.(d);
            }}
            onDayMouseLeave={() => {
              callbacks.onDayMouseLeave?.();
            }}
            components={{
              ...components,
            }}
          />

Those are the the props I am passing to the component:

const [selectedRange, setSelectedRange] = useState<DateRange | undefined>(
  initialRange
);
const [hoveredDate, setHoveredDate] = useState<Date | undefined>(undefined);

  const handleSelect = (range: DateRange | undefined) => {
  setSelectedRange(range);
  if (range?.to || !range?.from) {
    setHoveredDate(undefined);
  }
  if (range?.from && range?.to && onDatesChange) {
    onDatesChange(range);
  }
};


const rangeUiRangeParams: RangeDatePickerUiParams = {
  props: {
    month,
    selectedRange,
    disabledDates: disabledDatesInterval,
  },
  callbacks: {
    onMonthChange,
    onSelect: handleSelect,
    onDayMouseEnter: (d: Date) => {
      setHoveredDate(d);
    },
    onDayMouseLeave: () => {
      setHoveredDate(undefined);
    },
  },
  components: {
    Nav: CustomNavbar,
    CaptionLabel: PickerFragment,
    DayButton(props) {
      return (
        <CustomRangeDay
          hoveredDate={hoveredDate}
          selectedRange={selectedRange}
          {...props}
        />
      );
    },
  },
};

This is the custom day button:

export interface CustomRangeDayProps
  extends ButtonHTMLAttributes<HTMLButtonElement> {
  day: CalendarDay;
  modifiers: Modifiers;
  hoveredDate: Date | undefined;
  selectedRange: DateRange | undefined;
}

enum HoverRangeState {
  IN_HOVER_RANGE = 'in-hover-range',
  NOT_IN_HOVER_RANGE = 'not-in-hover-range',
}

enum HoverDirectionState {
  BEFORE_SELECTED = 'hover-before-selected',
  AFTER_SELECTED = 'hover-after-selected',
  NONE = '',
}

enum AdjacentState {
  BEFORE_SELECTED = 'adjacent-before-selected',
  AFTER_SELECTED = 'adjacent-after-selected',
  NONE = '',
}

enum SelectedDateState {
  SELECTED_WITH_HOVER_BEFORE = 'selected-with-hover-before',
  SELECTED_WITH_HOVER_AFTER = 'selected-with-hover-after',
  SELECTED_WITH_NO_HOVER = 'selected-with-no-hover',
  NOT_SELECTED = '',
}

export const CustomRangeDay = React.memo(
  ({
    day,
    modifiers,
    selectedRange,
    hoveredDate,
    onClick,
    ...buttonProps
  }: CustomRangeDayProps) => {
    const { disabled, selected } = modifiers;
    const date = day.date.getDate();

    const { inHoverRange, hoverDirection, isAdjacent, selectedDateState } =
      useMemo(() => {
        const result = {
          inHoverRange: HoverRangeState.NOT_IN_HOVER_RANGE,
          hoverDirection: HoverDirectionState.NONE,
          isAdjacent: AdjacentState.NONE,
          selectedDateState: SelectedDateState.NOT_SELECTED,
        };

        if (!selectedRange?.from || !hoveredDate) {
          if (
            selectedRange?.from &&
            day.date.getTime() === selectedRange.from.getTime()
          ) {
            result.selectedDateState = SelectedDateState.SELECTED_WITH_NO_HOVER;
          }
          return result;
        }

        const dayTime = day.date.getTime();
        const fromTime = selectedRange.from.getTime();
        const hoveredTime = hoveredDate.getTime();

        if (dayTime === fromTime) {
          if (hoveredTime < fromTime) {
            result.selectedDateState =
              SelectedDateState.SELECTED_WITH_HOVER_BEFORE;
          } else if (hoveredTime > fromTime) {
            result.selectedDateState =
              SelectedDateState.SELECTED_WITH_HOVER_AFTER;
          } else {
            result.selectedDateState = SelectedDateState.SELECTED_WITH_NO_HOVER;
          }
        }

        if (selectedRange.to && fromTime === selectedRange.to.getTime()) {
          if (fromTime === hoveredTime) {
            return result;
          }

          const isInRange =
            (dayTime >= fromTime && dayTime <= hoveredTime) ||
            (dayTime <= fromTime && dayTime >= hoveredTime);

          if (isInRange) {
            result.inHoverRange = HoverRangeState.IN_HOVER_RANGE;

            if (dayTime < fromTime) {
              result.hoverDirection = HoverDirectionState.BEFORE_SELECTED;
            } else if (dayTime > fromTime) {
              result.hoverDirection = HoverDirectionState.AFTER_SELECTED;
            }

            const dayDiff = Math.round(
              (dayTime - fromTime) / (1000 * 60 * 60 * 24)
            );
            if (dayDiff === 1) {
              result.isAdjacent = AdjacentState.AFTER_SELECTED;
            } else if (dayDiff === -1) {
              result.isAdjacent = AdjacentState.BEFORE_SELECTED;
            }
          }
        }

        return result;
      }, [day.date, hoveredDate, selectedRange]);

    const isDateHovered =
      hoveredDate && day.date.getTime() === hoveredDate.getTime();

    const isHoveredClassName = isDateHovered ? 'date-is-hovered' : '';
    const cellClassName = `${inHoverRange} ${isHoveredClassName} ${hoverDirection} ${isAdjacent} ${selectedDateState}`;

    return (
      <DateCell className={cellClassName}>
        <DateBox
          isHovered={isDateHovered}
          selected={selected}
          disabled={disabled}
          onClick={onClick}
          {...buttonProps}
        >
          <span>{date}</span>
        </DateBox>
      </DateCell>
    );
  }
);

All the logic shown here does work (selection, disabled dates, hovered, custom class names and components, etc), expect for the newly issue I am facing.

And now for the issue:
After introducing the class name logic in CustomRangeDay I am having issues with the day selection.
Sometime it works as it should (selecting/ de-selecting start and end dates).
And sometime it would allow me to select only a start date or both and then the click won't de-select or change the dates.

I am assuming I did something wrong, but I am not sure where is the issue, if I remove all class name logic in the custom day button component the issue remains.

I did found out that if i remove this part, then the issue is gone:

          onDayMouseEnter={(d) => {
              callbacks.onDayMouseEnter?.(d);
            }}
            onDayMouseLeave={() => {
              callbacks.onDayMouseLeave?.();
            }}

Any help would be much appreciated! thank you all!