@rjsf/mui 6.6.0 → 6.6.2

package/dist/index.cjs

@@ -58,9 +58,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;
@@ -299,11 +299,11 @@ function BaseInputTemplate(props) {
     accept,
     ...schema.examples ? { list: (0, import_utils4.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 = (0, import_react.useCallback)(
+  const handleClear = (0, import_react.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -313,7 +313,7 @@ function BaseInputTemplate(props) {
   );
   const inputProps = { ...InputProps, ...slotProps?.input, ...muiSlotProps?.input };
   if (options.allowClearTextInputs && value && !readonly && !disabled) {
-    const clearAdornment = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_InputAdornment.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClearButton2, { registry, onClick: _onClear }) });
+    const clearAdornment = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_InputAdornment.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClearButton2, { registry, onClick: handleClear }) });
     inputProps.endAdornment = !inputProps.endAdornment ? clearAdornment : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
       inputProps.endAdornment,
       clearAdornment
@@ -340,9 +340,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": (0, import_utils4.ariaDescribedByIds)(id, !!schema.examples)
       }
@@ -406,12 +406,13 @@ function ErrorList({
   } = getMuiProps(uiOptions);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Paper3.default, { elevation: 2, ...errorPaper, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_Box3.default, { ...errorBox, sx: computeSxProps({ mb: 2, p: 2 }, errorBox), children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Typography2.default, { variant: "h6", ...errorTypography, children: translateString(import_utils6.TranslatableString.ErrorsLabel) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_List.default, { dense: true, ...errorList, children: errors.map((error, i) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ListItem.default, { ...errorListItem, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_List.default, { dense: true, ...errorList, children: errors.map((error, i) => (
+      // oxlint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ListItem.default, { ...errorListItem, children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListItemIcon.default, { ...errorListItemIcon, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Error.default, { color: "error" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListItemText.default, { primary: error.stack, ...errorListItemText })
-      ] }, i);
-    }) })
+      ] }, i)
+    )) })
   ] }) });
 }
 
