import { DateTimePickerProps } from './date-time-picker.types'; /** * DateTimePicker is a composite component that combines date and time selection. * It provides a text field for entering date/time values and a popup with both * a calendar for date selection and time selectors for hour, minute, and second. * * Built on top of React Aria's date picker primitives with extended time support. * The component automatically handles keyboard navigation, accessibility, and * internationalization for both date and time components. * * ## Features * * - **Unified Date/Time Selection**: Single component for both date and time * - **Calendar Integration**: Full calendar for date selection * - **Time Selectors**: Dropdown selectors for hour, minute, and second * - **Granularity Control**: Configure precision from day to second level * - **Keyboard Navigation**: Full keyboard support with Enter/Space to open * - **Accessibility**: Screen reader support and proper focus management * - **Internationalization**: Automatic formatting based on locale * - **Validation**: Built-in min/max date/time validation * - **Form Integration**: Works seamlessly with HTML forms * * ## Usage * * ### Basic Usage * ```tsx * import { DateTimePicker } from '@bloomreach/react-banana-ui'; * * function MyComponent() { * const [value, setValue] = useState(new Date()); * * return ( * setValue(newValue)} * granularity="minute" * /> * ); * } * ``` * * ### With Validation * ```tsx * { * if (context.valid) { * setValue(newValue); * } else { * setError(context.validationMessage.join(' ')); * } * }} * minDate={new Date('2024-01-01')} * maxDate={new Date('2024-12-31')} * granularity="second" * required * /> * ``` * * ## Accessibility * * The component follows WAI-ARIA guidelines for both date and time selection: * - Proper focus management between input, calendar, and time selectors * - Screen reader announcements for value changes * - Keyboard navigation with arrow keys in calendar * - Escape key to close, Enter/Space to open * - Support for assistive technologies * * @param props - The props for the DateTimePicker component * @param forwardedRef - Ref to be forwarded to the container element * @returns A comprehensive date and time picker component */ declare const DateTimePicker: import('react').ForwardRefExoticComponent>; export default DateTimePicker;