/// import type { GenerateConfig } from './Generate'; import type { SharedTimeProps } from './Partials/TimePartial/Time.types'; import type { DateRender } from './Partials/DatePartial/Date.types'; import type { MonthCellRender } from './Partials/MonthPartial/Month.types'; import type { AlignType } from '../../Align/Align.types'; import { IconName } from '../../Icon'; import { ConfigContextProps, Shape, Size } from '../../ConfigProvider'; import { ButtonProps } from '../../Button'; export declare type Locale = { /** * The picker locale. */ locale: string; /** * Determines if month should display before year. */ monthBeforeYear?: boolean; /** * The picker year format. */ yearFormat: string; /** * The picker month format. */ monthFormat?: string; /** * The picker quarter format. */ quarterFormat?: string; /** * The picker `Today` string. */ today: string; /** * The picker `Now` string. */ now: string; /** * The picker `Back to today` string. */ backToToday: string; /** * The picker `OK` string. */ ok: string; /** * The picker `Select time` string. */ timeSelect: string; /** * The picker `Select date` string. */ dateSelect: string; /** * The picker `Select week` string. */ weekSelect?: string; /** * The picker `Clear` string. */ clear: string; /** * The picker `Month` string. */ month: string; /** * The picker `Year` string. */ year: string; /** * The picker `Previous month (PageUp)` string. */ previousMonth: string; /** * The picker `Next moth (PageDown)` string. */ nextMonth: string; /** * The picker `Select month` string. */ monthSelect: string; /** * The picker `Select year` string. */ yearSelect: string; /** * The picker `Select decade` string. */ decadeSelect: string; /** * The picker day format. */ dayFormat: string; /** * The picker date format. */ dateFormat: string; /** * The picker date time format. */ dateTimeFormat: string; /** * The picker `Previous year (Control + left)` text. */ previousYear: string; /** * The picker `Next year (Control + right)` text. */ nextYear: string; /** * The picker `Previous decade` text. */ previousDecade: string; /** * The picker `Next decade` text. */ nextDecade: string; /** * The picker `Previous century` text. */ previousCentury: string; /** * The picker `Next century` text. */ nextCentury: string; /** * The picker day abbreviation text. */ shortWeekDays?: string[]; /** * The picker month abbreviation text. */ shortMonths?: string[]; /** * The prev aria label. */ prevAriaLabel?: string; /** * The next aria label. */ nextAriaLabel?: string; /** * The super prev aria label. */ superPrevAriaLabel?: string; /** * The super next aria label. */ superNextAriaLabel?: string; /** * The arrow key navigation announcement text. */ arrowKeyNavigationText?: string; /** * The time picker hour column label. */ hourLabel?: string; /** * The time picker minute column label. */ minuteLabel?: string; /** * The time picker second column label. */ secondLabel?: string; /** * The time picker AM/PM column label. */ ampmLabel?: string; }; export declare type PartialMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'decade'; export declare type OcPickerMode = Exclude; export declare type PartialRefProps = { /** * Callback executes when the partial ref loses focus. */ onBlur?: React.FocusEventHandler; /** * Callback executes when the partial ref is closed. */ onClose?: () => void; /** * Callback executes when the partial ref detects on key down event. */ onKeyDown?: (e: React.KeyboardEvent) => boolean; }; export declare type NullableDateType = DateType | null | undefined; export declare type OnSelect = ( /** * The date value. */ value: DateType, /** * The select type. */ type: 'key' | 'mouse' | 'submit') => void; declare const DataPickerPlacements: ["bottomLeft", "bottomRight", "topLeft", "topRight"]; export declare type DataPickerPlacement = typeof DataPickerPlacements[number]; export declare enum DatePickerShape { Pill = "pill", Rectangle = "rectangle", Underline = "underline" } export declare enum DatePickerSize { Flex = "flex", Large = "large", Medium = "medium", Small = "small" } export declare type OcPickerTriggerProps = { /** * The dropdown children. */ children: React.ReactElement; /** * The html canvas direction of the picker trigger. */ direction?: 'ltr' | 'rtl'; /** * The dropdown alignment. */ dropdownAlign?: AlignType; /** * Custom classnames of the dropdown. */ dropdownClassNames?: string; /** * Gets the container of the surface UI. * The default is a div element child of body */ getPopupContainer?: (node: HTMLElement) => HTMLElement; /** * The popup element. */ popupElement: React.ReactElement; /** * The picker dropdown placement. */ popupPlacement?: DataPickerPlacement; /** * The popup style. */ popupStyle?: React.CSSProperties; /** * The popup is range. */ range?: boolean; /** * The picker trigger shape. */ shape?: DatePickerShape | Shape; /** * The picker trigger size. */ size?: DatePickerSize | Size; /** * The dropdown visible state. */ visible: boolean; }; export declare type PartialSharedProps = { /** * Specify a date that may not be selected. */ disabledDate?: (date: DateType) => boolean; /** * The default date. */ defaultPickerValue?: DateType; /** * Generates the configured dates. */ generateConfig: GenerateConfig; /** * Localization configuration. * @default enUS */ locale: Locale; /** * The custom next icon. */ nextIcon?: IconName; /** * The partial ref. */ operationRef: React.MutableRefObject; /** * Callback when partial is changed. */ onPartialChange: (mode: PartialMode | null, viewValue: DateType) => void; /** * Callback executes on partial select event. */ onSelect: OnSelect; /** * Callback executes when the partial view date is changed. */ onViewDateChange: (value: DateType) => void; /** * The custom previous icon. */ prevIcon?: IconName; /** * The partial shape. */ shape?: DatePickerShape | Shape; /** * The partial size. */ size?: DatePickerSize | Size; /** * The custom super next icon. */ superNextIcon?: IconName; /** * The custom super prev icon. */ superPrevIcon?: IconName; /** * The current day appears to be active. * @default true */ todayActive?: boolean; /** * The partial date value. */ value?: NullableDateType; /** * The partial view date value. */ viewDate: DateType; /** * The partial is trapped. */ trap?: boolean; /** * The partial is visible. */ visible?: boolean; /** * Announces arrow key navigation instructions when the picker opens. * When true, uses default locale text. When string, uses custom message. * @default false */ announceArrowKeyNavigation?: boolean | string; }; export declare type DisabledTimes = { /** * The disabled hours. */ disabledHours?: () => number[]; /** * The disabled minutes. */ disabledMinutes?: (hour: number) => number[]; /** * The disabled seconds. */ disabledSeconds?: (hour: number, minute: number) => number[]; }; export declare type DisabledTime = (date: DateType | null) => DisabledTimes; export declare type OnPartialChange = ( /** * The date value. */ value: DateType, /** * The picker partial mode. */ mode: PartialMode) => void; export declare type EventValue = DateType | null; export declare type RangeValue = [EventValue, EventValue] | null; export declare type Components = { /** * The button component. */ button?: React.ComponentType | string; /** * The range item component. */ rangeItem?: React.ComponentType | string; }; export declare type RangeList = { /** * The range list label. */ label: string; /** * Callback executed on range list click event. */ onClick: () => void; /** * Callback executed on range list mouse enter event. */ onMouseEnter: () => void; /** * Callback executed on range list mouse leave event. */ onMouseLeave: () => void; }[]; export declare type CustomFormat = (value: DateType) => string; export declare type OcPickerPartialSharedProps = { /** * Custom classnames of the component. */ classNames?: string; /** * Custom rendering function for date cells. */ dateRender?: DateRender; /** * The default picker date. */ defaultPickerValue?: DateType; /** * The default date. */ defaultValue?: DateType; /** * The html canvas direction of the partial. */ direction?: 'ltr' | 'rtl'; /** * Specify a date that may not be selected. */ disabledDate?: (date: DateType) => boolean; /** * Generates the configured dates. */ generateConfig: GenerateConfig; /** * Localization configuration. * @default enUS */ locale: Locale; /** * The picker partial mode. */ mode?: PartialMode; /** * Custom month cell content render method. */ monthCellRender?: MonthCellRender; /** * The 'Now' text string. * @default 'Now' */ nowText?: string; /** * The 'OK' text string. * @default 'OK' */ okText?: string; /** * Callback executed when the selected time is changing. */ onChange?: (value: DateType) => void; /** * Callback executed on the partial mouse down event. */ onMouseDown?: React.MouseEventHandler; /** * Callback when ok button is clicked. */ onOk?: (date: DateType) => void; /** * Callback when partial is changed. */ onPartialChange?: OnPartialChange; /** * Callback executes on partial select event. */ onSelect?: (value: DateType) => void; /** * The default picker date. */ pickerValue?: DateType; /** * Renders extra footer in the partial. */ renderExtraFooter?: (mode: PartialMode) => React.ReactNode; /** * The partial shape. */ shape?: DatePickerShape | Shape; /** * The partial size. */ size?: DatePickerSize | Size; /** * The partial style. */ style?: React.CSSProperties; /** * The partial tab index. */ tabIndex?: number; /** * The 'Today' text string. * @default 'Today' */ todayText?: string; /** * The partial date value. */ value?: DateType | null; /** * @private Internal usage only. * Do not use in production. */ components?: Components; /** * @private Internal usage only. * Do not use in production. */ hideHeader?: boolean; /** * @private Internal usage only. * Do not use in production. */ onPickerValueChange?: (date: DateType) => void; /** * The partial is visible. */ visible?: boolean; /** * The partial is trapped. */ trap?: boolean; /** * Announces arrow key navigation instructions when the picker opens. * When true, uses default locale text. When string, uses custom message. * @default false */ announceArrowKeyNavigation?: boolean | string; /** * The listbox ID for time picker accessibility. */ listboxId?: string; }; export declare type OcPickerPartialBaseProps = { picker: Exclude; } & OcPickerPartialSharedProps; export declare type OcPickerPartialDateProps = { /** * Specify time that may not be selected. */ disabledTime?: DisabledTime; /** * The 'Now' button props. */ nowButtonProps?: ButtonProps; /** * The 'OK' button props. */ okButtonProps?: ButtonProps; /** * The picker type. * @default date */ picker?: 'date'; /** * Show the 'Now' button in partial when `showTime` is set. * @default true */ showNow?: boolean; /** * Show the 'OK' button in partial when `showTime` is set. * @default false */ showOk?: boolean; /** * Enables time selection partial. */ showTime?: boolean | SharedTimeProps; /** * Show the `Today` button. */ showToday?: boolean; /** * The 'Today' button props. */ todayButtonProps?: ButtonProps; /** * The current day appears to be active. * @default true */ todayActive?: boolean; } & OcPickerPartialSharedProps; export declare type OcPickerPartialTimeProps = { /** * The picker type. * @default time */ picker: 'time'; } & OcPickerPartialSharedProps & SharedTimeProps; export declare type OcPickerPartialProps = OcPickerPartialBaseProps | OcPickerPartialDateProps | OcPickerPartialTimeProps; export declare type OcPickerRefConfig = { /** * Remove focus. */ blur: () => void; /** * Get focus. */ focus: () => void; }; export declare type OcPickerSharedProps = { /** * add focustrap on date picker. * @default false */ trapFocus?: boolean; /** * Show the clear button. * @default true */ allowClear?: boolean; /** * Configure how to provide automated assistance in filling out form field values. * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete * @default 'off' */ autoComplete?: string; /** * Place focus on Picker when component renders. * @default false */ autoFocus?: boolean; /** * Announces arrow key navigation instructions when the picker opens. * When true, uses default locale text. When string, uses custom message. * @default false */ announceArrowKeyNavigation?: boolean | string; /** * Determines if the picker has a border style. */ bordered?: boolean; /** * Triggers the `onChange` event on blur. * @default true */ changeOnBlur?: boolean; /** * The clear icon 'Clear' aria label text string. * @default 'Clear' */ clearIconAriaLabelText?: string; /** * Custom clear icon. */ clearIcon?: React.ReactNode; /** * Configure how contextual props are consumed. */ configContextProps?: ConfigContextProps; /** * The picker is open by default. */ defaultOpen?: boolean; /** * The html canvas direction of the picker. */ direction?: 'ltr' | 'rtl'; /** * The DatePicker disabled state. * @default false */ disabled?: boolean; /** * Specify time that may not be selected. */ disabledTime?: (date: EventValue, type: RangeType) => DisabledTimes; /** * Custom classnames of the dropdown. */ dropdownClassNames?: string; /** * The dropdown alignment. */ dropdownAlign?: AlignType; /** * To set the date format, refer to either * https://momentjs.com/docs/#/parsing/special-formats/ * or * https://day.js.org/docs/en/plugin/custom-parse-format * When an array is provided, all values are used for parsing and first value is used for formatting. */ format?: string | CustomFormat | (string | CustomFormat)[]; /** * The picker is a form item. * @default false */ formItemInput?: boolean; /** * Gets the container of the surface UI. * The default is a div element child of body */ getPopupContainer?: (node: HTMLElement) => HTMLElement; /** * The picker id. */ id?: string; /** * The hidden label text for accessibility. * When provided, a visually hidden label will be associated with the input. */ label?: string; /** * Make input readOnly to avoid popup keyboard in mobile. */ inputReadOnly?: boolean; /** * The input render method. */ inputRender?: (props: React.InputHTMLAttributes) => React.ReactNode; /** * The picker aria name. */ name?: string; /** * The custom next icon. */ nextIcon?: IconName; /** * The 'Now' button props. */ nowButtonProps?: ButtonProps; /** * The 'Now' text string. * @default 'Now' */ nowText?: string; /** * The 'OK' button props. */ okButtonProps?: ButtonProps; /** * The 'OK' text string. * @default 'OK' */ okText?: string; /** * Callback executes on picker blur event. */ onBlur?: React.FocusEventHandler; /** * Callback executed when the selected time is changing. */ onChange?: (value: DateType | null, dateString: string) => void; /** * Callback executes on picker click event. */ onClick?: React.MouseEventHandler; /** * Callback executes on picker contextual menu event. */ onContextMenu?: React.MouseEventHandler; /** * Callback executes on picker focus event. */ onFocus?: React.FocusEventHandler; /** * Callback executes on picker key down event. */ onKeyDown?: (event: React.KeyboardEvent, preventDefault: () => void) => void; /** * Callback executes on picker mouse down event. */ onMouseDown?: React.MouseEventHandler; /** * Callback executes on picker mouse enter event. */ onMouseEnter?: React.MouseEventHandler; /** * Callback executes on picker mouse leave event. */ onMouseLeave?: React.MouseEventHandler; /** * Callback executes on picker mouse up event. */ onMouseUp?: React.MouseEventHandler; /** * Callback when the popup calendar is opened or closed. */ onOpenChange?: (open: boolean) => void; /** * The open state of the picker. */ open?: boolean; /** * Custom partial render. */ partialRender?: (originPartial: React.ReactNode) => React.ReactNode; /** * The placeholder text of the input. */ placeholder?: string; /** * The picker dropdown placement. */ popupPlacement?: DataPickerPlacement; /** * The popup style. */ popupStyle?: React.CSSProperties; /** * The custom previous icon. */ prevIcon?: IconName; /** * The picker is readonly. * @default false */ readonly?: boolean; /** * The custom readonly icon. */ readonlyIcon?: React.ReactNode; /** * The picker aria role. */ role?: string; /** * The picker shape. */ shape?: DatePickerShape | Shape; /** * Show the 'Now' button in partial when `showTime` is set. * @default true */ showNow?: boolean; /** * Show the 'OK' button * @default true */ showOk?: boolean; /** * Show the `Today` button. */ showToday?: boolean; /** * The picker size. */ size?: DatePickerSize | Size; /** * The custom suffix icon. */ suffixIcon?: React.ReactNode; /** * The custom super next icon. */ superNextIcon?: IconName; /** * The custom super prev icon. */ superPrevIcon?: IconName; /** * The picker tab index. */ tabIndex?: number; /** * The 'Today' button props. */ todayButtonProps?: ButtonProps; /** * The current day appears to be active. * @default true */ todayActive?: boolean; /** * The 'Today' text string. * @default 'Today' */ todayText?: string; /** * @private Internal usage, do not use in production. */ pickerRef?: React.MutableRefObject; } & React.AriaAttributes; declare type OmitPartialProps = Omit; export declare type OcPickerBaseProps = {} & OcPickerSharedProps & OmitPartialProps>; export declare type OcPickerDateProps = {} & OcPickerSharedProps & OmitPartialProps>; export declare type OcPickerTimeProps = { /** * The picker type. * @default time */ picker: 'time'; } & OcPickerSharedProps & Omit>, 'format'>; export declare type OcPickerProps = OcPickerBaseProps | OcPickerDateProps | OcPickerTimeProps; declare type OmitPickerProps = Omit; declare type RangeShowTimeObject = Omit, 'defaultValue'> & { /** * The default date. */ defaultValue?: DateType[]; }; export declare type RangeType = 'start' | 'end'; export declare type RangeInfo = { /** * The type of range * may be `start` or `end`. */ range: RangeType; }; export declare type RangeDateRender = ( /** * The current date. */ currentDate: DateType, /** * Today's date. */ today: DateType, /** * The type of range. */ info: RangeInfo) => React.ReactNode; export declare type OcRangePickerSharedProps = { /** * Allow start or end input leave empty. */ allowEmpty?: [boolean, boolean]; /** * Configure how to provide automated assistance in filling out form field values. * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete * @default 'off' */ autoComplete?: string; /** * Triggers the `onChange` event on blur. * @default true */ changeOnBlur?: boolean; /** * Custom rendering function for date cells. */ dateRender?: RangeDateRender; /** * When enabled, if the user enters an invalid date, focus remains on the input * allowing them to correct it. Only applies to date pickers without time. * @default false */ retainFocusOnInvalidDate?: boolean; /** * The default date. */ defaultValue?: RangeValue; /** * The default range picker date. */ defaultPickerValue?: [DateType, DateType]; /** * The html canvas direction of the range picker. */ direction?: 'ltr' | 'rtl'; /** * The range picker disabled state. * @default false */ disabled?: boolean | [boolean, boolean]; /** * Specify time that may not be selected. */ disabledTime?: (date: EventValue, type: RangeType) => DisabledTimes; /** * The range picker id */ id?: string; /** * The picker partial mode. */ mode?: [PartialMode, PartialMode]; /** * The 'Now' button props. */ nowButtonProps?: ButtonProps; /** * Callback executes on range picker blur event. */ onBlur?: React.FocusEventHandler; /** * Callback executed when the start time or the end time of the range is changing. */ onCalendarChange?: (values: RangeValue, formatString: [string, string], info: RangeInfo) => void; /** * Callback executed when the selected time is changing. */ onChange?: (values: RangeValue, formatString: [string, string]) => void; /** * Callback executes on range picker click event. */ onClick?: React.MouseEventHandler; /** * Callback executes on range picker focus event. */ onFocus?: React.FocusEventHandler; /** * Callback executes on range picker mouse down event. */ onMouseDown?: React.MouseEventHandler; /** * Callback executes on range picker mouse enter event. */ onMouseEnter?: React.MouseEventHandler; /** * Callback executes on range picker mouse leave event. */ onMouseLeave?: React.MouseEventHandler; /** * Callback executes on range picker mouse up event. */ onMouseUp?: React.MouseEventHandler; /** * Callback when ok button is clicked. */ onOk?: (dates: RangeValue) => void; /** * Callback when partial is changed. */ onPartialChange?: (values: RangeValue, modes: [PartialMode, PartialMode]) => void; /** * The 'OK' button props. */ okButtonProps?: ButtonProps; partialRender?: (originPartial: React.ReactNode) => React.ReactNode; /** * The placeholder text of the range inputs. */ placeholder?: [string, string]; /** * The range picker dropdown placement. */ popupPlacement?: DataPickerPlacement; /** * The preset ranges for quick selection. */ ranges?: Record, null> | (() => Exclude, null>)>; /** * The range picker is readonly. * @default false */ readonly?: boolean | [boolean, boolean]; /** * Custom separator between inputs. */ separator?: React.ReactNode; /** * The range picker shape. */ shape?: DatePickerShape | Shape; /** * Show the 'Now' button in partial when `showTime` is set. * @default true */ showNow?: boolean; /** * Show the 'OK' button * @default true */ showOk?: boolean; /** * The range picker size. */ size?: DatePickerSize | Size; /** * Enables time selection partial. */ showTime?: any; /** * Show the `Today` button. */ showToday?: boolean; /** * The 'Today' button props. */ todayButtonProps?: ButtonProps; /** * The current day appears to be active. * @default true */ todayActive?: boolean; /** * The date range value. */ value?: RangeValue; /** * @private Internal control of active picker * Do not use in prod */ activePickerIndex?: 0 | 1; }; export declare type OcRangePickerBaseProps = {} & OcRangePickerSharedProps & OmitPickerProps>; export declare type OcRangePickerDateProps = { /** * Enables time selection partial. */ showTime?: boolean | RangeShowTimeObject; } & OcRangePickerSharedProps & OmitPickerProps>; export declare type OcRangePickerTimeProps = { /** * Re-order values. */ order?: boolean; } & OcRangePickerSharedProps & OmitPickerProps>; export declare type OcRangePickerProps = OcRangePickerBaseProps | OcRangePickerDateProps | OcRangePickerTimeProps; export {};