import React from "react"; import { MarginProps } from "styled-system"; import { TagProps } from "../../__internal__/utils/helpers/tags"; import { ValidationProps } from "../../__internal__/validations"; declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["yyyy", "mm", "dd"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]]; export interface NumeralDateValue { dd?: string; mm?: string; yyyy?: string; } export interface NumeralDateEvent { target: { name?: string; id: string; value: NumeralDateValue; }; } export interface DateInputIds { day?: string; month?: string; year?: string; } export interface NumeralDateProps extends Pick, MarginProps, TagProps { /** * @deprecated `adaptiveLabelBreakpoint` has been deprecated. * It is recommended to use `useMediaQuery` hook to implement adaptive behaviour. * Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set **/ adaptiveLabelBreakpoint?: number; /** If true, the component will be disabled */ disabled?: boolean; /** If true, the component will be read-only */ readOnly?: boolean; /** Array of strings to define custom input layout. */ dateFormat?: ValidDateFormat; /** Value */ value: NumeralDateValue; /** When true, enables the internal errors to be displayed */ enableInternalError?: boolean; /** * When true, enables the internal warnings to be displayed * @deprecated The `enableInternalWarning` prop is deprecated and will be removed in a future release. **/ enableInternalWarning?: boolean; /** * [Legacy] Help content to be displayed under an input * @deprecated The `fieldHelp` prop is deprecated and will be removed in a future release. Please use the `legendHint` prop instead. * */ fieldHelp?: React.ReactNode; /** Content for the hint text below the legend. */ legendHint?: string; /** `id` for events */ id?: string; /** `name` for events */ name?: string; /** * [Legacy] The content for the component's label * @deprecated The `label` prop is deprecated and will be removed in a future release. Please use the `legend` prop instead. * */ label?: string; /** The content for the component's legend */ legend?: string; /** * [Legacy] Text alignment of label * @deprecated Custom label alignment is no longer supported on this component. * */ labelAlign?: "left" | "right"; /** * Field labels alignment * @deprecated Custom field help alignment is no longer supported on this component. * */ fieldLabelsAlign?: "left" | "right"; /** * [Legacy] Text applied to label help tooltip, will be rendered as hint text when `validationRedesignOptIn` is true. * @deprecated The `labelHelp` prop is deprecated and will be removed in a future release. */ labelHelp?: React.ReactNode; /** * [Legacy] When true, label is placed in line with an input * @deprecated Inline labels are no longer supported on this component. * */ labelInline?: boolean; /** * [Legacy] Label width * @deprecated Custom label widths are no longer supported on this component. * */ labelWidth?: number; /** * [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) * @deprecated Custom label spacing is no longer supported on this component * */ labelSpacing?: 1 | 2; /** Blur event handler */ onBlur?: (ev: NumeralDateEvent) => void; /** Change event handler */ onChange: (ev: NumeralDateEvent) => void; /** Flag to configure component as mandatory */ required?: boolean; /** Size of an input */ size?: "small" | "medium" | "large"; /** * [Legacy] When true, validation icons will be placed on labels instead of being placed on the inputs * @deprecated Custom validation icon placement is no longer supported on this component. * */ validationOnLabel?: boolean; /** * [Legacy] Overrides the default tooltip position * @deprecated Tooltips are no longer supported on this component. * */ tooltipPosition?: "top" | "bottom" | "left" | "right"; /** * [Legacy] Aria label for rendered help component * @deprecated Custom help component ARIA labelling is no longer supported on this component, * */ helpAriaLabel?: string; /** * A React ref to pass to the input corresponding to the day */ dayRef?: React.ForwardedRef; /** * A React ref to pass to the input corresponding to the month */ monthRef?: React.ForwardedRef; /** * A React ref to pass to the input corresponding to the year */ yearRef?: React.ForwardedRef; /** Render the ValidationMessage above the NumeralDate inputs. */ validationMessagePositionTop?: boolean; /** Allow consumers to set IDs for each of the field inputs */ inputIds?: DateInputIds; /** * [Legacy] Indicate additional information. * @deprecated Information validation is no longer supported on this component. */ info?: string | boolean; /** * Indicate warning information. * @deprecated Warning validation is deprecated and will be removed in a future release. */ warning?: string | boolean; } export type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number]; export type NumeralDateHandle = { focus: () => void; } | null; export declare const NumeralDate: React.ForwardRefExoticComponent>; export default NumeralDate;