@rjsf/mui 6.6.1 → 6.6.2

package/dist/mui.esm.js

@@ -4,10 +4,7 @@ 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";
+import { getUiOptions, TranslatableString } from "@rjsf/utils";
 
 // src/util.ts
 function getMuiProps(options, propsToFilter, rjsfSlotPropsOnly) {
@@ -17,9 +14,9 @@ function getMuiProps(options, propsToFilter, rjsfSlotPropsOnly) {
     return { rjsfSlotProps };
   }
   if (propsToFilter) {
-    return Object.keys(muiProps).filter((key) => propsToFilter.includes(key)).reduce((obj, key) => {
-      obj[key] = muiProps[key];
-      return obj;
+    return Object.keys(muiProps).filter((key) => propsToFilter.includes(key)).reduce((acc, key) => {
+      acc[key] = muiProps[key];
+      return acc;
     }, {});
   }
   return muiProps;
@@ -58,10 +55,7 @@ function AddButton({
 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 { 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;
@@ -121,11 +115,7 @@ function ArrayFieldItemTemplate(props) {
 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 { 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 {
@@ -218,12 +208,7 @@ import { useCallback } from "react";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
 import { SchemaExamples } from "@rjsf/core";
-import {
-  ariaDescribedByIds,
-  examplesId,
-  getInputProps,
-  labelValue
-} from "@rjsf/utils";
+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) {
@@ -270,11 +255,11 @@ function BaseInputTemplate(props) {
     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 handleChange = ({ target: { value: newValue } }) => onChange(newValue === "" ? options.emptyValue : newValue);
+  const handleBlur = ({ target }) => onBlur(id, target && target.value);
+  const handleFocus = ({ 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(
+  const handleClear = useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -284,7 +269,7 @@ function BaseInputTemplate(props) {
   );
   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 }) });
+    const clearAdornment = /* @__PURE__ */ jsx4(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx4(ClearButton2, { registry, onClick: handleClear }) });
     inputProps.endAdornment = !inputProps.endAdornment ? clearAdornment : /* @__PURE__ */ jsxs3(Fragment, { children: [
       inputProps.endAdornment,
       clearAdornment
@@ -311,9 +296,9 @@ function BaseInputTemplate(props) {
         ...rest,
         value: value || value === 0 ? value : "",
         error: rawErrors.length > 0,
-        onChange: onChangeOverride || _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: onChangeOverride || handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         ...{ ...otherMuiProps, ...textFieldProps },
         "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
       }
@@ -325,9 +310,7 @@ function BaseInputTemplate(props) {
 // src/DescriptionField/DescriptionField.tsx
 import Typography from "@mui/material/Typography";
 import { RichDescription } from "@rjsf/core";
-import {
-  getUiOptions as getUiOptions4
-} from "@rjsf/utils";
+import { getUiOptions as getUiOptions4 } from "@rjsf/utils";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function DescriptionField(props) {
   const { id, description, registry, uiSchema } = props;
@@ -357,10 +340,7 @@ 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 { TranslatableString as TranslatableString2, getUiOptions as getUiOptions5 } from "@rjsf/utils";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function ErrorList({
   errors,
@@ -382,12 +362,13 @@ function ErrorList({
   } = 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(List, { dense: true, ...errorList, children: errors.map((error, i) => (
+      // oxlint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ jsxs4(ListItem, { ...errorListItem, children: [
         /* @__PURE__ */ jsx6(ListItemIcon, { ...errorListItemIcon, children: /* @__PURE__ */ jsx6(ErrorIcon, { color: "error" }) }),
         /* @__PURE__ */ jsx6(ListItemText, { primary: error.stack, ...errorListItemText })
-      ] }, i);
-    }) })
+      ] }, i)
+    )) })
   ] }) });
 }
 
