@rws-aoa/react-library
Version:
RWS AOA Design System
120 lines • 4.05 kB
TypeScript
import { SxProps, Theme } from '@mui/material';
/**
* Props for {@link AoaNoLabelNumberField}.
*
* @remarks This interface defines the configurable aspects of the number field that is designed
* to be paired with another field under a single label ("double label" pattern). Each prop maps to
* a specific behavior or visual customization of the underlying MUI {@link TextField}.
*/
export interface AoaNoLabelNumberFieldProps {
/**
* Base QA / testing identifier. The component appends `-field` when applying it to the DOM as `data-qa`.
*
* @remarks Used for automated testing hooks.
*/
readonly 'data-qa'?: string;
/**
* The id and name assigned to the input element.
*
* @remarks Must be unique within the form scope so that form state tracking works correctly.
*/
readonly fieldId: string;
/**
* Disables the input when true.
*
* @defaultValue false
*/
readonly isDisabled?: boolean;
/**
* Maximum number of digits the user can enter.
*
* @remarks Also used to compute the numeric max as `Number('9'.repeat(maxLength))`.
*/
readonly maxLength: number;
/**
* Optional callback invoked before updating the field value on change.
*
* @remarks Can be used to reset related field values when one side of a range changes.
*/
readonly resetValues?: CallableFunction;
/**
* Numeric step applied to the number input.
*
* @remarks Passed directly to the underlying input `step` attribute.
*/
readonly step?: number;
/**
* Style overrides merged with the component's default styling for the root and input states.
*
* @see {@link SxProps}
*/
readonly sx?: SxProps<Theme>;
/**
* Optional tooltip text. When provided, wraps the field in an {@link AoaTooltip}.
*/
readonly tooltip?: string;
}
/**
* This is a custom number field to allow for input fields that have one label with multiple fields.
*
* This component cannot be used without a proper wrapper around it. Please refer to the example below of how to properly use this component.
*
* @example
* ```tsx
* <Grid>
* <InputLabel>My label</InputLabel>
* <Grid container direction="column">
* <Grid alignItems="center" container direction="row">
* <form.AppField name="firstField">
* {() => (
* <AoaNoLabelNumberField
* dataQa="first-field"
* fieldId="first-field"
* maxLength={5}
* sx={{ width: 100 }}
* />
* )}
* </form.AppField>
* <Box sx={{ mx: 1 }}> / </Box>
* <form.AppField name="secondField">
* {() => (
* <AoaNoLabelNumberField
* dataQa="second-field"
* fieldId="second-field"
* maxLength={5}
* sx={{ width: 100 }}
* />
* )}
* </form.AppField>
* </Grid>
* <form.Subscribe
* selector={(state) => [
* state.fieldMeta.firstField,
* state.fieldMeta.secondField,
* ]}
* >
* {([firstField, secondField]) => {
* const hasFromError =
* firstField?.isTouched && Boolean(firstField?.errors?.length);
* const hasToError =
* secondField?.isTouched && Boolean(secondField?.errors?.length);
*
* if (hasFromError || hasToError) {
* return (
* <AoaNotification
* data-qa="first-second-field-error"
* message="Please correct the errors in the fields above."
* severity="error"
* />
* );
* }
*
* return null;
* }}
* </form.Subscribe>
* </Grid>
* </Grid>;
* ```
*/
export declare function AoaNoLabelNumberField<TData>({ 'data-qa': dataQa, fieldId, isDisabled, maxLength, resetValues, step, sx, tooltip }: AoaNoLabelNumberFieldProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=NoLabelNumberField.d.ts.map