import React from 'react' ; import { useDayPicker } from 'contexts/DayPicker' ; /** The props for the [[CaptionLabel]] component. */ export interface CaptionLabelProps { /** The ID for the heading element. Must be the same as the labelled-by in Table. */ id ? : string ; /** The month where the caption is displayed. */ displayMonth : Date ; } /** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */ export function CaptionLabel ( props ) { const { locale , classNames , styles , formatters : { formatCaption } } = useDayPicker ( ) ; return ( < h2 className = { classNames . caption_label } style = { styles . caption_label } aria - live = "polite" aria - atomic = "true" id = { props . id } > { formatCaption ( props . displayMonth , { locale } ) } < /h2>); }