@@ -395,10 +376,7 @@ function ErrorList({
 import FormHelperText from "@mui/material/FormHelperText";
 import List2 from "@mui/material/List";
 import ListItem2 from "@mui/material/ListItem";
-import {
-  errorId,
-  getUiOptions as getUiOptions6
-} from "@rjsf/utils";
+import { errorId, getUiOptions as getUiOptions6 } from "@rjsf/utils";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function FieldErrorTemplate(props) {
   const { errors = [], fieldPathId, uiSchema } = props;
@@ -409,18 +387,16 @@ function FieldErrorTemplate(props) {
   const uiOptions = getUiOptions6(uiSchema);
   const muiProps = getMuiProps(uiOptions);
   const { rjsfSlotProps: muiSlotProps } = muiProps;
-  return /* @__PURE__ */ jsx7(List2, { id, dense: true, disablePadding: true, ...muiSlotProps?.fieldErrorList, children: errors.map((error, i) => {
-    return /* @__PURE__ */ jsx7(ListItem2, { disableGutters: true, ...muiSlotProps?.fieldErrorListItem, children: /* @__PURE__ */ jsx7(FormHelperText, { component: "div", id: `${id}-${i}`, ...muiSlotProps?.fieldErrorFormHelperText, children: error }) }, i);
-  }) });
+  return /* @__PURE__ */ jsx7(List2, { id, dense: true, disablePadding: true, ...muiSlotProps?.fieldErrorList, children: errors.map((error, i) => (
+    // oxlint-disable-next-line react/no-array-index-key
+    /* @__PURE__ */ jsx7(ListItem2, { disableGutters: true, ...muiSlotProps?.fieldErrorListItem, children: /* @__PURE__ */ jsx7(FormHelperText, { component: "div", id: `${id}-${i}`, ...muiSlotProps?.fieldErrorFormHelperText, children: error }) }, i)
+  )) });
 }
 
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
 import FormHelperText2 from "@mui/material/FormHelperText";
 import { RichHelp } from "@rjsf/core";
-import {
-  helpId,
-  getUiOptions as getUiOptions7
-} from "@rjsf/utils";
+import { helpId, getUiOptions as getUiOptions7 } from "@rjsf/utils";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
   const { fieldPathId, help, uiSchema, registry } = props;
@@ -444,10 +420,7 @@ function FieldHelpTemplate(props) {
 // src/FieldTemplate/FieldTemplate.tsx
 import FormControl from "@mui/material/FormControl";
 import Typography3 from "@mui/material/Typography";
-import {
-  getTemplate as getTemplate3,
-  getUiOptions as getUiOptions8
-} from "@rjsf/utils";
+import { getTemplate as getTemplate3, getUiOptions as getUiOptions8 } from "@rjsf/utils";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function FieldTemplate(props) {
   const {
@@ -506,7 +479,7 @@ function FieldTemplate(props) {
         FormControl,
         {
           fullWidth: true,
-          error: rawErrors.length ? true : false,
+          error: !!rawErrors.length,
           required,
           ...muiSlotProps?.fieldFormControl,
           sx: otherMuiProps.sx,
@@ -532,18 +505,16 @@ function GridTemplate(props) {
 }
 
 // src/IconButton/IconButton.tsx
+import { memo } from "react";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ClearIcon from "@mui/icons-material/Clear";
 import CopyIcon from "@mui/icons-material/ContentCopy";
 import RemoveIcon from "@mui/icons-material/Remove";
 import IconButton2 from "@mui/material/IconButton";
-import {
-  TranslatableString as TranslatableString3,
-  getUiOptions as getUiOptions9
-} from "@rjsf/utils";
+import { TranslatableString as TranslatableString3, getUiOptions as getUiOptions9 } from "@rjsf/utils";
 import { jsx as jsx11 } from "react/jsx-runtime";
-function MuiIconButton(props) {
+function MuiIconButtonFn(props) {
   const { icon, color, uiSchema, registry, ...otherProps } = props;
   const uiOptions = getUiOptions9(uiSchema);
   const muiProps = getMuiProps(uiOptions, [
@@ -556,7 +527,9 @@ function MuiIconButton(props) {
   ]);
   return /* @__PURE__ */ jsx11(IconButton2, { ...muiProps, ...otherProps, size: "small", color, children: icon });
 }
-function CopyButton(props) {
+var MuiIconButton = memo(MuiIconButtonFn);
+var IconButton_default = MuiIconButton;
+function CopyButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
@@ -569,7 +542,8 @@ function CopyButton(props) {
     }
   );
 }
-function MoveDownButton(props) {
+var CopyButton = memo(CopyButtonFn);
+function MoveDownButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
@@ -582,7 +556,8 @@ function MoveDownButton(props) {
     }
   );
 }
-function MoveUpButton(props) {
+var MoveDownButton = memo(MoveDownButtonFn);
+function MoveUpButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
@@ -595,7 +570,8 @@ function MoveUpButton(props) {
     }
   );
 }
-function RemoveButton(props) {
+var MoveUpButton = memo(MoveUpButtonFn);
+function RemoveButtonFn(props) {
   const { iconType, ...otherProps } = props;
   const {
     registry: { translateString }
@@ -610,7 +586,8 @@ function RemoveButton(props) {
     }
   );
 }
-function ClearButton(props) {
+var RemoveButton = memo(RemoveButtonFn);
+function ClearButtonFn(props) {
   const { iconType, ...otherProps } = props;
   const {
     registry: { translateString }
@@ -624,13 +601,12 @@ function ClearButton(props) {
     }
   );
 }
+var ClearButton = memo(ClearButtonFn);
 
 // src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
 import Box4 from "@mui/material/Box";
 import FormControl2 from "@mui/material/FormControl";
-import {
-  getUiOptions as getUiOptions10
-} from "@rjsf/utils";
+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;
@@ -644,14 +620,7 @@ function MultiSchemaFieldTemplate(props) {
 
 // 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 { 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 {
@@ -716,7 +685,7 @@ function ObjectFieldTemplate(props) {
         children: [
           !showOptionalDataControlInTitle ? optionalDataControl : void 0,
           properties.map(
-            (element, index) => (
+            (element) => (
               // 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(
@@ -727,7 +696,7 @@ function ObjectFieldTemplate(props) {
                   sx: computeSxProps({ mb: 1.25 }, objectGridItem),
                   children: element.content
                 },
-                index
+                element.name
               )
             )
           )
@@ -763,7 +732,7 @@ function OptionalDataControlsTemplate(props) {
   const { id, registry, label, onAddClick, onRemoveClick, uiSchema } = props;
   if (onAddClick) {
     return /* @__PURE__ */ jsx14(
-      MuiIconButton,
+      IconButton_default,
       {
         id,
         registry,
@@ -774,7 +743,8 @@ function OptionalDataControlsTemplate(props) {
         icon: /* @__PURE__ */ jsx14(AddIcon2, { fontSize: "small" })
       }
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return /* @__PURE__ */ jsx14(
       RemoveButton,
       {
@@ -793,10 +763,7 @@ function OptionalDataControlsTemplate(props) {
 // 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 { 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);
@@ -824,9 +791,7 @@ 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 { 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;
@@ -864,12 +829,7 @@ function TitleField(props) {
 // 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 { 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 {
@@ -1014,15 +974,15 @@ function CheckboxesWidget(props) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
-  const _onChange = (index) => ({ target: { checked } }) => {
+  const handleChange = (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 handleBlur = ({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleFocus = ({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ jsxs10(Fragment3, { children: [
     labelValue2(
@@ -1031,7 +991,7 @@ function CheckboxesWidget(props) {
     ),
     /* @__PURE__ */ jsx18(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 itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
       const checkbox = /* @__PURE__ */ jsx18(
         Checkbox,
         {
@@ -1041,9 +1001,9 @@ function CheckboxesWidget(props) {
           checked,
           disabled: disabled || itemDisabled || readonly,
           autoFocus: autofocus && index === 0,
-          onChange: _onChange(index),
-          onBlur: _onBlur,
-          onFocus: _onFocus,
+          onChange: handleChange(index),
+          onBlur: handleBlur,
+          onFocus: handleFocus,
           "aria-describedby": ariaDescribedByIds2(id)
         }
       );
@@ -1052,7 +1012,7 @@ function CheckboxesWidget(props) {
         {
           ...muiSlotProps?.formControlLabel,
           control: checkbox,
-          key: index,
+          key: String(option.value),
           label: option.label
         }
       );
@@ -1063,13 +1023,7 @@ function CheckboxesWidget(props) {
 // src/CheckboxWidget/CheckboxWidget.tsx
 import Checkbox2 from "@mui/material/Checkbox";
 import FormControlLabel2 from "@mui/material/FormControlLabel";
-import {
-  ariaDescribedByIds as ariaDescribedByIds3,
-  descriptionId as descriptionId2,
-  getTemplate as getTemplate5,
-  labelValue as labelValue3,
-  schemaRequiresTrueValue
-} from "@rjsf/utils";
+import { ariaDescribedByIds as ariaDescribedByIds3, descriptionId as descriptionId2, getTemplate as getTemplate5, labelValue as labelValue3, schemaRequiresTrueValue } from "@rjsf/utils";
 import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
@@ -1095,9 +1049,9 @@ function CheckboxWidget(props) {
     options
   );
   const required = schemaRequiresTrueValue(schema);
-  const _onChange = (_, checked) => onChange(checked);
-  const _onBlur = () => onBlur(id, value);
-  const _onFocus = () => onFocus(id, value);
+  const handleChange = (_, checked) => onChange(checked);
+  const handleBlur = () => onBlur(id, value);
+  const handleFocus = () => onFocus(id, value);
   const description = options.description ?? schema.description;
   const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ jsxs11(Fragment4, { children: [
@@ -1125,9 +1079,9 @@ function CheckboxWidget(props) {
             required,
             disabled: disabled || readonly,
             autoFocus: autofocus,
-            onChange: _onChange,
-            onBlur: _onBlur,
-            onFocus: _onFocus,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
             "aria-describedby": ariaDescribedByIds3(id),
             ...muiSlotProps?.checkbox
           }
@@ -1158,9 +1112,9 @@ 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 handleChange = (_, enumValue) => onChange(enumOptionValueDecoder2(enumValue, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }) => onBlur(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleFocus = ({ 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);
@@ -1178,12 +1132,12 @@ function RadioWidget(props) {
         name: htmlName || id,
         value: selectValue,
         row,
-        onChange: _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         "aria-describedby": ariaDescribedByIds4(id),
         children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
           const radio = /* @__PURE__ */ createElement2(
             FormControlLabel3,
             {
@@ -1191,7 +1145,7 @@ function RadioWidget(props) {
               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,
+              key: String(option.value),
               disabled: disabled || itemDisabled || readonly
             }
           );
@@ -1205,20 +1159,16 @@ function RadioWidget(props) {
 // 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 { 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 handleChange = (_, newValue) => {
+    onChange(newValue ?? options.emptyValue);
   };
-  const _onBlur = ({ target }) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }) => onFocus(id, target && target.value);
+  const handleBlur = ({ target }) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }) => onFocus(id, target && target.value);
   const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ jsxs13(Fragment6, { children: [
     labelValue5(
@@ -1229,9 +1179,9 @@ function RangeWidget(props) {
       Slider,
       {
         disabled: disabled || readonly,
-        onChange: _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         valueLabelDisplay: "auto",
         ...otherMuiProps,
         ...muiSlotProps?.slider,
@@ -1286,9 +1236,9 @@ function SelectWidget(props) {
   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 handleChange = ({ target: { value: newValue } }) => onChange(enumOptionValueDecoder3(newValue, enumOptions, optionValueFormat, optEmptyVal));
+  const handleBlur = ({ target }) => onBlur(id, enumOptionValueDecoder3(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+  const handleFocus = ({ 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;
@@ -1305,9 +1255,9 @@ function SelectWidget(props) {
       autoComplete: autocomplete,
       placeholder,
       error: rawErrors.length > 0,
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
       ...{ ...otherMuiProps, ...textFieldRemainingProps },
       select: true,
       slotProps: {
@@ -1324,9 +1274,17 @@ function SelectWidget(props) {
       "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);
+        Array.isArray(enumOptions) && enumOptions.map(({ value: enumValue, label: enumLabel }, i) => {
+          const isDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(enumValue);
+          return /* @__PURE__ */ jsx22(
+            MenuItem,
+            {
+              value: enumOptionValueEncoder2(enumValue, i, optionValueFormat),
+              disabled: isDisabled,
+              children: enumLabel
+            },
+            String(enumValue)
+          );
         })
       ]
     }