@rjsf/react-bootstrap 6.0.0-beta.20 → 6.0.0-beta.22

package/dist/index.cjs

@@ -59,10 +59,10 @@ function AddButton({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Button.default,
     {
+      title: translateString(import_utils.TranslatableString.AddItemButton),
       ...props,
       style: { width: "100%" },
       className: `ml-1 ${props.className}`,
-      title: translateString(import_utils.TranslatableString.AddItemButton),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BsPlus.BsPlus, {})
     }
   );
@@ -100,23 +100,32 @@ var import_Container = __toESM(require("react-bootstrap/Container"), 1);
 var import_utils3 = require("@rjsf/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ArrayFieldTemplate(props) {
-  const { canAdd, disabled, fieldPathId, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
+  const {
+    canAdd,
+    disabled,
+    fieldPathId,
+    uiSchema,
+    items,
+    optionalDataControl,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title
+  } = props;
   const uiOptions = (0, import_utils3.getUiOptions)(uiSchema);
   const ArrayFieldDescriptionTemplate = (0, import_utils3.getTemplate)(
     "ArrayFieldDescriptionTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = (0, import_utils3.getTemplate)(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = (0, import_utils3.getTemplate)(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -129,7 +138,8 @@ function ArrayFieldTemplate(props) {
         schema,
         uiSchema,
         required,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -143,7 +153,8 @@ function ArrayFieldTemplate(props) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Container.default, { fluid: true, className: "p-0 m-0", children: [
-      items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrayFieldItemTemplate2, { ...itemProps }, key)),
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+      items,
       canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Container.default, { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Row2.default, { className: "mt-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Col2.default, { xs: 9 }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Col2.default, { xs: 3, className: "py-4 col-lg-3 col-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -168,6 +179,7 @@ var import_utils4 = require("@rjsf/utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function BaseInputTemplate({
   id,
+  htmlName,
   placeholder,
   required,
   readonly,
@@ -197,7 +209,7 @@ function BaseInputTemplate({
       import_Form.default.Control,
       {
         id,
-        name: id,
+        name: htmlName || id,
         placeholder,
         autoFocus: autofocus,
         required,
@@ -286,8 +298,8 @@ function RemoveButton(props) {
     IconButton,
     {
       title: translateString(import_utils6.TranslatableString.RemoveButton),
-      ...props,
       variant: "danger",
+      ...props,
       icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_IoIosRemove.IoIosRemove, {})
     }
   );
@@ -339,8 +351,9 @@ function FieldTemplate({
   disabled,
   label,
   hidden,
-  onDropPropertyClick,
-  onKeyChange,
+  onKeyRename,
+  onKeyRenameBlur,
+  onRemoveProperty,
   readonly,
   required,
   schema,
@@ -364,8 +377,9 @@ function FieldTemplate({
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -422,7 +436,8 @@ function ObjectFieldTemplate({
   fieldPathId,
   schema,
   formData,
-  onAddClick,
+  optionalDataControl,
+  onAddProperty,
   disabled,
   readonly,
   registry
@@ -434,6 +449,7 @@ function ObjectFieldTemplate({
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -446,7 +462,8 @@ function ObjectFieldTemplate({
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -460,6 +477,7 @@ function ObjectFieldTemplate({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Container2.default, { fluid: true, className: "p-0", children: [
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
       properties.map((element, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Row4.default, { style: { marginBottom: "10px" }, className: element.hidden ? "d-none" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Col4.default, { xs: 12, children: [
         " ",
         element.content
@@ -468,7 +486,7 @@ function ObjectFieldTemplate({
         AddButton2,
         {
           id: (0, import_utils10.buttonId)(fieldPathId, "add"),
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           className: "rjsf-object-property-expand",
           uiSchema,
@@ -479,39 +497,86 @@ function ObjectFieldTemplate({
   ] });
 }
 
+// src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
+var import_BsPlus2 = require("@react-icons/all-files/bs/BsPlus");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      IconButton,
+      {
+        id,
+        registry,
+        className: "rjsf-add-optional-data",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_BsPlus2.BsPlus, {}),
+        onClick: onAddClick,
+        title: label,
+        size: "sm",
+        variant: "secondary"
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      RemoveButton,
+      {
+        id,
+        registry,
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label,
+        size: "sm",
+        variant: "secondary"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("em", { id, children: label });
+}
+
 // src/SubmitButton/SubmitButton.tsx
 var import_Button3 = __toESM(require("react-bootstrap/Button"), 1);
 var import_utils11 = require("@rjsf/utils");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function SubmitButton(props) {
   const { submitText, norender, props: submitButtonProps } = (0, import_utils11.getSubmitButtonOptions)(props.uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Button3.default, { variant: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Button3.default, { variant: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
 var import_utils12 = require("@rjsf/utils");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_Row5 = __toESM(require("react-bootstrap/Row"), 1);
+var import_Col5 = __toESM(require("react-bootstrap/Col"), 1);
+var import_Container3 = __toESM(require("react-bootstrap/Container"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function TitleField({
   id,
   title,
-  uiSchema
+  uiSchema,
+  optionalDataControl
 }) {
   const uiOptions = (0, import_utils12.getUiOptions)(uiSchema);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { id, className: "my-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h5", { children: uiOptions.title || title }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { className: "border-0 bg-secondary", style: { height: "1px" } })
+  let heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h5", { children: uiOptions.title || title });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Container3.default, { fluid: true, className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Row5.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Col5.default, { xs: "11", children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Col5.default, { xs: "1", style: { marginLeft: "-5px" }, children: optionalDataControl })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { id, className: "my-1", children: [
+    heading,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("hr", { className: "border-0 bg-secondary mt-0", style: { height: "1px" } })
   ] });
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
 var import_utils13 = require("@rjsf/utils");
-var import_Row5 = __toESM(require("react-bootstrap/Row"), 1);
-var import_Col5 = __toESM(require("react-bootstrap/Col"), 1);
+var import_Row6 = __toESM(require("react-bootstrap/Row"), 1);
+var import_Col6 = __toESM(require("react-bootstrap/Col"), 1);
 var import_Form4 = __toESM(require("react-bootstrap/Form"), 1);
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate({
   classNames,
   style,
@@ -519,8 +584,8 @@ function WrapIfAdditionalTemplate({
   disabled,
   id,
   label,
-  onDropPropertyClick,
-  onKeyChange,
+  onRemoveProperty,
+  onKeyRenameBlur,
   readonly,
   required,
   schema,
@@ -532,14 +597,13 @@ function WrapIfAdditionalTemplate({
   const keyLabel = translateString(import_utils13.TranslatableString.KeyLabel, [label]);
   const additional = import_utils13.ADDITIONAL_PROPERTY_FLAG in schema;
   if (!additional) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: classNames, style, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children });
   }
-  const handleBlur = ({ target }) => onKeyChange(target.value);
   const keyId = `${id}-key`;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Row5.default, { className: classNames, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Col5.default, { xs: 5, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Form4.default.Group, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Form4.default.Label, { htmlFor: keyId, children: keyLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Row6.default, { className: classNames, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Col6.default, { xs: 5, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Form4.default.Group, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Form4.default.Label, { htmlFor: keyId, children: keyLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         import_Form4.default.Control,
         {
           required,
@@ -547,19 +611,19 @@ function WrapIfAdditionalTemplate({
           disabled: disabled || readonly,
           id: keyId,
           name: keyId,
-          onBlur: !readonly ? handleBlur : void 0,
+          onBlur: !readonly ? onKeyRenameBlur : void 0,
           type: "text"
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Col5.default, { xs: 5, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Col5.default, { xs: 2, className: "py-4 d-grid gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Col6.default, { xs: 5, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Col6.default, { xs: 2, className: "py-4 d-grid gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       RemoveButton2,
       {
         id: (0, import_utils13.buttonId)(id, "remove"),
         className: "rjsf-object-property-remove w-100",
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema,
         registry
       }
@@ -589,6 +653,7 @@ function generateTemplates() {
     GridTemplate,
     MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
   };
@@ -598,10 +663,11 @@ var Templates_default = generateTemplates();
 // src/CheckboxWidget/CheckboxWidget.tsx
 var import_utils14 = require("@rjsf/utils");
 var import_Form5 = __toESM(require("react-bootstrap/Form"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -626,8 +692,8 @@ function CheckboxWidget(props) {
   const _onBlur = ({ target }) => onBlur(id, target && target.checked);
   const _onFocus = ({ target }) => onFocus(id, target && target.checked);
   const description = options.description || schema.description;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Form5.default.Group, { className: disabled || readonly ? "disabled" : "", "aria-describedby": (0, import_utils14.ariaDescribedByIds)(id), children: [
-    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Form5.default.Group, { className: disabled || readonly ? "disabled" : "", "aria-describedby": (0, import_utils14.ariaDescribedByIds)(id), children: [
+    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       DescriptionFieldTemplate,
       {
         id: (0, import_utils14.descriptionId)(id),
@@ -637,11 +703,11 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_Form5.default.Check,
       {
         id,
-        name: id,
+        name: htmlName || id,
         label: (0, import_utils14.labelValue)(label, hideLabel || !label),
         checked: typeof value === "undefined" ? false : value,
         required,
@@ -659,8 +725,20 @@ function CheckboxWidget(props) {
 // src/CheckboxesWidget/CheckboxesWidget.tsx
 var import_Form6 = __toESM(require("react-bootstrap/Form"), 1);
 var import_utils15 = require("@rjsf/utils");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function CheckboxesWidget({ id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus }) {
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function CheckboxesWidget({
+  id,
+  htmlName,
+  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 } }) => {
@@ -672,10 +750,10 @@ function CheckboxesWidget({ id, disabled, options, value, autofocus, readonly, r
   };
   const _onBlur = ({ target }) => onBlur(id, (0, import_utils15.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, (0, import_utils15.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Form6.default.Group, { children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Form6.default.Group, { children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = (0, import_utils15.enumOptionsIsSelected)(option.value, checkboxesValues);
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_Form6.default.Check,
       {
         inline,
@@ -684,7 +762,7 @@ function CheckboxesWidget({ id, disabled, options, value, autofocus, readonly, r
         className: "bg-transparent border-0",
         type: "checkbox",
         id: (0, import_utils15.optionId)(id, index),
-        name: id,
+        name: htmlName || id,
         label: option.label,
         autoFocus: autofocus && index === 0,
         onChange: _onChange(index),
@@ -701,9 +779,10 @@ function CheckboxesWidget({ id, disabled, options, value, autofocus, readonly, r
 // src/RadioWidget/RadioWidget.tsx
 var import_Form7 = __toESM(require("react-bootstrap/Form"), 1);
 var import_utils16 = require("@rjsf/utils");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function RadioWidget({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -718,16 +797,16 @@ function RadioWidget({
   const _onBlur = ({ target }) => onBlur(id, (0, import_utils16.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, (0, import_utils16.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const inline = Boolean(options && options.inline);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Form7.default.Group, { className: "mb-0", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Form7.default.Group, { className: "mb-0", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     const checked = (0, import_utils16.enumOptionsIsSelected)(option.value, value);
-    const radio = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    const radio = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       import_Form7.default.Check,
       {
         inline,
         label: option.label,
         id: (0, import_utils16.optionId)(id, index),
-        name: id,
+        name: htmlName || id,
         type: "radio",
         disabled: disabled || itemDisabled || readonly,
         checked,
@@ -747,7 +826,7 @@ function RadioWidget({
 // src/RangeWidget/RangeWidget.tsx
 var import_utils17 = require("@rjsf/utils");
 var import_FormRange = __toESM(require("react-bootstrap/FormRange"), 1);
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function RangeWidget(props) {
   const { id, value, disabled, onChange, onBlur, onFocus, schema } = props;
   const _onChange = ({ target: { value: value2 } }) => onChange(value2);
@@ -763,19 +842,20 @@ function RangeWidget(props) {
     onFocus: _onFocus,
     ...(0, import_utils17.rangeSpec)(schema)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_FormRange.default, { ...rangeProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "range-view", children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_FormRange.default, { ...rangeProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "range-view", children: value })
   ] });
 }
 
 // src/SelectWidget/SelectWidget.tsx
 var import_FormSelect = __toESM(require("react-bootstrap/FormSelect"), 1);
 var import_utils18 = require("@rjsf/utils");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function SelectWidget({
   schema,
   id,
+  htmlName,
   options,
   required,
   disabled,
@@ -800,11 +880,11 @@ function SelectWidget({
   }
   const selectedIndexes = (0, import_utils18.enumOptionsIndexForValue)(value, enumOptions, multiple);
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     import_FormSelect.default,
     {
       id,
-      name: id,
+      name: htmlName || id,
       value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
       required,
       multiple,
@@ -825,10 +905,10 @@ function SelectWidget({
       },
       "aria-describedby": (0, import_utils18.ariaDescribedByIds)(id),
       children: [
-        showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "", children: placeholder }),
+        showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: "", children: placeholder }),
         enumOptions.map(({ value: value2, label }, i) => {
           const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) != -1;
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { id: label, value: String(i), disabled: disabled2, children: label }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { id: label, value: String(i), disabled: disabled2, children: label }, i);
         })
       ]
     }
@@ -839,9 +919,10 @@ function SelectWidget({
 var import_utils19 = require("@rjsf/utils");
 var import_FormControl = __toESM(require("react-bootstrap/FormControl"), 1);
 var import_InputGroup = __toESM(require("react-bootstrap/InputGroup"), 1);
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function TextareaWidget({
   id,
+  htmlName,
   placeholder,
   value,
   required,
@@ -856,11 +937,11 @@ function TextareaWidget({
   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);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_InputGroup.default, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_InputGroup.default, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_FormControl.default,
     {
       id,
-      name: id,
+      name: htmlName || id,
       as: "textarea",
       placeholder,
       disabled,