Calendar interop with other libraries

[cloud-walker]

Hi! I'm considering adopting react-aria calendar (and other date related modules!), but in our system we already have a popover implementation (based on ariakit), which handles the focus trap, and has an initialFocusRef prop, to define the first element in focus on popover open state event.

I'm wondering if there is a chance to adopt only the calendar and not the whole date picker from react-aria and integrate it with my already developed popover.

For now I baked this example that seems to handle the focus on popover open properly:

import { Popover, PopoverDisclosure, PopoverProvider } from "@ariakit/react";
import { fromDate } from "@internationalized/date";
import { useState } from "react";
import {
  Button,
  Calendar,
  CalendarCell,
  CalendarGrid,
  Heading,
} from "react-aria-components";

export function Example() {
  const [date, setDate] = useState<Date | null>(null);
  return (
    <>
      <PopoverProvider>
        <PopoverDisclosure>
          {date == null ? "Select Date" : date.toDateString()}
        </PopoverDisclosure>
        <Popover
          unmountOnHide
          autoFocusOnShow={false} // disable the ariakit autoFocus behaviour leaving it to react-aria on mount
         >
          <Calendar
            autoFocus // here react-aria takes the focus on mount
            value={date == null ? null : fromDate(date, "UTC")}
            onChange={(value) => {
              setDate(value.toDate());
            }}
          >
            <header>
              <Button slot="previous">prev</Button>
              <Heading />
              <Button slot="next">next</Button>
            </header>
            <CalendarGrid>
              {(date) => <CalendarCell date={date} />}
            </CalendarGrid>
          </Calendar>
        </Popover>
      </PopoverProvider>
    </>
  );
}

[reidbarber]

React Aria Components are designed to be composable, so you can definitely use Calendar without it being inside a DatePicker, just like in your example.