import { formatDate } from '@transferwise/formatting'; import { useIntl } from 'react-intl'; import Chevron from '../../chevron'; import { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common'; import messages from './DateTrigger.messages'; import { useContext, useId } from 'react'; import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider'; import Body from '../../body'; import IconButton from '../../iconButton'; import { Cross } from '@transferwise/icons'; interface DateTriggerProps { ariaLabelledBy?: string; selectedDate: Date | null; size: SizeSmall | SizeMedium | SizeLarge; placeholder: string; label: string; monthFormat: 'short' | 'long'; disabled: boolean; onClick: () => void; onClear?: () => void; id?: string; } const DateTrigger: React.FC = ({ selectedDate, size = Size.MEDIUM, placeholder, label, id, monthFormat, disabled, ariaLabelledBy, onClick, onClear, }) => { const { locale, formatMessage } = useIntl(); const valueIdPrefix = useId(); const overlayId = useContext(OverlayIdContext); const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`]; return ( <> {onClear ? ( <>

{ event.stopPropagation(); event.preventDefault(); onClear(); }} > ) : null} ); }; export default DateTrigger;