@rjsf/primereact 6.0.0-beta.20 → 6.0.0-beta.22

package/dist/primereact.esm.js

@@ -50,7 +50,6 @@ import {
   getTemplate as getTemplate2,
   getUiOptions as getUiOptions2,
   isFixedItems,
-  UI_OPTIONS_KEY,
   buttonId
 } from "@rjsf/utils";
 import { Fieldset } from "primereact/fieldset";
@@ -63,6 +62,7 @@ function ArrayFieldTemplate(props) {
     className,
     disabled,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     schema,
@@ -77,16 +77,12 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = getTemplate2(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate2 = getTemplate2(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx3(
       ArrayFieldTitleTemplate2,
@@ -96,7 +92,8 @@ function ArrayFieldTemplate(props) {
         schema,
         uiSchema,
         required,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     /* @__PURE__ */ jsxs2(
@@ -117,15 +114,10 @@ function ArrayFieldTemplate(props) {
             }
           ),
           /* @__PURE__ */ jsxs2("div", { children: [
-            /* @__PURE__ */ jsx3("div", { children: items && items.map(({ key, uiSchema: itemUiSchema = {}, ...props2 }) => {
-              const mergedUiSchema = {
-                ...itemUiSchema,
-                [UI_OPTIONS_KEY]: {
-                  ...itemUiSchema[UI_OPTIONS_KEY]
-                }
-              };
-              return /* @__PURE__ */ jsx3(ArrayFieldItemTemplate2, { ...props2, uiSchema: mergedUiSchema }, key);
-            }) }),
+            /* @__PURE__ */ jsxs2("div", { children: [
+              !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+              items
+            ] }),
             canAdd && /* @__PURE__ */ jsx3(
               "div",
               {
@@ -165,6 +157,7 @@ import { jsx as jsx4 } from "react/jsx-runtime";
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     placeholder,
     value,
     required,
@@ -194,7 +187,7 @@ function BaseInputTemplate(props) {
     InputText,
     {
       id,
-      name: id,
+      name: htmlName || id,
       placeholder,
       ...primeProps,
       ...inputProps,
@@ -392,7 +385,8 @@ import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-ru
 function ObjectFieldTemplate(props) {
   const {
     description,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     title,
     properties,
     disabled,
@@ -411,6 +405,7 @@ function ObjectFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -423,7 +418,8 @@ function ObjectFieldTemplate(props) {
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     description && /* @__PURE__ */ jsx12("div", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsx12(
@@ -436,6 +432,7 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ) }),
+    !showOptionalDataControlInTitle ? optionalDataControl : void 0,
     properties.map((prop) => prop.content),
     canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx12("div", { style: { marginTop: "1rem", textAlign: "right" }, children: /* @__PURE__ */ jsx12(
       AddButton2,
@@ -443,7 +440,7 @@ function ObjectFieldTemplate(props) {
         id: buttonId2(fieldPathId, "add"),
         className: "rjsf-object-property-expand",
         icon: "pi pi-plus",
-        onClick: onAddClick(schema),
+        onClick: onAddProperty,
         disabled: disabled || readonly,
         registry
       }
@@ -451,36 +448,77 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ jsx13(
+      IconButton,
+      {
+        id,
+        registry,
+        className: "rjsf-add-optional-data",
+        onClick: onAddClick,
+        title: label,
+        icon: "pi pi-plus",
+        style: { height: "1.5rem", width: "1.5rem" }
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ jsx13(
+      RemoveButton,
+      {
+        id,
+        registry,
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label,
+        style: { height: "1.5rem", width: "1.5rem" }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx13("em", { id, children: label });
+}
+
 // src/SubmitButton/SubmitButton.tsx
 import { Button as Button3 } from "primereact/button";
 import { getSubmitButtonOptions } from "@rjsf/utils";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function SubmitButton({ uiSchema }) {
   const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ jsx13(Button3, { type: "submit", label: submitText, ...submitButtonProps });
+  return /* @__PURE__ */ jsx14(Button3, { type: "submit", label: submitText, ...submitButtonProps });
 }
 
 // src/TitleField/TitleField.tsx
 import { Divider } from "primereact/divider";
 import { getUiOptions as getUiOptions5, titleId as titleId2 } from "@rjsf/utils";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function TitleField({
   id,
   title,
   uiSchema,
-  required
+  required,
+  optionalDataControl
 }) {
   const uiOptions = getUiOptions5(uiSchema);
+  let heading = /* @__PURE__ */ jsxs8("h5", { style: { margin: 0, fontSize: id === titleId2("root") ? "1.5rem" : "1.2rem" }, children: [
+    uiOptions.title || title,
+    " ",
+    required ? "*" : ""
+  ] });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ jsxs8("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ jsx15("div", { style: { flexGrow: 1 }, children: heading }),
+      /* @__PURE__ */ jsx15("div", { style: { marginLeft: "-5px" }, children: optionalDataControl })
+    ] });
+  }
   return /* @__PURE__ */ jsxs8("div", { id, children: [
-    /* @__PURE__ */ jsxs8("h5", { style: { margin: 0, fontSize: id === titleId2("root") ? "1.5rem" : "1.2rem" }, children: [
-      uiOptions.title || title,
-      " ",
-      required ? "*" : ""
-    ] }),
-    /* @__PURE__ */ jsx14(Divider, { pt: { root: { style: { marginTop: "0.5rem" } } } })
+    heading,
+    /* @__PURE__ */ jsx15(Divider, { pt: { root: { style: { marginTop: "0.5rem" } } } })
   ] });
 }
 
@@ -491,7 +529,7 @@ import {
   TranslatableString as TranslatableString4
 } from "@rjsf/utils";
 import { InputText as InputText2 } from "primereact/inputtext";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate({
   classNames,
   style,
@@ -499,8 +537,8 @@ function WrapIfAdditionalTemplate({
   disabled,
   id,
   label,
-  onDropPropertyClick,
-  onKeyChange,
+  onRemoveProperty,
+  onKeyRenameBlur,
   readonly,
   required,
   schema,
@@ -511,9 +549,8 @@ function WrapIfAdditionalTemplate({
   const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
   if (!additional) {
-    return /* @__PURE__ */ jsx15("div", { className: classNames, style, children });
+    return /* @__PURE__ */ jsx16("div", { className: classNames, style, children });
   }
-  const handleBlur = ({ target }) => onKeyChange(target.value);
   return /* @__PURE__ */ jsxs9(
     "div",
     {
@@ -521,28 +558,28 @@ function WrapIfAdditionalTemplate({
       style: { ...style, display: "flex", alignItems: "center", gap: "1rem" },
       children: [
         /* @__PURE__ */ jsxs9("div", { style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx15("label", { htmlFor: `${id}-key`, style: { display: "block", marginBottom: "0.5rem" }, children: keyLabel }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16("label", { htmlFor: `${id}-key`, style: { display: "block", marginBottom: "0.5rem" }, children: keyLabel }),
+          /* @__PURE__ */ jsx16(
             InputText2,
             {
               id: `${id}-key`,
               name: `${id}-key`,
               defaultValue: label,
               disabled: disabled || readonly,
-              onBlur: !readonly ? handleBlur : void 0,
+              onBlur: !readonly ? onKeyRenameBlur : void 0,
               required,
               style: { width: "100%" }
             }
           )
         ] }),
-        /* @__PURE__ */ jsx15("div", { style: { flex: 1 }, children }),
-        /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16("div", { style: { flex: 1 }, children }),
+        /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
           RemoveButton2,
           {
             id: buttonId3(id, "remove"),
             className: "rjsf-object-property-remove",
             disabled: disabled || readonly,
-            onClick: onDropPropertyClick(label),
+            onClick: onRemoveProperty,
             registry
           }
         ) })
@@ -557,19 +594,26 @@ import {
   getUiOptions as getUiOptions6,
   titleId as titleId3
 } from "@rjsf/utils";
-import { jsxs as jsxs10 } from "react/jsx-runtime";
-function ArrayFieldTitleTemplate({ title, uiSchema, required, fieldPathId }) {
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function ArrayFieldTitleTemplate({ title, uiSchema, required, fieldPathId, optionalDataControl }) {
   const uiOptions = getUiOptions6(uiSchema);
-  return /* @__PURE__ */ jsxs10("h5", { id: titleId3(fieldPathId), style: { margin: 0, fontSize: "1.5rem", marginBottom: "0.2rem" }, children: [
+  let heading = /* @__PURE__ */ jsxs10("h5", { id: titleId3(fieldPathId), style: { margin: 0, fontSize: "1.5rem", marginBottom: "0.2rem" }, children: [
     uiOptions.title || title,
     " ",
     required ? "*" : ""
   ] });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ jsxs10("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ jsx17("div", { style: { flexGrow: 1 }, children: heading }),
+      /* @__PURE__ */ jsx17("div", { children: optionalDataControl })
+    ] });
+  }
+  return heading;
 }
 
 // src/GridTemplate/GridTemplate.tsx
 import { useEffect, useState } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var breakpoints = {
   xs: 0,
   sm: 576,
@@ -606,7 +650,7 @@ function GridTemplateRow(props) {
   const layoutGrid = uiSchema?.["ui:layoutGrid"] ?? {};
   const totalColumns = layoutGrid.columns ?? 12;
   const gap = layoutGrid.gap ?? "16px";
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       style: {
@@ -633,7 +677,7 @@ function GridTemplateColumn(props) {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
   const span = getResponsiveSpan(props, breakpoint);
-  return /* @__PURE__ */ jsx16("div", { style: { gridColumn: `span ${span} / span ${span}`, ...style ?? {} }, ...rest, children });
+  return /* @__PURE__ */ jsx18("div", { style: { gridColumn: `span ${span} / span ${span}`, ...style ?? {} }, ...rest, children });
 }
 
 // src/Templates/Templates.ts
@@ -658,6 +702,7 @@ function generateTemplates() {
     FieldTemplate,
     MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,
     GridTemplate
@@ -672,7 +717,7 @@ import {
   getInputProps as getInputProps2
 } from "@rjsf/utils";
 import { AutoComplete } from "primereact/autocomplete";
-import { Fragment as Fragment3, jsx as jsx17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19 } from "react/jsx-runtime";
 function AutoCompleteWidget(props) {
   const {
     id,
@@ -703,7 +748,7 @@ function AutoCompleteWidget(props) {
   const search = (event) => {
     setItems(examples.filter((example) => example.toString().toLowerCase().includes(event.query.toLowerCase())));
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     AutoComplete,
     {
       id,
@@ -711,7 +756,7 @@ function AutoCompleteWidget(props) {
       placeholder,
       ...primeProps,
       ...inputProps,
-      loadingIcon: /* @__PURE__ */ jsx17(Fragment3, {}),
+      loadingIcon: /* @__PURE__ */ jsx19(Fragment3, {}),
       required,
       autoFocus: autofocus,
       disabled: disabled || readonly,
@@ -752,10 +797,11 @@ import {
   schemaRequiresTrueValue
 } from "@rjsf/utils";
 import { Checkbox } from "primereact/checkbox";
-import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -783,7 +829,7 @@ function CheckboxWidget(props) {
   const description = options.description ?? schema.description;
   const primeProps = options.prime || {};
   return /* @__PURE__ */ jsxs11(Fragment4, { children: [
-    !hideLabel && !!description && /* @__PURE__ */ jsx18(
+    !hideLabel && !!description && /* @__PURE__ */ jsx20(
       DescriptionFieldTemplate,
       {
         id: descriptionId2(id),
@@ -794,11 +840,11 @@ function CheckboxWidget(props) {
       }
     ),
     /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "row", gap: "0.5rem", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx20(
         Checkbox,
         {
           inputId: id,
-          name: id,
+          name: htmlName || id,
           ...primeProps,
           disabled: disabled || readonly,
           autoFocus: autofocus,
@@ -810,7 +856,7 @@ function CheckboxWidget(props) {
           "aria-describedby": ariaDescribedByIds3(id)
         }
       ),
-      labelValue(/* @__PURE__ */ jsx18(Label, { id, text: label }), hideLabel, false)
+      labelValue(/* @__PURE__ */ jsx20(Label, { id, text: label }), hideLabel, false)
     ] })
   ] });
 }
@@ -826,10 +872,11 @@ import {
   descriptionId as descriptionId3,
   getTemplate as getTemplate6
 } from "@rjsf/utils";
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 function CheckboxesWidget(props) {
   const {
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -867,7 +914,7 @@ function CheckboxesWidget(props) {
       id,
       style: { display: "flex", flexDirection: "column", gap: "1rem", marginTop: "0.5rem", marginBottom: "0.5rem" },
       children: [
-        !hideLabel && !!description && /* @__PURE__ */ jsx19(
+        !hideLabel && !!description && /* @__PURE__ */ jsx21(
           DescriptionFieldTemplate,
           {
             id: descriptionId3(id),
@@ -881,11 +928,11 @@ function CheckboxesWidget(props) {
           const checked = enumOptionsIsSelected(option.value, checkboxesValues);
           const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
           return /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "row", gap: "0.5rem", alignItems: "center" }, children: [
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx21(
               Checkbox2,
               {
                 inputId: optionId(id, index),
-                name: id,
+                name: htmlName || id,
                 ...primeProps,
                 value: option.value,
                 checked,
@@ -897,7 +944,7 @@ function CheckboxesWidget(props) {
                 "aria-describedby": ariaDescribedByIds4(id)
               }
             ),
-            /* @__PURE__ */ jsx19(Label, { id: optionId(id, index), text: option.label })
+            /* @__PURE__ */ jsx21(Label, { id: optionId(id, index), text: option.label })
           ] }, index);
         })
       ]
@@ -911,7 +958,7 @@ import {
   getInputProps as getInputProps3
 } from "@rjsf/utils";
 import { ColorPicker } from "primereact/colorpicker";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function ColorWidget(props) {
   const {
     id,
@@ -935,7 +982,7 @@ function ColorWidget(props) {
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = () => onBlur && onBlur(id, value);
   const _onFocus = () => onFocus && onFocus(id, value);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     ColorPicker,
     {
       id,
@@ -962,7 +1009,7 @@ import {
   getInputProps as getInputProps4
 } from "@rjsf/utils";
 import { Password } from "primereact/password";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function PasswordWidget(props) {
   const {
     id,
@@ -986,7 +1033,7 @@ function PasswordWidget(props) {
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = () => onBlur && onBlur(id, value);
   const _onFocus = () => onFocus && onFocus(id, value);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     Password,
     {
       id,
@@ -1016,9 +1063,9 @@ import {
   optionId as optionId2
 } from "@rjsf/utils";
 import { RadioButton } from "primereact/radiobutton";
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 function RadioWidget(props) {
-  const { id, value, disabled, readonly, onChange, onBlur, onFocus, options } = props;
+  const { id, htmlName, value, disabled, readonly, onChange, onBlur, onFocus, options } = props;
   const primeProps = options.prime || {};
   const { enumOptions, enumDisabled, emptyValue } = options;
   const _onChange = (e) => {
@@ -1026,15 +1073,15 @@ function RadioWidget(props) {
   };
   const _onBlur = () => onBlur(id, value);
   const _onFocus = () => onFocus(id, value);
-  return /* @__PURE__ */ jsx22("div", { style: { display: "flex", flexDirection: "row", gap: "1rem" }, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ jsx24("div", { style: { display: "flex", flexDirection: "row", gap: "1rem" }, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = enumOptionsIsSelected2(option.value, value);
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     return /* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx24(
         RadioButton,
         {
           inputId: optionId2(id, index),
-          name: id,
+          name: htmlName || id,
           ...primeProps,
           onFocus: _onFocus,
           onBlur: _onBlur,
@@ -1045,7 +1092,7 @@ function RadioWidget(props) {
           "aria-describedby": ariaDescribedByIds7(id)
         }
       ),
-      /* @__PURE__ */ jsx22("label", { htmlFor: optionId2(id, index), style: { marginLeft: "8px" }, children: option.label })
+      /* @__PURE__ */ jsx24("label", { htmlFor: optionId2(id, index), style: { marginLeft: "8px" }, children: option.label })
     ] }, index);
   }) });
 }
@@ -1053,7 +1100,7 @@ function RadioWidget(props) {
 // src/RangeWidget/RangeWidget.tsx
 import { Slider } from "primereact/slider";
 import { ariaDescribedByIds as ariaDescribedByIds8, rangeSpec } from "@rjsf/utils";
-import { Fragment as Fragment5, jsx as jsx23 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx25 } from "react/jsx-runtime";
 function RangeWidget(props) {
   const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, id } = props;
   const primeProps = options.prime || {};
@@ -1063,7 +1110,7 @@ function RangeWidget(props) {
   };
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsx23(Fragment5, { children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(Fragment5, { children: /* @__PURE__ */ jsx25(
     Slider,
     {
       ...primeProps,
@@ -1086,14 +1133,15 @@ import {
   enumOptionsValueForIndex as enumOptionsValueForIndex2
 } from "@rjsf/utils";
 import { MultiSelect } from "primereact/multiselect";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function SelectWidget(props) {
   const { multiple = false } = props;
-  return multiple ? /* @__PURE__ */ jsx24(MultiSelectWidget, { ...props }) : /* @__PURE__ */ jsx24(SingleSelectWidget, { ...props });
+  return multiple ? /* @__PURE__ */ jsx26(MultiSelectWidget, { ...props }) : /* @__PURE__ */ jsx26(SingleSelectWidget, { ...props });
 }
 function SingleSelectWidget({
   schema,
   id,
+  htmlName,
   name,
   // remove this from dropdownProps
   options,
@@ -1114,7 +1162,6 @@ function SingleSelectWidget({
   registry,
   uiSchema,
   hideError,
-  formContext,
   ...dropdownProps
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
@@ -1127,11 +1174,11 @@ function SingleSelectWidget({
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, optEmptyVal));
   const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
   const { ...dropdownRemainingProps } = dropdownProps;
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     Dropdown,
     {
       id,
-      name: id,
+      name: htmlName || id,
       ...primeProps,
       value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
       options: (enumOptions ?? []).map(({ value: value2, label: label2 }, i) => ({
@@ -1152,6 +1199,7 @@ function SingleSelectWidget({
 }
 function MultiSelectWidget({
   id,
+  htmlName,
   options,
   disabled,
   placeholder,
@@ -1171,11 +1219,11 @@ function MultiSelectWidget({
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, optEmptyVal));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, optEmptyVal));
   const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     MultiSelect,
     {
       id,
-      name: id,
+      name: htmlName || id,
       ...primeProps,
       value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
       options: (enumOptions ?? []).map(({ value: value2, label }, i) => ({
@@ -1198,9 +1246,9 @@ function MultiSelectWidget({
 
 // src/TextareaWidget/TextareaWidget.tsx
 import { InputTextarea } from "primereact/inputtextarea";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function TextareaWidget(props) {
-  const { id, value, required, disabled, readonly, autofocus, onChange, onBlur, onFocus, options } = props;
+  const { id, htmlName, value, required, disabled, readonly, autofocus, onChange, onBlur, onFocus, options } = props;
   const primeProps = options.prime || {};
   let rows = 5;
   if (typeof options.rows === "string" || typeof options.rows === "number") {
@@ -1209,10 +1257,11 @@ function TextareaWidget(props) {
   const handleChange = (event) => {
     onChange(event.target.value === "" ? options.emptyValue : event.target.value);
   };
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     InputTextarea,
     {
       id,
+      name: htmlName || id,
       ...primeProps,
       value: value || "",
       required,
@@ -1232,7 +1281,7 @@ import {
   getInputProps as getInputProps5
 } from "@rjsf/utils";
 import { InputNumber } from "primereact/inputnumber";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function UpDownWidget(props) {
   const {
     id,
@@ -1257,7 +1306,7 @@ function UpDownWidget(props) {
   const _onChange = (event) => onChange(event.value === null ? options.emptyValue : value);
   const _onBlur = () => onBlur && onBlur(id, value);
   const _onFocus = () => onFocus && onFocus(id, value);
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28(
     InputNumber,
     {
       id,