Function CalendarCell

starters/hooks/src/RangeCalendar.tsx:87–135

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

}

function CalendarCell({state, date}: {state: RangeCalendarState; 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();

  // Compute the range endpoints from the highlighted range.
  let isSelectionStart = state.highlightedRange
    ? isSameDay(date, state.highlightedRange.start)
    : false;
  let isSelectionEnd = state.highlightedRange ? isSameDay(date, state.highlightedRange.end) : false;

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