UNPKG

3.7 kBTypeScriptView Raw
1import * as React from 'react';
2import { Simplify } from '@mui/types';
3import { PolymorphicProps, SlotComponentProps } from '../utils';
4export type NativeFormControlElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
5export interface FormControlRootSlotPropsOverrides {
6}
7export interface FormControlOwnProps {
8 /**
9 * The content of the component.
10 */
11 children?: React.ReactNode | ((state: FormControlState) => React.ReactNode);
12 /**
13 * Class name applied to the root element.
14 */
15 className?: string;
16 defaultValue?: unknown;
17 /**
18 * If `true`, the label, input and helper text should be displayed in a disabled state.
19 * @default false
20 */
21 disabled?: boolean;
22 /**
23 * If `true`, the label is displayed in an error state.
24 * @default false
25 */
26 error?: boolean;
27 /**
28 * Callback fired when the form element's value is modified.
29 */
30 onChange?: React.ChangeEventHandler<NativeFormControlElement>;
31 /**
32 * If `true`, the label will indicate that the `input` is required.
33 * @default false
34 */
35 required?: boolean;
36 /**
37 * The props used for each slot inside the FormControl.
38 * @default {}
39 */
40 slotProps?: {
41 root?: SlotComponentProps<'div', FormControlRootSlotPropsOverrides, FormControlOwnerState>;
42 };
43 /**
44 * The components used for each slot inside the FormControl.
45 * Either a string to use a HTML element or a component.
46 * @default {}
47 */
48 slots?: FormControlSlots;
49 /**
50 * The value of the form element.
51 */
52 value?: unknown;
53}
54export interface FormControlSlots {
55 /**
56 * The component that renders the root.
57 * @default 'div'
58 */
59 root?: React.ElementType;
60}
61export interface FormControlTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'div'> {
62 props: FormControlOwnProps & AdditionalProps;
63 defaultComponent: RootComponentType;
64}
65export type FormControlProps<RootComponentType extends React.ElementType = FormControlTypeMap['defaultComponent']> = PolymorphicProps<FormControlTypeMap<{}, RootComponentType>, RootComponentType>;
66type NonOptionalOwnerState = 'disabled' | 'error' | 'required';
67export type FormControlOwnerState = Simplify<Omit<FormControlOwnProps, NonOptionalOwnerState> & Required<Pick<FormControlProps, NonOptionalOwnerState>> & {
68 filled: boolean;
69 focused: boolean;
70}>;
71export type FormControlState = {
72 /**
73 * If `true`, the label, input and helper text should be displayed in a disabled state.
74 */
75 disabled: boolean;
76 /**
77 * If `true`, the label is displayed in an error state.
78 */
79 error: boolean;
80 /**
81 * If `true`, the form element has some value.
82 */
83 filled: boolean;
84 /**
85 * If `true`, the form element is focused and not disabled.
86 */
87 focused: boolean;
88 /**
89 * Callback fired when the form element has lost focus.
90 */
91 onBlur: () => void;
92 /**
93 * Callback fired when the form element's value is modified.
94 */
95 onChange: React.ChangeEventHandler<NativeFormControlElement>;
96 /**
97 * Callback fired when the form element receives focus.
98 */
99 onFocus: () => void;
100 /**
101 * If `true`, the label will indicate that the `input` is required.
102 */
103 required: boolean;
104 /**
105 * The value of the form element.
106 */
107 value: unknown;
108};
109export type FormControlRootSlotProps = {
110 children: React.ReactNode | ((state: FormControlState) => React.ReactNode);
111 className?: string;
112 ownerState: FormControlOwnerState;
113};
114export interface UseFormControlContextReturnValue extends FormControlState {
115}
116export {};
117
\No newline at end of file