Keyboard navigation doesn't work as expected after component customization

[dzianis-l]

Problem statement:

Issue: as soon as there is DayButton component provision keyboard navigation through picker date stops working as expected.

function DayButton(props) {
  // Simple props drilling
  return <button {...props} />;
}
...
<DayPicker 
  ...
  components={{
      DayButton
  }}
/>

It might be just my misunderstanding but I assume it's either not enough just to provide the button component with props drilling or it might be an issue.
If it's a matter of insufficient configuration please advise me the example to take a look at.
If this appears to be an issue, kindly ask to confirm.

Links

Sandbox

Environment:

• react: ^19.0.0
• react-day-picker: 9.11.1

Thoughts

I've conducted shallow investigation and the focusedDay seems to be right determined through the context

  const value: FocusContextValue = {
    focusedDay,
    ...
  };

  return (
    <FocusContext.Provider value={value}>
      {props.children}
    </FocusContext.Provider>
  );

My educated guess would be that there is no access to the focused context to me as an end-consumer of the library.
And that focusedDay might be necessary to provide as well.

[rodgobbi]

@dzianis-l
it's because the core DayButton has internal logic required to work as expected:

  const ref = React.useRef<HTMLButtonElement>(null);
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus();
  }, [modifiers.focused]);

You can copy and paste this logic into your custom components.
But we recommend reusing the core components in the custom components to always have the core logic up to date.
E.g.:

import { DayButton } from "react-day-picker";

function CustomDayButton(props) {
  // Simple props drilling
  return <DayButton {...props} />;
}

[dzianis-l]

Oh, I see, many thanks for the answer.