/** * Copyright IBM Corp. 2026 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ import { type RefObject } from 'react'; import { DatePickerState, type DatePickerContext } from '@carbon/utilities/date-picker'; /** * Configuration for the useDatePicker hook * Maintains 100% backwards compatibility with Carbon React v11 API */ export interface UseDatePickerConfig { /** * The type of date picker (Carbon API uses datePickerType, not mode) */ datePickerType?: 'simple' | 'single' | 'range'; /** * Initial value as ISO date string */ value?: string; /** * Minimum selectable date (mm/dd/yyyy format - Carbon API) */ minDate?: string | null; /** * Maximum selectable date (mm/dd/yyyy format - Carbon API) */ maxDate?: string | null; /** * Date format string (Flatpickr-compatible format) */ dateFormat?: string; /** * Whether to allow manual input */ allowInput?: boolean; /** * Whether to close calendar on date selection */ closeOnSelect?: boolean; /** * Whether the picker is disabled */ disabled?: boolean; /** * Whether the picker is read-only (Carbon uses readOnly, not readonly) */ readOnly?: boolean; /** * Locale for date formatting */ locale?: string; /** * Change handler - receives array of Date objects (Carbon API) */ onChange?: (dates: Date[]) => void; /** * Open handler */ onOpen?: () => void; /** * Close handler */ onClose?: () => void; } /** * Return type for the useDatePicker hook */ export interface UseDatePickerReturn { /** * Current state machine context */ context: DatePickerContext; /** * Ref to attach to the exit sentinel element in the render tree. * The sentinel is a visually-hidden, aria-hidden span placed just after the * calendar container. It has tabindex="-1" by default and is briefly set to * tabindex="0" when Tab is pressed from the calendar so the browser delivers * focus there naturally — no DOM scan needed. */ exitSentinelRef: RefObject; /** * onFocus handler to attach to the exit sentinel element. * Restores tabindex="-1" on the sentinel and closes the calendar if still open. */ handleExitSentinelFocus: () => void; /** * Current state */ state: DatePickerState; /** * Whether the calendar is open */ isOpen: boolean; /** * Send an event to the state machine */ send: (eventType: string, payload?: unknown) => void; /** * Open the calendar */ openCalendar: () => void; /** * Close the calendar */ closeCalendar: () => void; /** * Select a date */ selectDate: (date: Temporal.PlainDate) => void; /** * Handle input focus */ handleInputFocus: (inputType?: 'from' | 'to') => void; /** * Handle input blur */ handleInputBlur: () => void; /** * Handle input value change */ handleInputChange: (value: string, inputType?: 'from' | 'to') => void; /** * Ref for the start input */ startInputRef: React.RefObject; /** * Ref for the end input (range mode) */ endInputRef: React.RefObject; /** * Ref for the calendar container */ calendarRef: React.RefObject; } /** * React hook for managing date picker state using the shared state machine * Maintains 100% backwards compatibility with Carbon React v11 API * * @param {UseDatePickerConfig} config - Configuration options * @returns {UseDatePickerReturn} Hook return object with state and handlers */ export declare function useDatePicker(config?: UseDatePickerConfig): UseDatePickerReturn;