@rjsf/mui
Version:
Material UI 7 theme, fields and widgets for react-jsonschema-form
1,391 lines (1,360 loc) • 44 kB
JavaScript
// src/MuiForm/MuiForm.tsx
import { withTheme } from "@rjsf/core";
// src/AddButton/AddButton.tsx
import AddIcon from "@mui/icons-material/Add";
import IconButton from "@mui/material/IconButton";
import {
getUiOptions,
TranslatableString
} from "@rjsf/utils";
// src/util.ts
function getMuiProps(options, propsToFilter, rjsfSlotPropsOnly) {
const muiProps = options?.mui || {};
if (rjsfSlotPropsOnly) {
const { rjsfSlotProps } = muiProps;
return { rjsfSlotProps };
}
if (propsToFilter) {
return Object.keys(muiProps).filter((key) => propsToFilter.includes(key)).reduce((obj, key) => {
obj[key] = muiProps[key];
return obj;
}, {});
}
return muiProps;
}
function computeSxProps(sxProps, muiProps) {
if (!muiProps) {
return sxProps;
}
if (Array.isArray(muiProps?.sx)) {
return [sxProps, ...muiProps.sx];
}
return { ...sxProps, ...muiProps?.sx };
}
// src/AddButton/AddButton.tsx
import { jsx } from "react/jsx-runtime";
function AddButton({
uiSchema,
registry,
...props
}) {
const { translateString } = registry;
const uiOptions = getUiOptions(uiSchema);
const muiProps = getMuiProps(uiOptions, [
"color",
"disableFocusRipple",
"disableRipple",
"edge",
"size",
"sx"
]);
return /* @__PURE__ */ jsx(IconButton, { title: translateString(TranslatableString.AddItemButton), ...props, color: "primary", ...muiProps, children: /* @__PURE__ */ jsx(AddIcon, {}) });
}
// src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import {
getUiOptions as getUiOptions2,
getTemplate
} from "@rjsf/utils";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
function ArrayFieldItemTemplate(props) {
const { children, buttonsProps, hasDescription, hasToolbar, uiSchema, registry } = props;
const uiOptions = getUiOptions2(uiSchema);
const ArrayFieldItemButtonsTemplate = getTemplate(
"ArrayFieldItemButtonsTemplate",
registry,
uiOptions
);
const btnStyle = {
flex: 1,
paddingLeft: 6,
paddingRight: 6,
fontWeight: "bold",
minWidth: 0
};
const {
rjsfSlotProps: {
arrayItemGridContainer,
arrayItemGridItem,
arrayItemInnerBox,
arrayItemOuterBox,
arrayItemPaper,
arrayItemToolbarGrid
} = {}
} = getMuiProps(uiOptions);
return /* @__PURE__ */ jsxs(
Grid,
{
container: true,
...arrayItemGridContainer,
sx: computeSxProps({ alignItems: "center" }, arrayItemGridContainer),
children: [
/* @__PURE__ */ jsx2(
Grid,
{
size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 },
...arrayItemGridItem,
sx: computeSxProps({ overflow: "auto" }, arrayItemGridItem),
children: /* @__PURE__ */ jsx2(Box, { ...arrayItemOuterBox, sx: computeSxProps({ mb: 2 }, arrayItemOuterBox), children: /* @__PURE__ */ jsx2(Paper, { elevation: 2, ...arrayItemPaper, children: /* @__PURE__ */ jsx2(Box, { ...arrayItemInnerBox, sx: computeSxProps({ p: 2 }, arrayItemInnerBox), children }) }) })
}
),
hasToolbar && /* @__PURE__ */ jsx2(
Grid,
{
...arrayItemToolbarGrid,
sx: computeSxProps({ mt: hasDescription ? -5 : -1.5 }, arrayItemToolbarGrid),
children: /* @__PURE__ */ jsx2(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle })
}
)
]
}
);
}
// src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
import Box2 from "@mui/material/Box";
import Grid2 from "@mui/material/Grid";
import Paper2 from "@mui/material/Paper";
import {
getTemplate as getTemplate2,
getUiOptions as getUiOptions3,
buttonId
} from "@rjsf/utils";
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
function ArrayFieldTemplate(props) {
const {
canAdd,
disabled,
fieldPathId,
uiSchema,
items,
optionalDataControl,
onAddClick,
readonly,
registry,
required,
schema,
title
} = props;
const uiOptions = getUiOptions3(uiSchema);
const ArrayFieldDescriptionTemplate = getTemplate2(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate = getTemplate2(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const showOptionalDataControlInTitle = !readonly && !disabled;
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
const {
rjsfSlotProps: {
arrayPaper,
arrayBox,
arrayAddButtonGridContainer,
arrayAddButtonGridItem,
arrayAddButtonBox
} = {}
} = getMuiProps(uiOptions);
return /* @__PURE__ */ jsx3(Paper2, { elevation: 2, ...arrayPaper, children: /* @__PURE__ */ jsxs2(Box2, { ...arrayBox, sx: computeSxProps({ p: 2 }, arrayBox), children: [
/* @__PURE__ */ jsx3(
ArrayFieldTitleTemplate,
{
fieldPathId,
title: uiOptions.title || title,
schema,
uiSchema,
required,
registry,
optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
}
),
/* @__PURE__ */ jsx3(
ArrayFieldDescriptionTemplate,
{
fieldPathId,
description: uiOptions.description || schema.description,
schema,
uiSchema,
registry
}
),
!showOptionalDataControlInTitle ? optionalDataControl : void 0,
items,
canAdd && /* @__PURE__ */ jsx3(
Grid2,
{
container: true,
...arrayAddButtonGridContainer,
sx: computeSxProps({ justifyContent: "flex-end" }, arrayAddButtonGridContainer),
children: /* @__PURE__ */ jsx3(Grid2, { ...arrayAddButtonGridItem, children: /* @__PURE__ */ jsx3(Box2, { ...arrayAddButtonBox, sx: computeSxProps({ mt: 2 }, arrayAddButtonBox), children: /* @__PURE__ */ jsx3(
AddButton2,
{
id: buttonId(fieldPathId, "add"),
className: "rjsf-array-item-add",
onClick: onAddClick,
disabled: disabled || readonly,
uiSchema,
registry
}
) }) })
}
)
] }) });
}
// src/BaseInputTemplate/BaseInputTemplate.tsx
import { useCallback } from "react";
import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
import {
ariaDescribedByIds,
examplesId,
getInputProps,
labelValue
} from "@rjsf/utils";
import { SchemaExamples } from "@rjsf/core";
import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var TYPES_THAT_SHRINK_LABEL = ["date", "datetime-local", "file", "time"];
function BaseInputTemplate(props) {
const {
id,
name,
// remove this from textFieldProps
htmlName,
placeholder,
required,
readonly,
disabled,
type,
label,
hideLabel,
hideError,
value,
onChange,
onChangeOverride,
onBlur,
onFocus,
autofocus,
options,
schema,
uiSchema,
rawErrors = [],
errorSchema,
registry,
InputLabelProps,
InputProps,
slotProps,
...textFieldProps
} = props;
const { ClearButton: ClearButton2 } = registry.templates.ButtonTemplates;
const { step, min, max, accept, ...rest } = getInputProps(schema, type, options);
const muiProps = getMuiProps(options);
const { slotProps: muiSlotProps, ...otherMuiProps } = muiProps;
const htmlInputProps = {
...slotProps?.htmlInput,
...muiSlotProps?.htmlInput,
step,
min,
max,
accept,
...schema.examples ? { list: examplesId(id) } : void 0
};
const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
const _onBlur = ({ target }) => onBlur(id, target && target.value);
const _onFocus = ({ target }) => onFocus(id, target && target.value);
const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? { ...slotProps?.inputLabel, ...muiSlotProps?.inputLabel, ...InputLabelProps, shrink: true } : { ...slotProps?.inputLabel, ...muiSlotProps?.inputLabel, ...InputLabelProps };
const _onClear = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
onChange(options.emptyValue ?? "");
},
[onChange, options.emptyValue]
);
const inputProps = { ...InputProps, ...slotProps?.input, ...muiSlotProps?.input };
if (options.allowClearTextInputs && value && !readonly && !disabled) {
const clearAdornment = /* @__PURE__ */ jsx4(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx4(ClearButton2, { registry, onClick: _onClear }) });
inputProps.endAdornment = !inputProps.endAdornment ? clearAdornment : /* @__PURE__ */ jsxs3(Fragment, { children: [
inputProps.endAdornment,
clearAdornment
] });
}
return /* @__PURE__ */ jsxs3(Fragment, { children: [
/* @__PURE__ */ jsx4(
TextField,
{
id,
name: htmlName || id,
placeholder,
label: labelValue(label || void 0, hideLabel, void 0),
autoFocus: autofocus,
required,
disabled: disabled || readonly,
slotProps: {
...slotProps,
...muiSlotProps,
input: inputProps,
htmlInput: htmlInputProps,
inputLabel: DisplayInputLabelProps
},
...rest,
value: value || value === 0 ? value : "",
error: rawErrors.length > 0,
onChange: onChangeOverride || _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
...{ ...otherMuiProps, ...textFieldProps },
"aria-describedby": ariaDescribedByIds(id, !!schema.examples)
}
),
/* @__PURE__ */ jsx4(SchemaExamples, { id, schema })
] });
}
// src/DescriptionField/DescriptionField.tsx
import Typography from "@mui/material/Typography";
import {
getUiOptions as getUiOptions4
} from "@rjsf/utils";
import { RichDescription } from "@rjsf/core";
import { jsx as jsx5 } from "react/jsx-runtime";
function DescriptionField(props) {
const { id, description, registry, uiSchema } = props;
const uiOptions = getUiOptions4(uiSchema);
const { rjsfSlotProps: { descTypography } = {} } = getMuiProps(uiOptions);
if (description) {
return /* @__PURE__ */ jsx5(
Typography,
{
id,
variant: "subtitle2",
...descTypography,
sx: computeSxProps({ mt: 0.625 }, descTypography),
children: /* @__PURE__ */ jsx5(RichDescription, { description, registry, uiSchema })
}
);
}
return null;
}
// src/ErrorList/ErrorList.tsx
import ErrorIcon from "@mui/icons-material/Error";
import Box3 from "@mui/material/Box";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Paper3 from "@mui/material/Paper";
import Typography2 from "@mui/material/Typography";
import {
TranslatableString as TranslatableString2,
getUiOptions as getUiOptions5
} from "@rjsf/utils";
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
function ErrorList({
errors,
registry,
uiSchema
}) {
const { translateString } = registry;
const uiOptions = getUiOptions5(uiSchema);
const {
rjsfSlotProps: {
errorPaper,
errorBox,
errorTypography,
errorList,
errorListItem,
errorListItemIcon,
errorListItemText
} = {}
} = getMuiProps(uiOptions);
return /* @__PURE__ */ jsx6(Paper3, { elevation: 2, ...errorPaper, children: /* @__PURE__ */ jsxs4(Box3, { ...errorBox, sx: computeSxProps({ mb: 2, p: 2 }, errorBox), children: [
/* @__PURE__ */ jsx6(Typography2, { variant: "h6", ...errorTypography, children: translateString(TranslatableString2.ErrorsLabel) }),
/* @__PURE__ */ jsx6(List, { dense: true, ...errorList, children: errors.map((error, i) => {
return /* @__PURE__ */ jsxs4(ListItem, { ...errorListItem, children: [
/* @__PURE__ */ jsx6(ListItemIcon, { ...errorListItemIcon, children: /* @__PURE__ */ jsx6(ErrorIcon, { color: "error" }) }),
/* @__PURE__ */ jsx6(ListItemText, { primary: error.stack, ...errorListItemText })
] }, i);
}) })
] }) });
}
// src/IconButton/IconButton.tsx
import IconButton2 from "@mui/material/IconButton";
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import CopyIcon from "@mui/icons-material/ContentCopy";
import RemoveIcon from "@mui/icons-material/Remove";
import ClearIcon from "@mui/icons-material/Clear";
import {
TranslatableString as TranslatableString3,
getUiOptions as getUiOptions6
} from "@rjsf/utils";
import { jsx as jsx7 } from "react/jsx-runtime";
function MuiIconButton(props) {
const { icon, color, uiSchema, registry, ...otherProps } = props;
const uiOptions = getUiOptions6(uiSchema);
const muiProps = getMuiProps(uiOptions, [
"color",
"disableFocusRipple",
"disableRipple",
"edge",
"size",
"sx"
]);
return /* @__PURE__ */ jsx7(IconButton2, { ...muiProps, ...otherProps, size: "small", color, children: icon });
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx7(
MuiIconButton,
{
title: translateString(TranslatableString3.CopyButton),
...props,
icon: /* @__PURE__ */ jsx7(CopyIcon, { fontSize: "small" })
}
);
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx7(
MuiIconButton,
{
title: translateString(TranslatableString3.MoveDownButton),
...props,
icon: /* @__PURE__ */ jsx7(ArrowDownwardIcon, { fontSize: "small" })
}
);
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx7(
MuiIconButton,
{
title: translateString(TranslatableString3.MoveUpButton),
...props,
icon: /* @__PURE__ */ jsx7(ArrowUpwardIcon, { fontSize: "small" })
}
);
}
function RemoveButton(props) {
const { iconType, ...otherProps } = props;
const {
registry: { translateString }
} = otherProps;
return /* @__PURE__ */ jsx7(
MuiIconButton,
{
title: translateString(TranslatableString3.RemoveButton),
...otherProps,
color: "error",
icon: /* @__PURE__ */ jsx7(RemoveIcon, { fontSize: iconType === "default" ? void 0 : "small" })
}
);
}
function ClearButton(props) {
const { iconType, ...otherProps } = props;
const {
registry: { translateString }
} = otherProps;
return /* @__PURE__ */ jsx7(
MuiIconButton,
{
title: translateString(TranslatableString3.ClearButton),
...otherProps,
icon: /* @__PURE__ */ jsx7(ClearIcon, { fontSize: iconType === "default" ? void 0 : "small" })
}
);
}
// src/FieldErrorTemplate/FieldErrorTemplate.tsx
import ListItem2 from "@mui/material/ListItem";
import FormHelperText from "@mui/material/FormHelperText";
import List2 from "@mui/material/List";
import {
errorId,
getUiOptions as getUiOptions7
} from "@rjsf/utils";
import { jsx as jsx8 } from "react/jsx-runtime";
function FieldErrorTemplate(props) {
const { errors = [], fieldPathId, uiSchema } = props;
if (errors.length === 0) {
return null;
}
const id = errorId(fieldPathId);
const uiOptions = getUiOptions7(uiSchema);
const muiProps = getMuiProps(uiOptions);
const { rjsfSlotProps: muiSlotProps } = muiProps;
return /* @__PURE__ */ jsx8(List2, { id, dense: true, disablePadding: true, ...muiSlotProps?.fieldErrorList, children: errors.map((error, i) => {
return /* @__PURE__ */ jsx8(ListItem2, { disableGutters: true, ...muiSlotProps?.fieldErrorListItem, children: /* @__PURE__ */ jsx8(FormHelperText, { component: "div", id: `${id}-${i}`, ...muiSlotProps?.fieldErrorFormHelperText, children: error }) }, i);
}) });
}
// src/FieldHelpTemplate/FieldHelpTemplate.tsx
import { RichHelp } from "@rjsf/core";
import {
helpId,
getUiOptions as getUiOptions8
} from "@rjsf/utils";
import FormHelperText2 from "@mui/material/FormHelperText";
import { jsx as jsx9 } from "react/jsx-runtime";
function FieldHelpTemplate(props) {
const { fieldPathId, help, uiSchema, registry } = props;
if (!help) {
return null;
}
const uiOptions = getUiOptions8(uiSchema);
const { rjsfSlotProps: { helpFormHelperText } = {} } = getMuiProps(uiOptions);
return /* @__PURE__ */ jsx9(
FormHelperText2,
{
component: "div",
id: helpId(fieldPathId),
...helpFormHelperText,
sx: computeSxProps({ mt: 0.625 }, helpFormHelperText),
children: /* @__PURE__ */ jsx9(RichHelp, { help, registry, uiSchema })
}
);
}
// src/FieldTemplate/FieldTemplate.tsx
import FormControl from "@mui/material/FormControl";
import Typography3 from "@mui/material/Typography";
import {
getTemplate as getTemplate3,
getUiOptions as getUiOptions9
} from "@rjsf/utils";
import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
function FieldTemplate(props) {
const {
id,
children,
classNames,
style,
disabled,
displayLabel,
hidden,
label,
onKeyRename,
onKeyRenameBlur,
onRemoveProperty,
readonly,
required,
rawErrors = [],
errors,
help,
description,
rawDescription,
schema,
uiSchema,
registry
} = props;
const uiOptions = getUiOptions9(uiSchema);
const WrapIfAdditionalTemplate2 = getTemplate3(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ jsx10("div", { style: { display: "none" }, children });
}
const isCheckbox = uiOptions.widget === "checkbox";
const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(uiOptions);
return /* @__PURE__ */ jsx10(
WrapIfAdditionalTemplate2,
{
classNames,
style,
disabled,
id,
label,
displayLabel,
rawDescription,
onKeyRename,
onKeyRenameBlur,
onRemoveProperty,
readonly,
required,
schema,
uiSchema,
registry,
children: /* @__PURE__ */ jsxs5(
FormControl,
{
fullWidth: true,
error: rawErrors.length ? true : false,
required,
...muiSlotProps?.fieldFormControl,
sx: otherMuiProps.sx,
className: otherMuiProps.className,
children: [
children,
displayLabel && !isCheckbox && rawDescription ? /* @__PURE__ */ jsx10(Typography3, { variant: "caption", color: "textSecondary", ...muiSlotProps?.fieldTypography, children: description }) : null,
errors,
help
]
}
)
}
);
}
// src/GridTemplate/GridTemplate.tsx
import Grid3 from "@mui/material/Grid";
import { jsx as jsx11 } from "react/jsx-runtime";
function GridTemplate(props) {
const { children, column, ...rest } = props;
return /* @__PURE__ */ jsx11(Grid3, { container: !column, ...rest, children });
}
// src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
import Box4 from "@mui/material/Box";
import FormControl2 from "@mui/material/FormControl";
import {
getUiOptions as getUiOptions10
} from "@rjsf/utils";
import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
function MultiSchemaFieldTemplate(props) {
const { optionSchemaField, selector, uiSchema } = props;
const uiOptions = getUiOptions10(uiSchema);
const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
return /* @__PURE__ */ jsxs6(Box4, { sx: { mb: 2 }, ...muiSlotProps?.multiBox, children: [
/* @__PURE__ */ jsx12(FormControl2, { fullWidth: true, sx: { mb: 2 }, ...muiSlotProps?.multiFormControl, children: selector }),
optionSchemaField
] });
}
// src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
import Grid4 from "@mui/material/Grid";
import {
canExpand,
descriptionId,
getTemplate as getTemplate4,
getUiOptions as getUiOptions11,
titleId,
buttonId as buttonId2
} from "@rjsf/utils";
import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
function ObjectFieldTemplate(props) {
const {
description,
title,
properties,
required,
disabled,
readonly,
uiSchema,
fieldPathId,
schema,
formData,
optionalDataControl,
onAddProperty,
registry
} = props;
const uiOptions = getUiOptions11(uiSchema);
const TitleFieldTemplate = getTemplate4("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = getTemplate4(
"DescriptionFieldTemplate",
registry,
uiOptions
);
const showOptionalDataControlInTitle = !readonly && !disabled;
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
const {
rjsfSlotProps: { objectGridContainer, objectGridItem, objectAddButtonGridContainer, objectAddButtonGridItem } = {}
} = getMuiProps(uiOptions);
return /* @__PURE__ */ jsxs7(Fragment2, { children: [
title && /* @__PURE__ */ jsx13(
TitleFieldTemplate,
{
id: titleId(fieldPathId),
title,
required,
schema,
uiSchema,
registry,
optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
}
),
description && /* @__PURE__ */ jsx13(
DescriptionFieldTemplate,
{
id: descriptionId(fieldPathId),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxs7(
Grid4,
{
container: true,
spacing: 2,
...objectGridContainer,
sx: computeSxProps({ mt: 1.25 }, objectGridContainer),
children: [
!showOptionalDataControlInTitle ? optionalDataControl : void 0,
properties.map(
(element, index) => (
// Remove the <Grid> if the inner element is hidden as the <Grid>
// itself would otherwise still take up space.
element.hidden ? element.content : /* @__PURE__ */ jsx13(
Grid4,
{
size: { xs: 12 },
...objectGridItem,
sx: computeSxProps({ mb: 1.25 }, objectGridItem),
children: element.content
},
index
)
)
)
]
}
),
canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx13(
Grid4,
{
container: true,
...objectAddButtonGridContainer,
sx: computeSxProps({ justifyContent: "flex-end" }, objectAddButtonGridContainer),
children: /* @__PURE__ */ jsx13(Grid4, { ...objectAddButtonGridItem, children: /* @__PURE__ */ jsx13(
AddButton2,
{
id: buttonId2(fieldPathId, "add"),
className: "rjsf-object-property-expand",
onClick: onAddProperty,
disabled: disabled || readonly,
uiSchema,
registry
}
) })
}
)
] });
}
// src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
import AddIcon2 from "@mui/icons-material/Add";
import { jsx as jsx14 } from "react/jsx-runtime";
function OptionalDataControlsTemplate(props) {
const { id, registry, label, onAddClick, onRemoveClick, uiSchema } = props;
if (onAddClick) {
return /* @__PURE__ */ jsx14(
MuiIconButton,
{
id,
registry,
uiSchema,
className: "rjsf-add-optional-data",
onClick: onAddClick,
title: label,
icon: /* @__PURE__ */ jsx14(AddIcon2, { fontSize: "small" })
}
);
} else if (onRemoveClick) {
return /* @__PURE__ */ jsx14(
RemoveButton,
{
id,
registry,
uiSchema,
className: "rjsf-remove-optional-data",
onClick: onRemoveClick,
title: label
}
);
}
return /* @__PURE__ */ jsx14("em", { id, children: label });
}
// src/SubmitButton/SubmitButton.tsx
import Box5 from "@mui/material/Box";
import Button from "@mui/material/Button";
import {
getSubmitButtonOptions,
getUiOptions as getUiOptions12
} from "@rjsf/utils";
import { jsx as jsx15 } from "react/jsx-runtime";
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema);
if (norender) {
return null;
}
const uiOptions = getUiOptions12(uiSchema);
const { rjsfSlotProps: { submitBox, submitButton } = {}, ...otherMuiProps } = getMuiProps(uiOptions);
return /* @__PURE__ */ jsx15(Box5, { ...submitBox, sx: computeSxProps({ mt: 3 }, submitBox), children: /* @__PURE__ */ jsx15(
Button,
{
type: "submit",
variant: "contained",
color: "primary",
...submitButtonProps,
...otherMuiProps,
...submitButton,
children: submitText
}
) });
}
// src/TitleField/TitleField.tsx
import Box6 from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import Grid5 from "@mui/material/Grid";
import Typography4 from "@mui/material/Typography";
import {
getUiOptions as getUiOptions13
} from "@rjsf/utils";
import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
function TitleField(props) {
const { id, title, optionalDataControl, uiSchema } = props;
const uiOptions = getUiOptions13(uiSchema);
const {
rjsfSlotProps: {
titleBox,
titleDivider,
titleTypography,
titleGridContainer,
titleGridItem,
titleOptionalDataGridItem
} = {}
} = getMuiProps(uiOptions);
let heading = /* @__PURE__ */ jsx16(Typography4, { variant: "h5", ...titleTypography, children: title });
if (optionalDataControl) {
heading = /* @__PURE__ */ jsxs8(Grid5, { container: true, spacing: 0, ...titleGridContainer, children: [
/* @__PURE__ */ jsx16(Grid5, { size: "grow", ...titleGridItem, children: heading }),
/* @__PURE__ */ jsx16(
Grid5,
{
...titleOptionalDataGridItem,
sx: computeSxProps({ justifyContent: "flex-end" }, titleOptionalDataGridItem),
children: optionalDataControl
}
)
] });
}
return /* @__PURE__ */ jsxs8(Box6, { id, ...titleBox, sx: computeSxProps({ mb: 1, mt: 1 }, titleBox), children: [
heading,
/* @__PURE__ */ jsx16(Divider, { ...titleDivider })
] });
}
// src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
import Grid6 from "@mui/material/Grid";
import TextField2 from "@mui/material/TextField";
import {
ADDITIONAL_PROPERTY_FLAG,
buttonId as buttonId3,
TranslatableString as TranslatableString4,
getUiOptions as getUiOptions14
} from "@rjsf/utils";
import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
function WrapIfAdditionalTemplate(props) {
const {
children,
classNames,
style,
disabled,
id,
label,
displayLabel,
onKeyRenameBlur,
onRemoveProperty,
readonly,
required,
schema,
uiSchema,
registry
} = props;
const { templates, translateString } = registry;
const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
const additional = ADDITIONAL_PROPERTY_FLAG in schema;
const btnStyle = {
flex: 1,
paddingLeft: 6,
paddingRight: 6,
fontWeight: "bold"
};
const uiOptions = getUiOptions14(uiSchema);
const { rjsfSlotProps: { wrapGridContainer, wrapKeyGridItem, wrapChildrenGridItem, wrapRemoveButtonGridItem } = {} } = getMuiProps(uiOptions);
if (!additional) {
return /* @__PURE__ */ jsx17("div", { className: classNames, style, children });
}
return /* @__PURE__ */ jsxs9(
Grid6,
{
container: true,
spacing: 2,
className: classNames,
style,
...wrapGridContainer,
sx: computeSxProps({ alignItems: "flex-start" }, wrapGridContainer),
children: [
/* @__PURE__ */ jsx17(Grid6, { size: 5.5, ...wrapKeyGridItem, children: /* @__PURE__ */ jsx17(
TextField2,
{
fullWidth: true,
required,
label: displayLabel ? keyLabel : void 0,
defaultValue: label,
disabled: disabled || readonly,
id: `${id}-key`,
name: `${id}-key`,
onBlur: !readonly ? onKeyRenameBlur : void 0,
type: "text"
},
label
) }),
/* @__PURE__ */ jsx17(Grid6, { size: 5.5, ...wrapChildrenGridItem, children }),
/* @__PURE__ */ jsx17(Grid6, { ...wrapRemoveButtonGridItem, sx: computeSxProps({ mt: 1.5 }, wrapRemoveButtonGridItem), children: /* @__PURE__ */ jsx17(
RemoveButton2,
{
id: buttonId3(id, "remove"),
className: "rjsf-object-property-remove",
iconType: "default",
style: btnStyle,
disabled: disabled || readonly,
onClick: onRemoveProperty,
uiSchema,
registry
}
) })
]
},
`${id}-key`
);
}
// src/Templates/Templates.ts
function generateTemplates() {
return {
ArrayFieldItemTemplate,
ArrayFieldTemplate,
BaseInputTemplate,
ButtonTemplates: {
AddButton,
CopyButton,
MoveDownButton,
MoveUpButton,
RemoveButton,
SubmitButton,
ClearButton
},
DescriptionFieldTemplate: DescriptionField,
ErrorListTemplate: ErrorList,
FieldErrorTemplate,
FieldHelpTemplate,
FieldTemplate,
GridTemplate,
MultiSchemaFieldTemplate,
ObjectFieldTemplate,
OptionalDataControlsTemplate,
TitleFieldTemplate: TitleField,
WrapIfAdditionalTemplate
};
}
var Templates_default = generateTemplates();
// src/CheckboxWidget/CheckboxWidget.tsx
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
import {
ariaDescribedByIds as ariaDescribedByIds2,
descriptionId as descriptionId2,
getTemplate as getTemplate5,
labelValue as labelValue2,
schemaRequiresTrueValue
} from "@rjsf/utils";
import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
function CheckboxWidget(props) {
const {
schema,
id,
htmlName,
value,
disabled,
readonly,
label = "",
hideLabel,
autofocus,
onChange,
onBlur,
onFocus,
registry,
options,
uiSchema
} = props;
const DescriptionFieldTemplate = getTemplate5(
"DescriptionFieldTemplate",
registry,
options
);
const required = schemaRequiresTrueValue(schema);
const _onChange = (_, checked) => onChange(checked);
const _onBlur = () => onBlur(id, value);
const _onFocus = () => onFocus(id, value);
const description = options.description ?? schema.description;
const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
return /* @__PURE__ */ jsxs10(Fragment3, { children: [
!hideLabel && description && /* @__PURE__ */ jsx18(
DescriptionFieldTemplate,
{
id: descriptionId2(id),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsx18(
FormControlLabel,
{
...otherMuiProps,
...muiSlotProps?.formControlLabel,
control: /* @__PURE__ */ jsx18(
Checkbox,
{
id,
name: htmlName || id,
checked: typeof value === "undefined" ? false : Boolean(value),
required,
disabled: disabled || readonly,
autoFocus: autofocus,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": ariaDescribedByIds2(id),
...muiSlotProps?.checkbox
}
),
label: labelValue2(label, hideLabel, false)
}
)
] });
}
// src/CheckboxesWidget/CheckboxesWidget.tsx
import Checkbox2 from "@mui/material/Checkbox";
import FormControlLabel2 from "@mui/material/FormControlLabel";
import FormGroup from "@mui/material/FormGroup";
import FormLabel from "@mui/material/FormLabel";
import {
ariaDescribedByIds as ariaDescribedByIds3,
enumOptionValueDecoder,
enumOptionsDeselectValue,
enumOptionsIsSelected,
enumOptionsSelectValue,
getOptionValueFormat,
labelValue as labelValue3,
optionId
} from "@rjsf/utils";
import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
import { createElement } from "react";
function CheckboxesWidget(props) {
const {
label,
hideLabel,
id,
htmlName,
disabled,
options,
value,
autofocus,
readonly,
required,
onChange,
onBlur,
onFocus
} = props;
const { enumOptions, enumDisabled, inline, emptyValue } = options;
const optionValueFormat = getOptionValueFormat(options);
const checkboxesValues = Array.isArray(value) ? value : [value];
const _onChange = (index) => ({ target: { checked } }) => {
if (checked) {
onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
} else {
onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
}
};
const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
return /* @__PURE__ */ jsxs11(Fragment4, { children: [
labelValue3(
/* @__PURE__ */ jsx19(FormLabel, { required, htmlFor: id, children: label || void 0 }),
hideLabel
),
/* @__PURE__ */ jsx19(FormGroup, { ...otherMuiProps, ...muiSlotProps?.formGroup, id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const checked = enumOptionsIsSelected(option.value, checkboxesValues);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
const checkbox = /* @__PURE__ */ jsx19(
Checkbox2,
{
...muiSlotProps?.checkbox,
id: optionId(id, index),
name: htmlName || id,
checked,
disabled: disabled || itemDisabled || readonly,
autoFocus: autofocus && index === 0,
onChange: _onChange(index),
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": ariaDescribedByIds3(id)
}
);
return /* @__PURE__ */ createElement(
FormControlLabel2,
{
...muiSlotProps?.formControlLabel,
control: checkbox,
key: index,
label: option.label
}
);
}) })
] });
}
// src/RadioWidget/RadioWidget.tsx
import FormControlLabel3 from "@mui/material/FormControlLabel";
import FormLabel2 from "@mui/material/FormLabel";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import {
ariaDescribedByIds as ariaDescribedByIds4,
enumOptionSelectedValue,
enumOptionValueDecoder as enumOptionValueDecoder2,
enumOptionValueEncoder,
getOptionValueFormat as getOptionValueFormat2,
labelValue as labelValue4,
optionId as optionId2
} from "@rjsf/utils";
import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
import { createElement as createElement2 } from "react";
function RadioWidget(props) {
const { id, htmlName, options, value, required, disabled, readonly, label, hideLabel, onChange, onBlur, onFocus } = props;
const { enumOptions, enumDisabled, emptyValue } = options;
const optionValueFormat = getOptionValueFormat2(options);
const _onChange = (_, value2) => onChange(enumOptionValueDecoder2(value2, enumOptions, optionValueFormat, emptyValue));
const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
const row = options ? options.inline : false;
const selectValue = enumOptionSelectedValue(value, enumOptions, false, optionValueFormat, "");
const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
return /* @__PURE__ */ jsxs12(Fragment5, { children: [
labelValue4(
/* @__PURE__ */ jsx20(FormLabel2, { required, htmlFor: id, children: label || void 0 }),
hideLabel
),
/* @__PURE__ */ jsx20(
RadioGroup,
{
...otherMuiProps,
...muiSlotProps?.radioGroup,
id,
name: htmlName || id,
value: selectValue,
row,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": ariaDescribedByIds4(id),
children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
const radio = /* @__PURE__ */ createElement2(
FormControlLabel3,
{
...muiSlotProps?.formControlLabel,
control: /* @__PURE__ */ jsx20(Radio, { ...muiSlotProps?.radio, name: htmlName || id, id: optionId2(id, index), color: "primary" }),
label: option.label,
value: enumOptionValueEncoder(option.value, index, optionValueFormat),
key: index,
disabled: disabled || itemDisabled || readonly
}
);
return radio;
})
}
)
] });
}
// src/RangeWidget/RangeWidget.tsx
import FormLabel3 from "@mui/material/FormLabel";
import Slider from "@mui/material/Slider";
import {
ariaDescribedByIds as ariaDescribedByIds5,
labelValue as labelValue5,
rangeSpec
} from "@rjsf/utils";
import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
function RangeWidget(props) {
const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } = props;
const sliderProps = { value, label, id, name: id, ...rangeSpec(schema) };
const _onChange = (_, value2) => {
onChange(value2 ?? options.emptyValue);
};
const _onBlur = ({ target }) => onBlur(id, target && target.value);
const _onFocus = ({ target }) => onFocus(id, target && target.value);
const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
return /* @__PURE__ */ jsxs13(Fragment6, { children: [
labelValue5(
/* @__PURE__ */ jsx21(FormLabel3, { required, htmlFor: id, children: label || void 0 }),
hideLabel
),
/* @__PURE__ */ jsx21(
Slider,
{
disabled: disabled || readonly,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
valueLabelDisplay: "auto",
...otherMuiProps,
...muiSlotProps?.slider,
...sliderProps,
"aria-describedby": ariaDescribedByIds5(id)
}
)
] });
}
// src/SelectWidget/SelectWidget.tsx
import MenuItem from "@mui/material/MenuItem";
import TextField3 from "@mui/material/TextField";
import {
ariaDescribedByIds as ariaDescribedByIds6,
enumOptionSelectedValue as enumOptionSelectedValue2,
enumOptionValueDecoder as enumOptionValueDecoder3,
enumOptionValueEncoder as enumOptionValueEncoder2,
getOptionValueFormat as getOptionValueFormat3,
labelValue as labelValue6
} from "@rjsf/utils";
import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
function SelectWidget(props) {
const {
schema,
id,
name,
// remove this from textFieldProps
htmlName,
options,
label,
hideLabel,
required,
disabled,
placeholder,
readonly,
value,
multiple,
autofocus,
onChange,
onBlur,
onFocus,
errorSchema,
rawErrors = [],
registry,
uiSchema,
hideError,
...textFieldProps
} = props;
const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
const optionValueFormat = getOptionValueFormat3(options);
const isMultiple = typeof multiple === "undefined" ? false : !!multiple;
const emptyValue = isMultiple ? [] : "";
const isEmpty = typeof value === "undefined" || isMultiple && value.length < 1 || !isMultiple && value === emptyValue;
const _onChange = ({ target: { value: value2 } }) => onChange(enumOptionValueDecoder3(value2, enumOptions, optionValueFormat, optEmptyVal));
const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder3(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder3(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
const { InputLabelProps, SelectProps, autocomplete, ...textFieldRemainingProps } = textFieldProps;
const showPlaceholderOption = !isMultiple && schema.default === void 0;
return /* @__PURE__ */ jsxs14(
TextField3,
{
id,
name: htmlName || id,
label: labelValue6(label || void 0, hideLabel, void 0),
value: enumOptionSelectedValue2(value, enumOptions, isMultiple, optionValueFormat, emptyValue),
required,
disabled: disabled || readonly,
autoFocus: autofocus,
autoComplete: autocomplete,
placeholder,
error: rawErrors.length > 0,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
...{ ...otherMuiProps, ...textFieldRemainingProps },
select: true,
slotProps: {
...muiSlotProps,
inputLabel: {
...muiSlotProps?.inputLabel,
shrink: !isEmpty
},
select: {
...muiSlotProps?.select,
multiple
}
},
"aria-describedby": ariaDescribedByIds6(id),
children: [
showPlaceholderOption && /* @__PURE__ */ jsx22(MenuItem, { value: "", children: placeholder }),
Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1;
return /* @__PURE__ */ jsx22(MenuItem, { value: enumOptionValueEncoder2(value2, i, optionValueFormat), disabled: disabled2, children: label2 }, i);
})
]
}
);
}
// src/TextareaWidget/TextareaWidget.tsx
import { getTemplate as getTemplate6 } from "@rjsf/utils";
import { jsx as jsx23 } from "react/jsx-runtime";
function TextareaWidget(props) {
const { options, registry } = props;
const BaseInputTemplate2 = getTemplate6("BaseInputTemplate", registry, options);
let rows = 5;
if (typeof options.rows === "string" || typeof options.rows === "number") {
rows = options.rows;
}
return /* @__PURE__ */ jsx23(BaseInputTemplate2, { ...props, multiline: true, rows });
}
// src/Widgets/Widgets.ts
function generateWidgets() {
return {
CheckboxWidget,
CheckboxesWidget,
RadioWidget,
RangeWidget,
SelectWidget,
TextareaWidget
};
}
var Widgets_default = generateWidgets();
// src/Theme/Theme.tsx
function generateTheme() {
return {
templates: generateTemplates(),
widgets: generateWidgets()
};
}
var Theme_default = generateTheme();
// src/MuiForm/MuiForm.tsx
function generateForm() {
return withTheme(generateTheme());
}
var MuiForm_default = generateForm();
// src/index.ts
var index_default = MuiForm_default;
export {
MuiForm_default as Form,
Templates_default as Templates,
Theme_default as Theme,
Widgets_default as Widgets,
index_default as default,
generateForm,
generateTemplates,
generateTheme,
generateWidgets
};
//# sourceMappingURL=mui.esm.js.map