@rjsf/mui/lib/TitleField/TitleField.js

Material UI 7 theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { getUiOptions, } from '@rjsf/utils';
import { computeSxProps, getMuiProps } from '../util.js';
/** The `TitleField` is the template to use to render the title of a field
 *
 * @param props - The `TitleFieldProps` for this component
 */
export default function TitleField(props) {
    const { id, title, optionalDataControl, uiSchema } = props;
    const uiOptions = getUiOptions(uiSchema);
    const { rjsfSlotProps: { titleBox, titleDivider, titleTypography, titleGridContainer, titleGridItem, titleOptionalDataGridItem, } = {}, } = getMuiProps(uiOptions);
    let heading = (_jsx(Typography, { variant: 'h5', ...titleTypography, children: title }));
    if (optionalDataControl) {
        heading = (_jsxs(Grid, { container: true, spacing: 0, ...titleGridContainer, children: [_jsx(Grid, { size: 'grow', ...titleGridItem, children: heading }), _jsx(Grid, { ...titleOptionalDataGridItem, sx: computeSxProps({ justifyContent: 'flex-end' }, titleOptionalDataGridItem), children: optionalDataControl })] }));
    }
    return (_jsxs(Box, { id: id, ...titleBox, sx: computeSxProps({ mb: 1, mt: 1 }, titleBox), children: [heading, _jsx(Divider, { ...titleDivider })] }));
}
//# sourceMappingURL=TitleField.js.map