import { ChangeEventHandler, InputHTMLAttributes, ReactElement } from 'react';
import { TextFieldProps } from '../TextField/internal/TextField';
import { DataTrackingId } from '../../types';
/**
* Props for InputMask when using with children
*/
interface InputMaskPropsWithChildren {
/**
* Custom input element to be wrapped with mask functionality.
*/
children: ReactElement>;
/**
* Additional props to pass to the input element.
*/
inputProps?: InputHTMLAttributes;
}
/**
* Props for InputMask when using without children
*/
interface InputMaskPropsWithoutChildren {
/**
* No children allowed when using default TextField.
*/
children?: never;
/**
* Props to pass to the default TextField component.
*/
inputProps?: TextFieldProps;
}
/**
* Configuration for custom mask handler matching
*/
interface ICustomMaskHandlerMatch {
/**
* Regular expression pattern to match against input.
*/
matchPattern: RegExp;
/**
* Starting position in the input string.
*/
startPosition: number;
/**
* Ending position in the input string.
*/
endPosition: number;
}
/**
* Configuration for custom mask handler application
*/
interface ICustomMaskHandlerApply {
/**
* Pattern to apply when match is found.
*/
applyPattern: string;
/**
* Offset to apply to cursor position after transformation.
*/
caretOffset: number;
}
/**
* Custom mask handler for advanced input transformations
*/
interface ICustomMaskHandler {
/**
* Matching configuration for the handler.
*/
match: ICustomMaskHandlerMatch;
/**
* Application configuration for the handler.
*/
apply: ICustomMaskHandlerApply;
}
/**
* Shared props for InputMask component
*/
interface SharedInputMaskProps {
/**
* The mask pattern to apply to the input.
* - "9" for digits only
* - "a" for letters only
* - "*" for alphanumeric
* - Any other character is treated as a fixed character
*/
mask: string;
/**
* Character to display for unfilled mask positions.
* @default "_"
*/
defaultMaskCharacter?: string;
/**
* Controlled value for the input.
*/
value?: string;
/**
* Default value for uncontrolled input.
*/
defaultValue?: string;
/**
* Callback function called when input value changes.
*/
onChange?: ChangeEventHandler;
/**
* Array of custom mask handlers for advanced transformations.
*/
customMaskHandler?: ICustomMaskHandler[];
}
/**
* Props for the InputMask component
* @property {string} mask - The mask pattern to apply to the input (9 for digits, a for letters, * for alphanumeric)
* @property {string} [defaultMaskCharacter] - Character to display for unfilled mask positions
* @property {array} [customMaskHandler] - Array of custom mask handlers for advanced transformations
* @property {object} [inputProps] - Props to pass to the input component
* @property {ReactElement} [children] - Custom input element to be wrapped with mask functionality
* @property {string} [data-tracking-id] - Custom tracking ID for analytics
*/
export type InputMaskProps = SharedInputMaskProps & (InputMaskPropsWithChildren | InputMaskPropsWithoutChildren) & DataTrackingId;
/**
* InputMask component for applying input masks and formatting to text inputs.
*
* @deprecated Use the TextField component with custom masking instead. Over time, we intend to release additional components with built-in masking.
*/
export declare const InputMask: import('react').ForwardRefExoticComponent>;
export {};