@rjsf/fluentui-rc 6.0.0-beta.9 → 6.0.0

package/dist/index.esm.js

@@ -42,7 +42,7 @@ function AddButton({
   ...props
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ jsx2(Button, { ...props, icon: /* @__PURE__ */ jsx2(AddRegular, {}), title: translateString(TranslatableString.AddItemButton) });
+  return /* @__PURE__ */ jsx2(Button, { title: translateString(TranslatableString.AddItemButton), ...props, icon: /* @__PURE__ */ jsx2(AddRegular, {}) });
 }
 
 // src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -60,7 +60,20 @@ var useStyles2 = makeStyles2({
   }
 });
 function ArrayFieldTemplate(props) {
-  const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
+  const {
+    canAdd,
+    disabled,
+    fieldPathId,
+    uiSchema,
+    items,
+    optionalDataControl,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title
+  } = props;
   const classes = useStyles2();
   const uiOptions = getUiOptions2(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate2(
@@ -68,16 +81,12 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = getTemplate2(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = getTemplate2(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -85,18 +94,19 @@ function ArrayFieldTemplate(props) {
     /* @__PURE__ */ jsx3(
       ArrayFieldTitleTemplate,
       {
-        idSchema,
+        fieldPathId,
         title: uiOptions.title || title,
         schema,
         uiSchema,
         required,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     /* @__PURE__ */ jsx3(
       ArrayFieldDescriptionTemplate,
       {
-        idSchema,
+        fieldPathId,
         description: uiOptions.description || schema.description,
         schema,
         uiSchema,
@@ -104,11 +114,12 @@ function ArrayFieldTemplate(props) {
       }
     ),
     /* @__PURE__ */ jsxs2(Flex2, { column: true, className: classes.arrayItemList, children: [
-      items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx3(ArrayFieldItemTemplate2, { ...itemProps }, key)),
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+      items,
       canAdd && /* @__PURE__ */ jsx3(Flex2, { hAlign: "end", children: /* @__PURE__ */ jsx3(
         AddButton2,
         {
-          id: buttonId(idSchema, "add"),
+          id: buttonId(fieldPathId, "add"),
           className: "rjsf-array-item-add",
           onClick: onAddClick,
           disabled: disabled || readonly,
@@ -116,7 +127,7 @@ function ArrayFieldTemplate(props) {
           registry
         }
       ) })
-    ] }, `array-item-list-${idSchema.$id}`)
+    ] }, `array-item-list-${fieldPathId.$id}`)
   ] });
 }
 
@@ -142,6 +153,7 @@ var useStyles3 = makeStyles3({
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     placeholder,
     required,
     readonly,
@@ -172,7 +184,7 @@ function BaseInputTemplate(props) {
       Input,
       {
         id,
-        name: id,
+        name: htmlName || id,
         placeholder,
         autoFocus: autofocus,
         required,
@@ -322,12 +334,12 @@ var useStyles6 = makeStyles6({
   errorLabel: { color: tokens3.colorPaletteRedForeground1 }
 });
 function FieldErrorTemplate(props) {
-  const { errors = [], idSchema } = props;
+  const { errors = [], fieldPathId } = props;
   const classes = useStyles6();
   if (errors.length === 0) {
     return null;
   }
-  const id = errorId(idSchema);
+  const id = errorId(fieldPathId);
   return /* @__PURE__ */ jsx8("ul", { className: classes.list, children: errors.map((error, i) => {
     return /* @__PURE__ */ jsx8("li", { className: classes.listItem, children: /* @__PURE__ */ jsx8("small", { className: classes.errorLabel, id, children: error }) }, i);
   }) });
@@ -338,11 +350,11 @@ import { Caption1 } from "@fluentui/react-components";
 import { helpId } from "@rjsf/utils";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
-  const { idSchema, help } = props;
+  const { fieldPathId, help } = props;
   if (!help) {
     return null;
   }
-  const id = helpId(idSchema);
+  const id = helpId(fieldPathId);
   return /* @__PURE__ */ jsx9(Caption1, { id, children: help });
 }
 
@@ -363,8 +375,9 @@ function FieldTemplate(props) {
     displayLabel,
     hidden,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     required,
     rawErrors = [],
@@ -393,8 +406,9 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -426,6 +440,23 @@ function GridTemplate(props) {
   return /* @__PURE__ */ jsx11("div", { style, ...rest, children });
 }
 
+// src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
+import { makeStyles as makeStyles7 } from "@fluentui/react-components";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var useStyles7 = makeStyles7({
+  root: {
+    "> div": { marginBottom: "4px" }
+  }
+});
+function MultiSchemaFieldTemplate(props) {
+  const { selector, optionSchemaField } = props;
+  const styles = useStyles7();
+  return /* @__PURE__ */ jsxs6("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsx12("div", { children: selector }),
+    optionSchemaField
+  ] });
+}
+
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
 import { Flex as Flex3 } from "@fluentui/react-migration-v0-v9";
 import {
@@ -436,7 +467,7 @@ import {
   titleId,
   buttonId as buttonId2
 } from "@rjsf/utils";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -446,10 +477,11 @@ function ObjectFieldTemplate(props) {
     disabled,
     readonly,
     uiSchema,
-    idSchema,
+    fieldPathId,
     schema,
     formData,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     registry
   } = props;
   const uiOptions = getUiOptions4(uiSchema);
@@ -459,45 +491,48 @@ function ObjectFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    title && /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    title && /* @__PURE__ */ jsx13(
       TitleFieldTemplate,
       {
-        id: titleId(idSchema),
+        id: titleId(fieldPathId),
         title,
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
-    description && /* @__PURE__ */ jsx12(
+    description && /* @__PURE__ */ jsx13(
       DescriptionFieldTemplate,
       {
-        id: descriptionId(idSchema),
+        id: descriptionId(fieldPathId),
         description,
         schema,
         uiSchema,
         registry
       }
     ),
-    /* @__PURE__ */ jsxs6(Flex3, { fill: true, column: true, gap: "gap.medium", children: [
+    /* @__PURE__ */ jsxs7(Flex3, { fill: true, column: true, gap: "gap.medium", children: [
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
       properties.map(
         (element, index) => (
           // Remove the <Grid> if the inner element is hidden as the <Grid>
           // itself would otherwise still take up space.
-          element.hidden ? element.content : /* @__PURE__ */ jsx12(Flex3, { column: true, fill: true, style: { marginBottom: "10px" }, children: element.content }, index)
+          element.hidden ? element.content : /* @__PURE__ */ jsx13(Flex3, { column: true, fill: true, style: { marginBottom: "10px" }, children: element.content }, index)
         )
       ),
-      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx12(Flex3, { hAlign: "end", children: /* @__PURE__ */ jsx12(
+      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx13(Flex3, { hAlign: "end", children: /* @__PURE__ */ jsx13(
         AddButton2,
         {
-          id: buttonId2(idSchema, "add"),
+          id: buttonId2(fieldPathId, "add"),
           className: "rjsf-object-property-expand",
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           uiSchema,
           registry
@@ -507,28 +542,66 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
+import { AddSquareMultipleRegular, SubtractSquareMultipleRegular } from "@fluentui/react-icons";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ jsx14(
+      FluentIconButton,
+      {
+        id,
+        registry,
+        icon: /* @__PURE__ */ jsx14(AddSquareMultipleRegular, {}),
+        className: "rjsf-add-optional-data",
+        onClick: onAddClick,
+        title: label,
+        size: "small",
+        appearance: "secondary"
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ jsx14(
+      FluentIconButton,
+      {
+        id,
+        registry,
+        icon: /* @__PURE__ */ jsx14(SubtractSquareMultipleRegular, {}),
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label,
+        size: "small",
+        appearance: "secondary"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx14("em", { id, children: label });
+}
+
 // src/SubmitButton/SubmitButton.tsx
 import { getSubmitButtonOptions } from "@rjsf/utils";
-import { Button as Button3, makeStyles as makeStyles7, tokens as tokens4 } from "@fluentui/react-components";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var useStyles7 = makeStyles7({
+import { Button as Button3, makeStyles as makeStyles8, tokens as tokens4 } from "@fluentui/react-components";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var useStyles8 = makeStyles8({
   buttonRow: {
     marginTop: tokens4.spacingVerticalL
   }
 });
 function SubmitButton({ uiSchema }) {
-  const classes = useStyles7();
+  const classes = useStyles8();
   const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ jsx13("div", { className: classes.buttonRow, children: /* @__PURE__ */ jsx13(Button3, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
+  return /* @__PURE__ */ jsx15("div", { className: classes.buttonRow, children: /* @__PURE__ */ jsx15(Button3, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
-import { Text as Text4, Divider, makeStyles as makeStyles8 } from "@fluentui/react-components";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
-var useStyles8 = makeStyles8({
+import { Flex as Flex4 } from "@fluentui/react-migration-v0-v9";
+import { Text as Text4, Divider, makeStyles as makeStyles9 } from "@fluentui/react-components";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+var useStyles9 = makeStyles9({
   root: {
     marginTop: "8px",
     marginBottom: "8px"
@@ -536,12 +609,20 @@ var useStyles8 = makeStyles8({
 });
 function TitleField({
   id,
-  title
+  title,
+  optionalDataControl
 }) {
-  const classes = useStyles8();
-  return /* @__PURE__ */ jsxs7("div", { id, className: classes.root, children: [
-    /* @__PURE__ */ jsx14(Text4, { as: "h5", size: 600, children: title }),
-    /* @__PURE__ */ jsx14(Divider, {})
+  const classes = useStyles9();
+  let heading = /* @__PURE__ */ jsx16(Text4, { as: "h5", size: 600, style: { marginBlock: 0 }, children: title });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ jsxs8(Flex4, { children: [
+      /* @__PURE__ */ jsx16(Flex4, { fill: true, children: heading }),
+      /* @__PURE__ */ jsx16(Flex4, { hAlign: "end", children: optionalDataControl })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs8("div", { id, className: classes.root, children: [
+    heading,
+    /* @__PURE__ */ jsx16(Divider, {})
   ] });
 }
 
@@ -551,10 +632,10 @@ import {
   buttonId as buttonId3,
   TranslatableString as TranslatableString4
 } from "@rjsf/utils";
-import { Field as Field2, Input as Input2, makeStyles as makeStyles9 } from "@fluentui/react-components";
-import { Flex as Flex4 } from "@fluentui/react-migration-v0-v9";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-var useStyles9 = makeStyles9({
+import { Field as Field2, Input as Input2, makeStyles as makeStyles10 } from "@fluentui/react-components";
+import { Flex as Flex5 } from "@fluentui/react-migration-v0-v9";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var useStyles10 = makeStyles10({
   input: {
     width: "100%"
   },
@@ -570,8 +651,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemoveProperty,
+    onKeyRenameBlur,
     readonly,
     required,
     schema,
@@ -579,7 +660,7 @@ function WrapIfAdditionalTemplate(props) {
     registry
   } = props;
   const { templates, translateString } = registry;
-  const classes = useStyles9();
+  const classes = useStyles10();
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
   const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
@@ -590,11 +671,10 @@ function WrapIfAdditionalTemplate(props) {
     fontWeight: "bold"
   };
   if (!additional) {
-    return /* @__PURE__ */ jsx15("div", { className: classNames, style, children });
+    return /* @__PURE__ */ jsx17("div", { className: classNames, style, children });
   }
-  const handleBlur = ({ target }) => onKeyChange(target.value);
-  return /* @__PURE__ */ jsxs8(Flex4, { gap: "gap.medium", vAlign: "center", className: classNames, style, children: [
-    /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(Field2, { label: keyLabel, required, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs9(Flex5, { gap: "gap.medium", vAlign: "center", className: classNames, style, children: [
+    /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(Field2, { label: keyLabel, required, children: /* @__PURE__ */ jsx17(
       Input2,
       {
         required,
@@ -602,15 +682,15 @@ function WrapIfAdditionalTemplate(props) {
         disabled: disabled || readonly,
         id: `${id}-key`,
         name: `${id}-key`,
-        onBlur: !readonly ? handleBlur : void 0,
+        onBlur: !readonly ? onKeyRenameBlur : void 0,
         type: "text",
         input: {
           className: classes.input
         }
       }
     ) }) }),
-    /* @__PURE__ */ jsx15("div", { children }),
-    /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx17("div", { children }),
+    /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(
       RemoveButton2,
       {
         id: buttonId3(id, "remove"),
@@ -618,7 +698,7 @@ function WrapIfAdditionalTemplate(props) {
         className: "rjsf-object-property-remove",
         style: btnStyle,
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema,
         registry
       }
@@ -646,7 +726,9 @@ function generateTemplates() {
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
   };
@@ -661,11 +743,12 @@ import {
   schemaRequiresTrueValue
 } from "@rjsf/utils";
 import { Checkbox } from "@fluentui/react-components";
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     schema,
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -686,11 +769,11 @@ function CheckboxWidget(props) {
   );
   const required = schemaRequiresTrueValue(schema);
   const _onChange = ({ target: { checked } }) => onChange(checked);
-  const _onBlur = ({ target }) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }) => onFocus(id, target && target.value);
+  const _onBlur = ({ target }) => onBlur(id, target && target.checked);
+  const _onFocus = ({ target }) => onFocus(id, target && target.checked);
   const description = options.description ?? schema.description;
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
-    !hideLabel && description && /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    !hideLabel && description && /* @__PURE__ */ jsx18(
       DescriptionFieldTemplate,
       {
         id: descriptionId2(id),
@@ -700,11 +783,11 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx18(
       Checkbox,
       {
         id,
-        name: id,
+        name: htmlName || id,
         label,
         checked: typeof value === "undefined" ? false : Boolean(value),
         required,
@@ -730,12 +813,13 @@ import {
   optionId
 } from "@rjsf/utils";
 import { Label as Label2, Checkbox as Checkbox2 } from "@fluentui/react-components";
-import { Flex as Flex5 } from "@fluentui/react-migration-v0-v9";
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Flex as Flex6 } from "@fluentui/react-migration-v0-v9";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function CheckboxesWidget({
   label,
   hideLabel,
   id,
+  htmlName,
   disabled,
   options,
   value,
@@ -757,19 +841,19 @@ function CheckboxesWidget({
   };
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
-  return /* @__PURE__ */ jsxs10(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
     labelValue2(
-      /* @__PURE__ */ jsx17(Label2, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ jsx19(Label2, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx17(Flex5, { column: !inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+    /* @__PURE__ */ jsx19(Flex6, { column: !inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = enumOptionsIsSelected(option.value, checkboxesValues);
       const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx19(
         Checkbox2,
         {
           id: optionId(id, index),
-          name: id,
+          name: htmlName || id,
           label: option.label,
           checked,
           disabled: disabled || itemDisabled || readonly,
@@ -794,9 +878,10 @@ import {
   optionId as optionId2
 } from "@rjsf/utils";
 import { Label as Label3, Radio, RadioGroup } from "@fluentui/react-components";
-import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function RadioWidget({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -813,16 +898,16 @@ function RadioWidget({
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
   const selectedIndex = enumOptionsIndexForValue(value, enumOptions) ?? void 0;
-  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
     labelValue3(
-      /* @__PURE__ */ jsx18(Label3, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ jsx20(Label3, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx20(
       RadioGroup,
       {
         id,
-        name: id,
+        name: htmlName || id,
         layout: inline ? "horizontal" : "vertical",
         value: selectedIndex,
         onChange: _onChange,
@@ -831,7 +916,7 @@ function RadioWidget({
         "aria-describedby": ariaDescribedByIds4(id),
         children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
           const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          return /* @__PURE__ */ jsx18(
+          return /* @__PURE__ */ jsx20(
             Radio,
             {
               id: optionId2(id, index),
@@ -854,7 +939,7 @@ import {
   rangeSpec
 } from "@rjsf/utils";
 import { Label as Label4, Slider } from "@fluentui/react-components";
-import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function RangeWidget(props) {
   const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } = props;
   const sliderProps = { value, label, id, name: id, ...rangeSpec(schema) };
@@ -863,12 +948,12 @@ function RangeWidget(props) {
   };
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
     labelValue4(
-      /* @__PURE__ */ jsx19(Label4, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ jsx21(Label4, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx21(
       Slider,
       {
         disabled: disabled || readonly,
@@ -890,7 +975,7 @@ import {
   labelValue as labelValue5
 } from "@rjsf/utils";
 import { Dropdown, Field as Field3, Option } from "@fluentui/react-components";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function getValue(data, multiple) {
   if (multiple) {
     return data.selectedOptions;
@@ -899,6 +984,7 @@ function getValue(data, multiple) {
 }
 function SelectWidget({
   id,
+  htmlName,
   options,
   label,
   hideLabel,
@@ -931,17 +1017,17 @@ function SelectWidget({
     return onChange(enumOptionsValueForIndex3(newValue, enumOptions, optEmptyVal));
   };
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     Field3,
     {
       label: labelValue5(label, hideLabel),
       validationState: rawErrors.length ? "error" : void 0,
       required,
-      children: /* @__PURE__ */ jsxs13(
+      children: /* @__PURE__ */ jsxs14(
         Dropdown,
         {
           id,
-          name: id,
+          name: htmlName || id,
           multiselect: multiple,
           className: "form-control",
           value: dropdownValue,
@@ -953,10 +1039,10 @@ function SelectWidget({
           selectedOptions: selectedIndexesAsArray,
           "aria-describedby": ariaDescribedByIds6(id),
           children: [
-            showPlaceholderOption && /* @__PURE__ */ jsx20(Option, { value: "", children: placeholder || "" }),
+            showPlaceholderOption && /* @__PURE__ */ jsx22(Option, { value: "", children: placeholder || "" }),
             Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
               const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-              return /* @__PURE__ */ jsx20(Option, { value: String(i), disabled: disabled2, children: label2 }, i);
+              return /* @__PURE__ */ jsx22(Option, { value: String(i), disabled: disabled2, children: label2 }, i);
             })
           ]
         }
@@ -967,13 +1053,13 @@ function SelectWidget({
 var SelectWidget_default = SelectWidget;
 
 // src/TextareaWidget/TextareaWidget.tsx
-import { Label as Label5, Textarea, makeStyles as makeStyles10 } from "@fluentui/react-components";
+import { Label as Label5, Textarea, makeStyles as makeStyles11 } from "@fluentui/react-components";
 import {
   ariaDescribedByIds as ariaDescribedByIds7,
   labelValue as labelValue6
 } from "@rjsf/utils";
-import { Fragment as Fragment8, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
-var useStyles10 = makeStyles10({
+import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+var useStyles11 = makeStyles11({
   label: {
     paddingTop: "2px",
     paddingBottom: "2px",
@@ -983,6 +1069,7 @@ var useStyles10 = makeStyles10({
 function TextareaWidget(props) {
   const {
     id,
+    htmlName,
     placeholder,
     required,
     readonly,
@@ -998,7 +1085,7 @@ function TextareaWidget(props) {
     options,
     schema
   } = props;
-  const classes = useStyles10();
+  const classes = useStyles11();
   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);
@@ -1006,16 +1093,16 @@ function TextareaWidget(props) {
   if (typeof options.rows === "string" || typeof options.rows === "number") {
     rows = options.rows;
   }
-  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment8, { children: [
     labelValue6(
-      /* @__PURE__ */ jsx21(Label5, { htmlFor: id, required, disabled, className: classes.label, children: label }),
+      /* @__PURE__ */ jsx23(Label5, { htmlFor: id, required, disabled, className: classes.label, children: label }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx23(
       Textarea,
       {
         id,
-        name: id,
+        name: htmlName || id,
         placeholder,
         autoFocus: autofocus,
         required,
@@ -1062,14 +1149,14 @@ var FluentForm_default = generateForm();
 // src/FluentUIRCFrameProvider.tsx
 import { FluentProvider, RendererProvider, createDOMRenderer, teamsLightTheme } from "@fluentui/react-components";
 import { useMemo } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var FluentWrapper = (props) => {
   const { children, targetDocument } = props;
   const renderer = useMemo(() => createDOMRenderer(targetDocument), [targetDocument]);
-  return /* @__PURE__ */ jsx22(RendererProvider, { renderer, targetDocument, children: /* @__PURE__ */ jsx22(FluentProvider, { targetDocument, theme: teamsLightTheme, children }) });
+  return /* @__PURE__ */ jsx24(RendererProvider, { renderer, targetDocument, children: /* @__PURE__ */ jsx24(FluentProvider, { targetDocument, theme: teamsLightTheme, children }) });
 };
 var __createFluentUIRCFrameProvider = (props) => ({ document }) => {
-  return /* @__PURE__ */ jsx22(FluentWrapper, { targetDocument: document, children: props.children });
+  return /* @__PURE__ */ jsx24(FluentWrapper, { targetDocument: document, children: props.children });
 };
 
 // src/index.ts