@openoleg/mui/dist/mui.esm.js

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

// 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 { TranslatableString } from "@rjsf/utils";
import { jsx } from "react/jsx-runtime";
function AddButton({
  uiSchema,
  registry,
  ...props
}) {
  const { translateString } = registry;
  return /* @__PURE__ */ jsx(IconButton, { title: translateString(TranslatableString.AddItemButton), ...props, color: "primary", 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,
  getTemplate
} from "@rjsf/utils";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
function ArrayFieldItemTemplate(props) {
  const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
  const uiOptions = getUiOptions(uiSchema);
  const ArrayFieldItemButtonsTemplate = getTemplate(
    "ArrayFieldItemButtonsTemplate",
    registry,
    uiOptions
  );
  const btnStyle = {
    flex: 1,
    paddingLeft: 6,
    paddingRight: 6,
    fontWeight: "bold",
    minWidth: 0
  };
  return /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", children: [
    /* @__PURE__ */ jsx2(Grid, { size: "auto", style: { overflow: "auto" }, children: /* @__PURE__ */ jsx2(Box, { mb: 2, children: /* @__PURE__ */ jsx2(Paper, { elevation: 2, children: /* @__PURE__ */ jsx2(Box, { p: 2, children }) }) }) }),
    hasToolbar && /* @__PURE__ */ jsx2(Grid, { 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 getUiOptions2,
  buttonId
} from "@rjsf/utils";
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
function ArrayFieldTemplate(props) {
  const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
  const uiOptions = getUiOptions2(uiSchema);
  const ArrayFieldDescriptionTemplate = getTemplate2(
    "ArrayFieldDescriptionTemplate",
    registry,
    uiOptions
  );
  const ArrayFieldItemTemplate2 = getTemplate2(
    "ArrayFieldItemTemplate",
    registry,
    uiOptions
  );
  const ArrayFieldTitleTemplate = getTemplate2(
    "ArrayFieldTitleTemplate",
    registry,
    uiOptions
  );
  const {
    ButtonTemplates: { AddButton: AddButton2 }
  } = registry.templates;
  return /* @__PURE__ */ jsx3(Paper2, { elevation: 2, children: /* @__PURE__ */ jsxs2(Box2, { p: 2, children: [
    /* @__PURE__ */ jsx3(
      ArrayFieldTitleTemplate,
      {
        idSchema,
        title: uiOptions.title || title,
        schema,
        uiSchema,
        required,
        registry
      }
    ),
    /* @__PURE__ */ jsx3(
      ArrayFieldDescriptionTemplate,
      {
        idSchema,
        description: uiOptions.description || schema.description,
        schema,
        uiSchema,
        registry
      }
    ),
    items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx3(ArrayFieldItemTemplate2, { ...itemProps }, key)),
    canAdd && /* @__PURE__ */ jsx3(Grid2, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsx3(Grid2, { children: /* @__PURE__ */ jsx3(Box2, { mt: 2, children: /* @__PURE__ */ jsx3(
      AddButton2,
      {
        id: buttonId(idSchema, "add"),
        className: "rjsf-array-item-add",
        onClick: onAddClick,
        disabled: disabled || readonly,
        uiSchema,
        registry
      }
    ) }) }) })
  ] }) });
}

// src/BaseInputTemplate/BaseInputTemplate.tsx
import TextField from "@mui/material/TextField";
import {
  ariaDescribedByIds,
  examplesId,
  getInputProps,
  labelValue
} from "@rjsf/utils";
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
    placeholder,
    required,
    readonly,
    disabled,
    type,
    label,
    hideLabel,
    hideError,
    value,
    onChange,
    onChangeOverride,
    onBlur,
    onFocus,
    autofocus,
    options,
    schema,
    uiSchema,
    rawErrors = [],
    errorSchema,
    formContext,
    registry,
    InputLabelProps,
    ...textFieldProps
  } = props;
  const inputProps = getInputProps(schema, type, options);
  const { step, min, max, accept, ...rest } = inputProps;
  const htmlInputProps = { 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) ? {
    ...InputLabelProps,
    shrink: true
  } : InputLabelProps;
  return /* @__PURE__ */ jsxs3(Fragment, { children: [
    /* @__PURE__ */ jsx4(
      TextField,
      {
        id,
        name: id,
        placeholder,
        label: labelValue(label || void 0, hideLabel, void 0),
        autoFocus: autofocus,
        required,
        disabled: disabled || readonly,
        slotProps: { htmlInput: htmlInputProps, inputLabel: DisplayInputLabelProps },
        ...rest,
        value: value || value === 0 ? value : "",
        error: rawErrors.length > 0,
        onChange: onChangeOverride || _onChange,
        onBlur: _onBlur,
        onFocus: _onFocus,
        ...textFieldProps,
        "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
      }
    ),
    Array.isArray(schema.examples) && /* @__PURE__ */ jsx4("datalist", { id: examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
      return /* @__PURE__ */ jsx4("option", { value: example }, example);
    }) })
  ] });
}