@@ -430,9 +431,10 @@ function FieldErrorTemplate(props) {
   const uiOptions = (0, import_utils7.getUiOptions)(uiSchema);
   const muiProps = getMuiProps(uiOptions);
   const { rjsfSlotProps: muiSlotProps } = muiProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_List2.default, { id, dense: true, disablePadding: true, ...muiSlotProps?.fieldErrorList, children: errors.map((error, i) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ListItem2.default, { disableGutters: true, ...muiSlotProps?.fieldErrorListItem, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_FormHelperText.default, { component: "div", id: `${id}-${i}`, ...muiSlotProps?.fieldErrorFormHelperText, children: error }) }, i);
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_List2.default, { id, dense: true, disablePadding: true, ...muiSlotProps?.fieldErrorList, children: errors.map((error, i) => (
+    // oxlint-disable-next-line react/no-array-index-key
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ListItem2.default, { disableGutters: true, ...muiSlotProps?.fieldErrorListItem, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_FormHelperText.default, { component: "div", id: `${id}-${i}`, ...muiSlotProps?.fieldErrorFormHelperText, children: error }) }, i)
+  )) });
 }
 
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -521,7 +523,7 @@ function FieldTemplate(props) {
         import_FormControl.default,
         {
           fullWidth: true,
-          error: rawErrors.length ? true : false,
+          error: !!rawErrors.length,
           required,
           ...muiSlotProps?.fieldFormControl,
           sx: otherMuiProps.sx,
@@ -547,6 +549,7 @@ function GridTemplate(props) {
 }
 
 // src/IconButton/IconButton.tsx
+var import_react2 = require("react");
 var import_ArrowDownward = __toESM(require("@mui/icons-material/ArrowDownward"), 1);
 var import_ArrowUpward = __toESM(require("@mui/icons-material/ArrowUpward"), 1);
 var import_Clear = __toESM(require("@mui/icons-material/Clear"), 1);
@@ -555,7 +558,7 @@ var import_Remove = __toESM(require("@mui/icons-material/Remove"), 1);
 var import_IconButton2 = __toESM(require("@mui/material/IconButton"), 1);
 var import_utils10 = require("@rjsf/utils");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function MuiIconButton(props) {
+function MuiIconButtonFn(props) {
   const { icon, color, uiSchema, registry, ...otherProps } = props;
   const uiOptions = (0, import_utils10.getUiOptions)(uiSchema);
   const muiProps = getMuiProps(uiOptions, [
@@ -568,7 +571,9 @@ function MuiIconButton(props) {
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_IconButton2.default, { ...muiProps, ...otherProps, size: "small", color, children: icon });
 }
-function CopyButton(props) {
+var MuiIconButton = (0, import_react2.memo)(MuiIconButtonFn);
+var IconButton_default = MuiIconButton;
+function CopyButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
@@ -581,7 +586,8 @@ function CopyButton(props) {
     }
   );
 }
-function MoveDownButton(props) {
+var CopyButton = (0, import_react2.memo)(CopyButtonFn);
+function MoveDownButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
@@ -594,7 +600,8 @@ function MoveDownButton(props) {
     }
   );
 }
-function MoveUpButton(props) {
+var MoveDownButton = (0, import_react2.memo)(MoveDownButtonFn);
+function MoveUpButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
@@ -607,7 +614,8 @@ function MoveUpButton(props) {
     }
   );
 }
-function RemoveButton(props) {
+var MoveUpButton = (0, import_react2.memo)(MoveUpButtonFn);
+function RemoveButtonFn(props) {
   const { iconType, ...otherProps } = props;
   const {
     registry: { translateString }
@@ -622,7 +630,8 @@ function RemoveButton(props) {
     }
   );
 }
-function ClearButton(props) {
+var RemoveButton = (0, import_react2.memo)(RemoveButtonFn);
+function ClearButtonFn(props) {
   const { iconType, ...otherProps } = props;
   const {
     registry: { translateString }
@@ -636,6 +645,7 @@ function ClearButton(props) {
     }
   );
 }
+var ClearButton = (0, import_react2.memo)(ClearButtonFn);
 
 // src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
 var import_Box4 = __toESM(require("@mui/material/Box"), 1);
@@ -719,7 +729,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__ */ (0, import_jsx_runtime13.jsx)(
@@ -730,7 +740,7 @@ function ObjectFieldTemplate(props) {
                   sx: computeSxProps({ mb: 1.25 }, objectGridItem),
                   children: element.content
                 },
-                index
+                element.name
               )
             )
           )
@@ -766,7 +776,7 @@ function OptionalDataControlsTemplate(props) {
   const { id, registry, label, onAddClick, onRemoveClick, uiSchema } = props;
   if (onAddClick) {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      MuiIconButton,
+      IconButton_default,
       {
         id,
         registry,
@@ -777,7 +787,8 @@ function OptionalDataControlsTemplate(props) {
         icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Add2.default, { fontSize: "small" })
       }
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       RemoveButton,
       {
@@ -978,7 +989,7 @@ var import_FormGroup = __toESM(require("@mui/material/FormGroup"), 1);
 var import_FormLabel = __toESM(require("@mui/material/FormLabel"), 1);
 var import_utils16 = require("@rjsf/utils");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var import_react2 = require("react");
+var import_react3 = require("react");
 function CheckboxesWidget(props) {
   const {
     label,
@@ -998,15 +1009,15 @@ function CheckboxesWidget(props) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const optionValueFormat = (0, import_utils16.getOptionValueFormat)(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
-  const _onChange = (index) => ({ target: { checked } }) => {
+  const handleChange = (index) => ({ target: { checked } }) => {
     if (checked) {
       onChange((0, import_utils16.enumOptionsSelectValue)(index, checkboxesValues, enumOptions));
     } else {
       onChange((0, import_utils16.enumOptionsDeselectValue)(index, checkboxesValues, enumOptions));
     }
   };
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils16.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils16.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }) => onBlur(id, (0, import_utils16.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleFocus = ({ target }) => onFocus(id, (0, import_utils16.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
     (0, import_utils16.labelValue)(
@@ -1015,7 +1026,7 @@ function CheckboxesWidget(props) {
     ),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_FormGroup.default, { ...otherMuiProps, ...muiSlotProps?.formGroup, id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = (0, import_utils16.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__ */ (0, import_jsx_runtime18.jsx)(
         import_Checkbox.default,
         {
@@ -1025,18 +1036,18 @@ 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": (0, import_utils16.ariaDescribedByIds)(id)
         }
       );
-      return /* @__PURE__ */ (0, import_react2.createElement)(
+      return /* @__PURE__ */ (0, import_react3.createElement)(
         import_FormControlLabel.default,
         {
           ...muiSlotProps?.formControlLabel,
           control: checkbox,
-          key: index,
+          key: String(option.value),
           label: option.label
         }
       );
@@ -1073,9 +1084,9 @@ function CheckboxWidget(props) {
     options
   );
   const required = (0, import_utils17.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__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
@@ -1103,9 +1114,9 @@ function CheckboxWidget(props) {
             required,
             disabled: disabled || readonly,
             autoFocus: autofocus,
-            onChange: _onChange,
-            onBlur: _onBlur,
-            onFocus: _onFocus,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
             "aria-describedby": (0, import_utils17.ariaDescribedByIds)(id),
             ...muiSlotProps?.checkbox
           }
@@ -1123,14 +1134,14 @@ var import_Radio = __toESM(require("@mui/material/Radio"), 1);
 var import_RadioGroup = __toESM(require("@mui/material/RadioGroup"), 1);
 var import_utils18 = require("@rjsf/utils");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var import_react3 = require("react");
+var import_react4 = require("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 = (0, import_utils18.getOptionValueFormat)(options);
-  const _onChange = (_, value2) => onChange((0, import_utils18.enumOptionValueDecoder)(value2, enumOptions, optionValueFormat, emptyValue));
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils18.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils18.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleChange = (_, enumValue) => onChange((0, import_utils18.enumOptionValueDecoder)(enumValue, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }) => onBlur(id, (0, import_utils18.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleFocus = ({ target }) => onFocus(id, (0, import_utils18.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const row = options ? options.inline : false;
   const selectValue = (0, import_utils18.enumOptionSelectedValue)(value, enumOptions, false, optionValueFormat, "");
   const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
@@ -1148,20 +1159,20 @@ function RadioWidget(props) {
         name: htmlName || id,
         value: selectValue,
         row,
-        onChange: _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         "aria-describedby": (0, import_utils18.ariaDescribedByIds)(id),
         children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          const radio = /* @__PURE__ */ (0, import_react3.createElement)(
+          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
+          const radio = /* @__PURE__ */ (0, import_react4.createElement)(
             import_FormControlLabel3.default,
             {
               ...muiSlotProps?.formControlLabel,
               control: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Radio.default, { ...muiSlotProps?.radio, name: htmlName || id, id: (0, import_utils18.optionId)(id, index), color: "primary" }),
               label: option.label,
               value: (0, import_utils18.enumOptionValueEncoder)(option.value, index, optionValueFormat),
-              key: index,
+              key: String(option.value),
               disabled: disabled || itemDisabled || readonly
             }
           );
@@ -1180,11 +1191,11 @@ var import_jsx_runtime21 = require("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, ...(0, import_utils19.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__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
     (0, import_utils19.labelValue)(
@@ -1195,9 +1206,9 @@ function RangeWidget(props) {
       import_Slider.default,
       {
         disabled: disabled || readonly,
-        onChange: _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         valueLabelDisplay: "auto",
         ...otherMuiProps,
         ...muiSlotProps?.slider,
@@ -1245,9 +1256,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((0, import_utils20.enumOptionValueDecoder)(value2, enumOptions, optionValueFormat, optEmptyVal));
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils20.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils20.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+  const handleChange = ({ target: { value: newValue } }) => onChange((0, import_utils20.enumOptionValueDecoder)(newValue, enumOptions, optionValueFormat, optEmptyVal));
+  const handleBlur = ({ target }) => onBlur(id, (0, import_utils20.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+  const handleFocus = ({ target }) => onFocus(id, (0, import_utils20.enumOptionValueDecoder)(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;
@@ -1264,9 +1275,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: {
@@ -1283,9 +1294,17 @@ function SelectWidget(props) {
       "aria-describedby": (0, import_utils20.ariaDescribedByIds)(id),
       children: [
         showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_MenuItem.default, { value: "", children: placeholder }),
-        Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
-          const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1;
-          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_MenuItem.default, { value: (0, import_utils20.enumOptionValueEncoder)(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__ */ (0, import_jsx_runtime22.jsx)(
+            import_MenuItem.default,
+            {
+              value: (0, import_utils20.enumOptionValueEncoder)(enumValue, i, optionValueFormat),
+              disabled: isDisabled,
+              children: enumLabel
+            },
+            String(enumValue)
+          );
         })
       ]
     }