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

package/dist/index.cjs

@@ -88,6 +88,7 @@ function ArrayFieldTemplate(props) {
     className,
     disabled,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     schema,
@@ -102,16 +103,12 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = (0, import_utils3.getTemplate)(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate2 = (0, import_utils3.getTemplate)(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ArrayFieldTitleTemplate2,
@@ -121,7 +118,8 @@ function ArrayFieldTemplate(props) {
         schema,
         uiSchema,
         required,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -142,15 +140,10 @@ function ArrayFieldTemplate(props) {
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: items && items.map(({ key, uiSchema: itemUiSchema = {}, ...props2 }) => {
-              const mergedUiSchema = {
-                ...itemUiSchema,
-                [import_utils3.UI_OPTIONS_KEY]: {
-                  ...itemUiSchema[import_utils3.UI_OPTIONS_KEY]
-                }
-              };
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrayFieldItemTemplate2, { ...props2, uiSchema: mergedUiSchema }, key);
-            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+              !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+              items
+            ] }),
             canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "div",
               {
@@ -186,6 +179,7 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     placeholder,
     value,
     required,
@@ -215,7 +209,7 @@ function BaseInputTemplate(props) {
     import_inputtext.InputText,
     {
       id,
-      name: id,
+      name: htmlName || id,
       placeholder,
       ...primeProps,
       ...inputProps,
@@ -403,7 +397,8 @@ var import_jsx_runtime13 = require("react/jsx-runtime");
 function ObjectFieldTemplate(props) {
   const {
     description,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     title,
     properties,
     disabled,
@@ -422,6 +417,7 @@ function ObjectFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -434,7 +430,8 @@ function ObjectFieldTemplate(props) {
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -447,6 +444,7 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ) }),
+    !showOptionalDataControlInTitle ? optionalDataControl : void 0,
     properties.map((prop) => prop.content),
     (0, import_utils10.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginTop: "1rem", textAlign: "right" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       AddButton2,
@@ -454,7 +452,7 @@ function ObjectFieldTemplate(props) {
         id: (0, import_utils10.buttonId)(fieldPathId, "add"),
         className: "rjsf-object-property-expand",
         icon: "pi pi-plus",
-        onClick: onAddClick(schema),
+        onClick: onAddProperty,
         disabled: disabled || readonly,
         registry
       }
@@ -462,43 +460,84 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
+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",
+        onClick: onAddClick,
+        title: label,
+        icon: "pi pi-plus",
+        style: { height: "1.5rem", width: "1.5rem" }
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      RemoveButton,
+      {
+        id,
+        registry,
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label,
+        style: { height: "1.5rem", width: "1.5rem" }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("em", { id, children: label });
+}
+
 // src/SubmitButton/SubmitButton.tsx
 var import_button3 = require("primereact/button");
 var import_utils11 = require("@rjsf/utils");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function SubmitButton({ uiSchema }) {
   const { submitText, norender, props: submitButtonProps = {} } = (0, import_utils11.getSubmitButtonOptions)(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_button3.Button, { type: "submit", label: submitText, ...submitButtonProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_button3.Button, { type: "submit", label: submitText, ...submitButtonProps });
 }
 
 // src/TitleField/TitleField.tsx
 var import_divider = require("primereact/divider");
 var import_utils12 = require("@rjsf/utils");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function TitleField({
   id,
   title,
   uiSchema,
-  required
+  required,
+  optionalDataControl
 }) {
   const uiOptions = (0, import_utils12.getUiOptions)(uiSchema);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("h5", { style: { margin: 0, fontSize: id === (0, import_utils12.titleId)("root") ? "1.5rem" : "1.2rem" }, children: [
-      uiOptions.title || title,
-      " ",
-      required ? "*" : ""
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_divider.Divider, { pt: { root: { style: { marginTop: "0.5rem" } } } })
+  let heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h5", { style: { margin: 0, fontSize: id === (0, import_utils12.titleId)("root") ? "1.5rem" : "1.2rem" }, children: [
+    uiOptions.title || title,
+    " ",
+    required ? "*" : ""
+  ] });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flexGrow: 1 }, children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { marginLeft: "-5px" }, children: optionalDataControl })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { id, children: [
+    heading,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_divider.Divider, { pt: { root: { style: { marginTop: "0.5rem" } } } })
   ] });
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
 var import_utils13 = require("@rjsf/utils");
 var import_inputtext2 = require("primereact/inputtext");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate({
   classNames,
   style,
@@ -506,8 +545,8 @@ function WrapIfAdditionalTemplate({
   disabled,
   id,
   label,
-  onDropPropertyClick,
-  onKeyChange,
+  onRemoveProperty,
+  onKeyRenameBlur,
   readonly,
   required,
   schema,
@@ -518,38 +557,37 @@ 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);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       className: classNames,
       style: { ...style, display: "flex", alignItems: "center", gap: "1rem" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: `${id}-key`, style: { display: "block", marginBottom: "0.5rem" }, children: keyLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: `${id}-key`, style: { display: "block", marginBottom: "0.5rem" }, children: keyLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             import_inputtext2.InputText,
             {
               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__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flex: 1 }, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { flex: 1 }, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           RemoveButton2,
           {
             id: (0, import_utils13.buttonId)(id, "remove"),
             className: "rjsf-object-property-remove",
             disabled: disabled || readonly,
-            onClick: onDropPropertyClick(label),
+            onClick: onRemoveProperty,
             registry
           }
         ) })
@@ -561,19 +599,26 @@ function WrapIfAdditionalTemplate({
 
 // src/ArrayFieldTitleTemplate/ArrayFieldTitleTemplate.tsx
 var import_utils14 = require("@rjsf/utils");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-function ArrayFieldTitleTemplate({ title, uiSchema, required, fieldPathId }) {
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ArrayFieldTitleTemplate({ title, uiSchema, required, fieldPathId, optionalDataControl }) {
   const uiOptions = (0, import_utils14.getUiOptions)(uiSchema);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("h5", { id: (0, import_utils14.titleId)(fieldPathId), style: { margin: 0, fontSize: "1.5rem", marginBottom: "0.2rem" }, children: [
+  let heading = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("h5", { id: (0, import_utils14.titleId)(fieldPathId), style: { margin: 0, fontSize: "1.5rem", marginBottom: "0.2rem" }, children: [
     uiOptions.title || title,
     " ",
     required ? "*" : ""
   ] });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flexGrow: 1 }, children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: optionalDataControl })
+    ] });
+  }
+  return heading;
 }
 
 // src/GridTemplate/GridTemplate.tsx
 var import_react = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var breakpoints = {
   xs: 0,
   sm: 576,
@@ -610,7 +655,7 @@ function GridTemplateRow(props) {
   const layoutGrid = uiSchema?.["ui:layoutGrid"] ?? {};
   const totalColumns = layoutGrid.columns ?? 12;
   const gap = layoutGrid.gap ?? "16px";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       style: {
@@ -637,7 +682,7 @@ function GridTemplateColumn(props) {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
   const span = getResponsiveSpan(props, breakpoint);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { gridColumn: `span ${span} / span ${span}`, ...style ?? {} }, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { gridColumn: `span ${span} / span ${span}`, ...style ?? {} }, ...rest, children });
 }
 
 // src/Templates/Templates.ts
@@ -662,6 +707,7 @@ function generateTemplates() {
     FieldTemplate,
     MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,
     GridTemplate
@@ -673,7 +719,7 @@ var Templates_default = generateTemplates();
 var import_react2 = require("react");
 var import_utils15 = require("@rjsf/utils");
 var import_autocomplete = require("primereact/autocomplete");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function AutoCompleteWidget(props) {
   const {
     id,
@@ -704,7 +750,7 @@ function AutoCompleteWidget(props) {
   const search = (event) => {
     setItems(examples.filter((example) => example.toString().toLowerCase().includes(event.query.toLowerCase())));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_autocomplete.AutoComplete,
     {
       id,
@@ -712,7 +758,7 @@ function AutoCompleteWidget(props) {
       placeholder,
       ...primeProps,
       ...inputProps,
-      loadingIcon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {}),
+      loadingIcon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {}),
       required,
       autoFocus: autofocus,
       disabled: disabled || readonly,
@@ -747,10 +793,11 @@ function AutoCompleteWidget(props) {
 // src/CheckboxWidget/CheckboxWidget.tsx
 var import_utils16 = require("@rjsf/utils");
 var import_checkbox = require("primereact/checkbox");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -777,8 +824,8 @@ function CheckboxWidget(props) {
   const _onFocus = () => onFocus && onFocus(id, value);
   const description = options.description ?? schema.description;
   const primeProps = options.prime || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    !hideLabel && !!description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    !hideLabel && !!description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       DescriptionFieldTemplate,
       {
         id: (0, import_utils16.descriptionId)(id),
@@ -788,12 +835,12 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", flexDirection: "row", gap: "0.5rem", alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", flexDirection: "row", gap: "0.5rem", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         import_checkbox.Checkbox,
         {
           inputId: id,
-          name: id,
+          name: htmlName || id,
           ...primeProps,
           disabled: disabled || readonly,
           autoFocus: autofocus,
@@ -805,7 +852,7 @@ function CheckboxWidget(props) {
           "aria-describedby": (0, import_utils16.ariaDescribedByIds)(id)
         }
       ),
-      (0, import_utils16.labelValue)(/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Label, { id, text: label }), hideLabel, false)
+      (0, import_utils16.labelValue)(/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label, { id, text: label }), hideLabel, false)
     ] })
   ] });
 }
@@ -813,10 +860,11 @@ function CheckboxWidget(props) {
 // src/CheckboxesWidget/CheckboxesWidget.tsx
 var import_checkbox2 = require("primereact/checkbox");
 var import_utils17 = require("@rjsf/utils");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function CheckboxesWidget(props) {
   const {
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -848,13 +896,13 @@ function CheckboxesWidget(props) {
   const _onBlur = () => onBlur(id, value);
   const _onFocus = () => onFocus(id, value);
   const description = options.description ?? schema.description;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       id,
       style: { display: "flex", flexDirection: "column", gap: "1rem", marginTop: "0.5rem", marginBottom: "0.5rem" },
       children: [
-        !hideLabel && !!description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        !hideLabel && !!description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           DescriptionFieldTemplate,
           {
             id: (0, import_utils17.descriptionId)(id),
@@ -867,12 +915,12 @@ function CheckboxesWidget(props) {
         Array.isArray(enumOptions) && enumOptions.map((option, index) => {
           const checked = (0, import_utils17.enumOptionsIsSelected)(option.value, checkboxesValues);
           const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", flexDirection: "row", gap: "0.5rem", alignItems: "center" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", flexDirection: "row", gap: "0.5rem", alignItems: "center" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               import_checkbox2.Checkbox,
               {
                 inputId: (0, import_utils17.optionId)(id, index),
-                name: id,
+                name: htmlName || id,
                 ...primeProps,
                 value: option.value,
                 checked,
@@ -884,7 +932,7 @@ function CheckboxesWidget(props) {
                 "aria-describedby": (0, import_utils17.ariaDescribedByIds)(id)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label, { id: (0, import_utils17.optionId)(id, index), text: option.label })
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Label, { id: (0, import_utils17.optionId)(id, index), text: option.label })
           ] }, index);
         })
       ]
@@ -895,7 +943,7 @@ function CheckboxesWidget(props) {
 // src/ColorWidget/ColorWidget.tsx
 var import_utils18 = require("@rjsf/utils");
 var import_colorpicker = require("primereact/colorpicker");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ColorWidget(props) {
   const {
     id,
@@ -919,7 +967,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__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_colorpicker.ColorPicker,
     {
       id,
@@ -943,7 +991,7 @@ function ColorWidget(props) {
 // src/PasswordWidget/PasswordWidget.tsx
 var import_utils19 = require("@rjsf/utils");
 var import_password = require("primereact/password");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function PasswordWidget(props) {
   const {
     id,
@@ -967,7 +1015,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__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_password.Password,
     {
       id,
@@ -992,9 +1040,9 @@ function PasswordWidget(props) {
 // src/RadioWidget/RadioWidget.tsx
 var import_utils20 = require("@rjsf/utils");
 var import_radiobutton = require("primereact/radiobutton");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("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) => {
@@ -1002,15 +1050,15 @@ function RadioWidget(props) {
   };
   const _onBlur = () => onBlur(id, value);
   const _onFocus = () => onFocus(id, value);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { display: "flex", flexDirection: "row", gap: "1rem" }, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { display: "flex", flexDirection: "row", gap: "1rem" }, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = (0, import_utils20.enumOptionsIsSelected)(option.value, value);
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         import_radiobutton.RadioButton,
         {
           inputId: (0, import_utils20.optionId)(id, index),
-          name: id,
+          name: htmlName || id,
           ...primeProps,
           onFocus: _onFocus,
           onBlur: _onBlur,
@@ -1021,7 +1069,7 @@ function RadioWidget(props) {
           "aria-describedby": (0, import_utils20.ariaDescribedByIds)(id)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: (0, import_utils20.optionId)(id, index), style: { marginLeft: "8px" }, children: option.label })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { htmlFor: (0, import_utils20.optionId)(id, index), style: { marginLeft: "8px" }, children: option.label })
     ] }, index);
   }) });
 }
@@ -1029,7 +1077,7 @@ function RadioWidget(props) {
 // src/RangeWidget/RangeWidget.tsx
 var import_slider = require("primereact/slider");
 var import_utils21 = require("@rjsf/utils");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function RangeWidget(props) {
   const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, id } = props;
   const primeProps = options.prime || {};
@@ -1039,7 +1087,7 @@ function RangeWidget(props) {
   };
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_slider.Slider,
     {
       ...primeProps,
@@ -1058,14 +1106,15 @@ function RangeWidget(props) {
 var import_dropdown = require("primereact/dropdown");
 var import_utils22 = require("@rjsf/utils");
 var import_multiselect = require("primereact/multiselect");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function SelectWidget(props) {
   const { multiple = false } = props;
-  return multiple ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MultiSelectWidget, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SingleSelectWidget, { ...props });
+  return multiple ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MultiSelectWidget, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SingleSelectWidget, { ...props });
 }
 function SingleSelectWidget({
   schema,
   id,
+  htmlName,
   name,
   // remove this from dropdownProps
   options,
@@ -1086,7 +1135,6 @@ function SingleSelectWidget({
   registry,
   uiSchema,
   hideError,
-  formContext,
   ...dropdownProps
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
@@ -1099,11 +1147,11 @@ function SingleSelectWidget({
   const _onFocus = ({ target }) => onFocus(id, (0, import_utils22.enumOptionsValueForIndex)(target && target.value, enumOptions, optEmptyVal));
   const selectedIndexes = (0, import_utils22.enumOptionsIndexForValue)(value, enumOptions, multiple);
   const { ...dropdownRemainingProps } = dropdownProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_dropdown.Dropdown,
     {
       id,
-      name: id,
+      name: htmlName || id,
       ...primeProps,
       value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
       options: (enumOptions ?? []).map(({ value: value2, label: label2 }, i) => ({
@@ -1124,6 +1172,7 @@ function SingleSelectWidget({
 }
 function MultiSelectWidget({
   id,
+  htmlName,
   options,
   disabled,
   placeholder,
@@ -1143,11 +1192,11 @@ function MultiSelectWidget({
   const _onBlur = ({ target }) => onBlur(id, (0, import_utils22.enumOptionsValueForIndex)(target && target.value, enumOptions, optEmptyVal));
   const _onFocus = ({ target }) => onFocus(id, (0, import_utils22.enumOptionsValueForIndex)(target && target.value, enumOptions, optEmptyVal));
   const selectedIndexes = (0, import_utils22.enumOptionsIndexForValue)(value, enumOptions, multiple);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_multiselect.MultiSelect,
     {
       id,
-      name: id,
+      name: htmlName || id,
       ...primeProps,
       value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
       options: (enumOptions ?? []).map(({ value: value2, label }, i) => ({
@@ -1170,9 +1219,9 @@ function MultiSelectWidget({
 
 // src/TextareaWidget/TextareaWidget.tsx
 var import_inputtextarea = require("primereact/inputtextarea");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("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") {
@@ -1181,10 +1230,11 @@ function TextareaWidget(props) {
   const handleChange = (event) => {
     onChange(event.target.value === "" ? options.emptyValue : event.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_inputtextarea.InputTextarea,
     {
       id,
+      name: htmlName || id,
       ...primeProps,
       value: value || "",
       required,
@@ -1201,7 +1251,7 @@ function TextareaWidget(props) {
 // src/UpDownWidget/UpDownWidget.tsx
 var import_utils23 = require("@rjsf/utils");
 var import_inputnumber = require("primereact/inputnumber");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function UpDownWidget(props) {
   const {
     id,
@@ -1226,7 +1276,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__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_inputnumber.InputNumber,
     {
       id,