// src/DescriptionField/DescriptionField.tsx
import Typography from "@mui/material/Typography";
import { RichDescription } from "@rjsf/core";
import { jsx as jsx5 } from "react/jsx-runtime";
function DescriptionField(props) {
  const { id, description, registry, uiSchema } = props;
  if (description) {
    return /* @__PURE__ */ jsx5(Typography, { id, variant: "subtitle2", style: { marginTop: "5px" }, 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 } from "@rjsf/utils";
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
function ErrorList({
  errors,
  registry
}) {
  const { translateString } = registry;
  return /* @__PURE__ */ jsx6(Paper3, { elevation: 2, children: /* @__PURE__ */ jsxs4(Box3, { mb: 2, p: 2, children: [
    /* @__PURE__ */ jsx6(Typography2, { variant: "h6", children: translateString(TranslatableString2.ErrorsLabel) }),
    /* @__PURE__ */ jsx6(List, { dense: true, children: errors.map((error, i) => {
      return /* @__PURE__ */ jsxs4(ListItem, { children: [
        /* @__PURE__ */ jsx6(ListItemIcon, { children: /* @__PURE__ */ jsx6(ErrorIcon, { color: "error" }) }),
        /* @__PURE__ */ jsx6(ListItemText, { primary: error.stack })
      ] }, 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 { TranslatableString as TranslatableString3 } from "@rjsf/utils";
import { jsx as jsx7 } from "react/jsx-runtime";
function MuiIconButton(props) {
  const { icon, color, uiSchema, registry, ...otherProps } = props;
  return /* @__PURE__ */ jsx7(IconButton2, { ...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" })
    }
  );
}

// src/FieldErrorTemplate/FieldErrorTemplate.tsx
import ListItem2 from "@mui/material/ListItem";
import FormHelperText from "@mui/material/FormHelperText";
import List2 from "@mui/material/List";
import { errorId } from "@rjsf/utils";
import { jsx as jsx8 } from "react/jsx-runtime";
function FieldErrorTemplate(props) {
  const { errors = [], idSchema } = props;
  if (errors.length === 0) {
    return null;
  }
  const id = errorId(idSchema);
  return /* @__PURE__ */ jsx8(List2, { id, dense: true, disablePadding: true, children: errors.map((error, i) => {
    return /* @__PURE__ */ jsx8(ListItem2, { disableGutters: true, children: /* @__PURE__ */ jsx8(FormHelperText, { component: "div", id: `${id}-${i}`, children: error }) }, i);
  }) });
}

// src/FieldHelpTemplate/FieldHelpTemplate.tsx
import FormHelperText2 from "@mui/material/FormHelperText";
import { helpId } from "@rjsf/utils";
import { jsx as jsx9 } from "react/jsx-runtime";
function FieldHelpTemplate(props) {
  const { idSchema, help } = props;
  if (!help) {
    return null;
  }
  const id = helpId(idSchema);
  return /* @__PURE__ */ jsx9(FormHelperText2, { component: "div", id, children: help });
}

// src/FieldTemplate/FieldTemplate.tsx
import FormControl from "@mui/material/FormControl";
import Typography3 from "@mui/material/Typography";
import {
  getTemplate as getTemplate3,
  getUiOptions as getUiOptions3
} 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,
    onDropPropertyClick,
    onKeyChange,
    readonly,
    required,
    rawErrors = [],
    errors,
    help,
    description,
    rawDescription,
    schema,
    uiSchema,
    registry
  } = props;
  const uiOptions = getUiOptions3(uiSchema);
  const WrapIfAdditionalTemplate2 = getTemplate3(
    "WrapIfAdditionalTemplate",
    registry,
    uiOptions
  );
  if (hidden) {
    return /* @__PURE__ */ jsx10("div", { style: { display: "none" }, children });
  }
  return /* @__PURE__ */ jsx10(
    WrapIfAdditionalTemplate2,
    {
      classNames,
      style,
      disabled,
      id,
      label,
      onDropPropertyClick,
      onKeyChange,
      readonly,
      required,
      schema,
      uiSchema,
      registry,
      children: /* @__PURE__ */ jsxs5(FormControl, { fullWidth: true, error: rawErrors.length ? true : false, required, children: [
        children,
        displayLabel && rawDescription ? /* @__PURE__ */ jsx10(Typography3, { variant: "caption", color: "textSecondary", 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/ObjectFieldTemplate/ObjectFieldTemplate.tsx
import Grid4 from "@mui/material/Grid";
import {
  canExpand,
  descriptionId,
  getTemplate as getTemplate4,
  getUiOptions as getUiOptions4,
  titleId,
  buttonId as buttonId2
} from "@rjsf/utils";
import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
function ObjectFieldTemplate(props) {
  const {
    description,
    title,
    properties,
    required,
    disabled,
    readonly,
    uiSchema,
    idSchema,
    schema,
    formData,
    onAddClick,
    registry
  } = props;
  const uiOptions = getUiOptions4(uiSchema);
  const TitleFieldTemplate = getTemplate4("TitleFieldTemplate", registry, uiOptions);
  const DescriptionFieldTemplate = getTemplate4(
    "DescriptionFieldTemplate",
    registry,
    uiOptions
  );
  const {
    ButtonTemplates: { AddButton: AddButton2 }
  } = registry.templates;
  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
    title && /* @__PURE__ */ jsx12(
      TitleFieldTemplate,
      {
        id: titleId(idSchema),
        title,
        required,
        schema,
        uiSchema,
        registry
      }
    ),
    description && /* @__PURE__ */ jsx12(
      DescriptionFieldTemplate,
      {
        id: descriptionId(idSchema),
        description,
        schema,
        uiSchema,
        registry
      }
    ),
    /* @__PURE__ */ jsxs6(Grid4, { container: true, spacing: 2, style: { marginTop: "10px" }, children: [
      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__ */ jsx12(Grid4, { size: { xs: 12 }, style: { marginBottom: "10px" }, children: element.content }, index)
        )
      ),
      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx12(Grid4, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsx12(Grid4, { children: /* @__PURE__ */ jsx12(
        AddButton2,
        {
          id: buttonId2(idSchema, "add"),
          className: "rjsf-object-property-expand",
          onClick: onAddClick(schema),
          disabled: disabled || readonly,
          uiSchema,
          registry
        }
      ) }) })
    ] })
  ] });
}

// src/SubmitButton/SubmitButton.tsx
import Box4 from "@mui/material/Box";
import Button from "@mui/material/Button";
import { getSubmitButtonOptions } from "@rjsf/utils";
import { jsx as jsx13 } from "react/jsx-runtime";
function SubmitButton({ uiSchema }) {
  const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema);
  if (norender) {
    return null;
  }
  return /* @__PURE__ */ jsx13(Box4, { marginTop: 3, children: /* @__PURE__ */ jsx13(Button, { type: "submit", variant: "contained", color: "primary", ...submitButtonProps, children: submitText }) });
}

// src/TitleField/TitleField.tsx
import Box5 from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import Typography4 from "@mui/material/Typography";
import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
function TitleField({
  id,
  title
}) {
  return /* @__PURE__ */ jsxs7(Box5, { id, mb: 1, mt: 1, children: [
    /* @__PURE__ */ jsx14(Typography4, { variant: "h5", children: title }),
    /* @__PURE__ */ jsx14(Divider, {})
  ] });
}

// src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
import Grid5 from "@mui/material/Grid";
import TextField2 from "@mui/material/TextField";
import {
  ADDITIONAL_PROPERTY_FLAG,
  buttonId as buttonId3,
  TranslatableString as TranslatableString4
} from "@rjsf/utils";
import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
function WrapIfAdditionalTemplate(props) {
  const {
    children,
    classNames,
    style,
    disabled,
    id,
    label,
    onDropPropertyClick,
    onKeyChange,
    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"
  };
  if (!additional) {
    return /* @__PURE__ */ jsx15("div", { className: classNames, style, children });
  }
  const handleBlur = ({ target }) => onKeyChange(target && target.value);
  return /* @__PURE__ */ jsxs8(Grid5, { container: true, alignItems: "center", spacing: 2, className: classNames, style, children: [
    /* @__PURE__ */ jsx15(Grid5, { size: "auto", children: /* @__PURE__ */ jsx15(
      TextField2,
      {
        fullWidth: true,
        required,
        label: keyLabel,
        defaultValue: label,
        disabled: disabled || readonly,
        id: `${id}-key`,
        name: `${id}-key`,
        onBlur: !readonly ? handleBlur : void 0,
        type: "text"
      }
    ) }),
    /* @__PURE__ */ jsx15(Grid5, { size: "auto", children }),
    /* @__PURE__ */ jsx15(Grid5, { children: /* @__PURE__ */ jsx15(
      RemoveButton2,
      {
        id: buttonId3(id, "remove"),
        className: "rjsf-object-property-remove",
        iconType: "default",
        style: btnStyle,
        disabled: disabled || readonly,
        onClick: onDropPropertyClick(label),
        uiSchema,
        registry
      }
    ) })
  ] }, `${id}-key`);
}

// src/Templates/Templates.ts
function generateTemplates() {
  return {
    ArrayFieldItemTemplate,
    ArrayFieldTemplate,
    BaseInputTemplate,
    ButtonTemplates: {
      AddButton,
      CopyButton,
      MoveDownButton,
      MoveUpButton,
      RemoveButton,
      SubmitButton
    },
    DescriptionFieldTemplate: DescriptionField,
    ErrorListTemplate: ErrorList,
    FieldErrorTemplate,
    FieldHelpTemplate,
    FieldTemplate,
    GridTemplate,
    ObjectFieldTemplate,
    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 jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
function CheckboxWidget(props) {
  const {
    schema,
    id,
    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 = ({ target }) => onBlur(id, target && target.value);
  const _onFocus = ({ target }) => onFocus(id, target && target.value);
  const description = options.description ?? schema.description;
  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
    !hideLabel && description && /* @__PURE__ */ jsx16(
      DescriptionFieldTemplate,
      {
        id: descriptionId2(id),
        description,
        schema,
        uiSchema,
        registry
      }
    ),
    /* @__PURE__ */ jsx16(
      FormControlLabel,
      {
        control: /* @__PURE__ */ jsx16(
          Checkbox,
          {
            id,
            name: id,
            checked: typeof value === "undefined" ? false : Boolean(value),
            required,
            disabled: disabled || readonly,
            autoFocus: autofocus,
            onChange: _onChange,
            onBlur: _onBlur,
            onFocus: _onFocus,
            "aria-describedby": ariaDescribedByIds2(id)
          }
        ),
        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,
  enumOptionsDeselectValue,
  enumOptionsIsSelected,
  enumOptionsSelectValue,
  enumOptionsValueForIndex,
  labelValue as labelValue3,
  optionId
} from "@rjsf/utils";
import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
function CheckboxesWidget({
  label,
  hideLabel,
  id,
  disabled,
  options,
  value,
  autofocus,
  readonly,
  required,
  onChange,
  onBlur,
  onFocus
}) {
  const { enumOptions, enumDisabled, inline, emptyValue } = 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, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
  const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
    labelValue3(
      /* @__PURE__ */ jsx17(FormLabel, { required, htmlFor: id, children: label || void 0 }),
      hideLabel
    ),
    /* @__PURE__ */ jsx17(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__ */ jsx17(
        Checkbox2,
        {
          id: optionId(id, index),
          name: id,
          checked,
          disabled: disabled || itemDisabled || readonly,
          autoFocus: autofocus && index === 0,
          onChange: _onChange(index),
          onBlur: _onBlur,
          onFocus: _onFocus,
          "aria-describedby": ariaDescribedByIds3(id)
        }
      );
      return /* @__PURE__ */ jsx17(FormControlLabel2, { control: checkbox, label: option.label }, index);
    }) })
  ] });
}

// 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,
  enumOptionsIndexForValue,
  enumOptionsValueForIndex as enumOptionsValueForIndex2,
  labelValue as labelValue4,
  optionId as optionId2
} from "@rjsf/utils";
import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
function RadioWidget({
  id,
  options,
  value,
  required,
  disabled,
  readonly,
  label,
  hideLabel,
  onChange,
  onBlur,
  onFocus
}) {
  const { enumOptions, enumDisabled, emptyValue } = options;
  const _onChange = (_, value2) => onChange(enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
  const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
  const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
  const row = options ? options.inline : false;
  const selectedIndex = enumOptionsIndexForValue(value, enumOptions) ?? null;
  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
    labelValue4(
      /* @__PURE__ */ jsx18(FormLabel2, { required, htmlFor: id, children: label || void 0 }),
      hideLabel
    ),
    /* @__PURE__ */ jsx18(
      RadioGroup,
      {
        id,
        name: id,
        value: selectedIndex,
        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__ */ jsx18(
            FormControlLabel3,
            {
              control: /* @__PURE__ */ jsx18(Radio, { name: id, id: optionId2(id, index), color: "primary" }),
              label: option.label,
              value: String(index),
              disabled: disabled || itemDisabled || readonly
            },
            index
          );
          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 jsx19, jsxs as jsxs12 } 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);
  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
    labelValue5(
      /* @__PURE__ */ jsx19(FormLabel3, { required, htmlFor: id, children: label || void 0 }),
      hideLabel
    ),
    /* @__PURE__ */ jsx19(
      Slider,
      {
        disabled: disabled || readonly,
        onChange: _onChange,
        onBlur: _onBlur,
        onFocus: _onFocus,
        valueLabelDisplay: "auto",
        ...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,
  enumOptionsIndexForValue as enumOptionsIndexForValue2,
  enumOptionsValueForIndex as enumOptionsValueForIndex3,
  labelValue as labelValue6
} from "@rjsf/utils";
import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
function SelectWidget({
  schema,
  id,
  name,
  // remove this from textFieldProps
  options,
  label,
  hideLabel,
  required,
  disabled,
  placeholder,
  readonly,
  value,
  multiple,
  autofocus,
  onChange,
  onBlur,
  onFocus,
  errorSchema,
  rawErrors = [],
  registry,
  uiSchema,
  hideError,
  formContext,
  ...textFieldProps
}) {
  const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
  multiple = typeof multiple === "undefined" ? false : !!multiple;
  const emptyValue = multiple ? [] : "";
  const isEmpty = typeof value === "undefined" || multiple && value.length < 1 || !multiple && value === emptyValue;
  const _onChange = ({ target: { value: value2 } }) => onChange(enumOptionsValueForIndex3(value2, enumOptions, optEmptyVal));
  const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex3(target && target.value, enumOptions, optEmptyVal));
  const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex3(target && target.value, enumOptions, optEmptyVal));
  const selectedIndexes = enumOptionsIndexForValue2(value, enumOptions, multiple);
  const { InputLabelProps, SelectProps, autocomplete, ...textFieldRemainingProps } = textFieldProps;
  const showPlaceholderOption = !multiple && schema.default === void 0;
  return /* @__PURE__ */ jsxs13(
    TextField3,
    {
      id,
      name: id,
      label: labelValue6(label || void 0, hideLabel, void 0),
      value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
      required,
      disabled: disabled || readonly,
      autoFocus: autofocus,
      autoComplete: autocomplete,
      placeholder,
      error: rawErrors.length > 0,
      onChange: _onChange,
      onBlur: _onBlur,
      onFocus: _onFocus,
      ...textFieldRemainingProps,
      select: true,
      InputLabelProps: {
        ...InputLabelProps,
        shrink: !isEmpty
      },
      SelectProps: {
        ...SelectProps,
        multiple
      },
      "aria-describedby": ariaDescribedByIds6(id),
      children: [
        showPlaceholderOption && /* @__PURE__ */ jsx20(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__ */ jsx20(MenuItem, { value: String(i), disabled: disabled2, children: label2 }, i);
        })
      ]
    }
  );
}

// src/TextareaWidget/TextareaWidget.tsx
import { getTemplate as getTemplate6 } from "@rjsf/utils";
import { jsx as jsx21 } 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__ */ jsx21(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