set selected DateRange from custom component

[rnkln]

I am trying to make a custom WeekNumber component, with the only purpose of selecting the entire week when clicked. My initial thought was to use the select function from useDayPicker<Range>(), but this does not seem to support selecting a range, and is instead more geared towards clicking 1 date at a time.

import type { ThHTMLAttributes, MouseEvent } from "react";
import { useDayPicker, type CalendarWeek } from "react-day-picker";

export type RangerCalendarWeekNumberProps = {
  week: CalendarWeek;
} & ThHTMLAttributes<HTMLTableCellElement>;

export function RangerCalendarWeekNumber(props: RangerCalendarWeekNumberProps) {
  const { select } = useDayPicker<{ mode: "range" }>();
  const { week, ...thProps } = props;

  const handleClick = (event: MouseEvent) => {
    if (select) {
      const start = week.days.at(0);
      const end = week.days.at(-1);

      if (start && end) {
        select(start.date, {}, event);
        select(end.date, {}, event);
        // this would be possible with setSelected exposed from selection/*.ts
        // setSelected({ from: start.date, to: end.date }) 
      }
    }
  };

  return <th {...thProps} onClick={handleClick} />;
}

I thought this would be natural way of reusing the uncontrolled / controlled functionality of the day picker without having to wrap it in a custom context to pass down event handlers and such.

Good ideas are welcome

[gpbl]

I see your issue here, @rnkln!

Calling select multiple times in a row doesn't work well with the current controlled vs. uncontrolled selection logic in DayPicker. This is something we plan to address in the future.

@rodgobbi, we should definitely review this part for the next major release.

[rodgobbi]

Indeed, @rnkln has a good point.
The documentation implies that it will work like calling the onSelect callback:

export type DayPickerContext<
  T extends { mode?: Mode | undefined; required?: boolean | undefined }
> = {
  //...
  /** Set a selection. */
  select: SelectHandler<T> | undefined;
  //...
};

select is currently closer to selectDate or selectDay.

@gpbl do you keep track of these suggestions? Should we add to the tasks board?

[gpbl]

Yes - tracked in DayPicker Plans

[rnkln]

Amazing, being able to tap into the raw setSelected would make it a breeze to implement a custom WeekNumber component like described. Thanks for looking into supporting this! 🚀