Function CalendarCell

starters/hooks/src/Calendar.tsx:77–110

({state, date}: {state: CalendarState; date: CalendarDate})

}

function CalendarCell({state, date}: {state: CalendarState; date: CalendarDate}) {
  let ref = useRef<HTMLDivElement>(null);
  let {
    cellProps,
    buttonProps,
    isSelected,
    isOutsideVisibleRange,
    isDisabled,
    isUnavailable,
    isPressed,
    formattedDate
  } = useCalendarCell({date}, state, ref);
  let {hoverProps, isHovered} = useHover({});
  let {focusProps, isFocusVisible} = useFocusRing();

  return (
    <td {...cellProps}>
      <div
        {...mergeProps(buttonProps, hoverProps, focusProps)}
        ref={ref}
        hidden={isOutsideVisibleRange}
        className="react-aria-CalendarCell button-base"
        data-variant="quiet"
        data-selected={isSelected || undefined}
        data-disabled={isDisabled || undefined}
        data-unavailable={isUnavailable || undefined}
        data-hovered={isHovered || undefined}
        data-pressed={isPressed || undefined}
        data-focus-visible={isFocusVisible || undefined}>
        {formattedDate}
      </div>
    </td>
  );
}