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

package/dist/{index.js → index.cjs}

@@ -74,7 +74,7 @@ function AddButton({
   ...props
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_components2.Button, { ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_icons.AddRegular, {}), title: translateString(import_utils2.TranslatableString.AddItemButton) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_components2.Button, { title: translateString(import_utils2.TranslatableString.AddItemButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_icons.AddRegular, {}) });
 }
 
 // src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -88,7 +88,20 @@ var useStyles2 = (0, import_react_components3.makeStyles)({
   }
 });
 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 = (0, import_utils3.getUiOptions)(uiSchema);
   const ArrayFieldDescriptionTemplate = (0, import_utils3.getTemplate)(
@@ -96,16 +109,12 @@ function ArrayFieldTemplate(props) {
     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;
@@ -113,18 +122,19 @@ function ArrayFieldTemplate(props) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ArrayFieldTitleTemplate,
       {
-        idSchema,
+        fieldPathId,
         title: uiOptions.title || title,
         schema,
         uiSchema,
         required,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ArrayFieldDescriptionTemplate,
       {
-        idSchema,
+        fieldPathId,
         description: uiOptions.description || schema.description,
         schema,
         uiSchema,
@@ -132,11 +142,12 @@ function ArrayFieldTemplate(props) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_migration_v0_v92.Flex, { column: true, className: classes.arrayItemList, 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_react_migration_v0_v92.Flex, { hAlign: "end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         AddButton2,
         {
-          id: (0, import_utils3.buttonId)(idSchema, "add"),
+          id: (0, import_utils3.buttonId)(fieldPathId, "add"),
           className: "rjsf-array-item-add",
           onClick: onAddClick,
           disabled: disabled || readonly,
@@ -144,7 +155,7 @@ function ArrayFieldTemplate(props) {
           registry
         }
       ) })
-    ] }, `array-item-list-${idSchema.$id}`)
+    ] }, `array-item-list-${fieldPathId.$id}`)
   ] });
 }
 
@@ -165,6 +176,7 @@ var useStyles3 = (0, import_react_components4.makeStyles)({
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     placeholder,
     required,
     readonly,
@@ -195,7 +207,7 @@ function BaseInputTemplate(props) {
       import_react_components4.Input,
       {
         id,
-        name: id,
+        name: htmlName || id,
         placeholder,
         autoFocus: autofocus,
         required,
@@ -345,12 +357,12 @@ var useStyles6 = (0, import_react_components8.makeStyles)({
   errorLabel: { color: import_react_components8.tokens.colorPaletteRedForeground1 }
 });
 function FieldErrorTemplate(props) {
-  const { errors = [], idSchema } = props;
+  const { errors = [], fieldPathId } = props;
   const classes = useStyles6();
   if (errors.length === 0) {
     return null;
   }
-  const id = (0, import_utils7.errorId)(idSchema);
+  const id = (0, import_utils7.errorId)(fieldPathId);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: classes.list, children: errors.map((error, i) => {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: classes.listItem, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("small", { className: classes.errorLabel, id, children: error }) }, i);
   }) });
@@ -361,11 +373,11 @@ var import_react_components9 = require("@fluentui/react-components");
 var import_utils8 = require("@rjsf/utils");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function FieldHelpTemplate(props) {
-  const { idSchema, help } = props;
+  const { fieldPathId, help } = props;
   if (!help) {
     return null;
   }
-  const id = (0, import_utils8.helpId)(idSchema);
+  const id = (0, import_utils8.helpId)(fieldPathId);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components9.Caption1, { id, children: help });
 }
 
@@ -383,8 +395,9 @@ function FieldTemplate(props) {
     displayLabel,
     hidden,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     required,
     rawErrors = [],
@@ -413,8 +426,9 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -446,10 +460,27 @@ function GridTemplate(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style, ...rest, children });
 }
 
+// src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
+var import_react_components11 = require("@fluentui/react-components");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var useStyles7 = (0, import_react_components11.makeStyles)({
+  root: {
+    "> div": { marginBottom: "4px" }
+  }
+});
+function MultiSchemaFieldTemplate(props) {
+  const { selector, optionSchemaField } = props;
+  const styles = useStyles7();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: selector }),
+    optionSchemaField
+  ] });
+}
+
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
 var import_react_migration_v0_v94 = require("@fluentui/react-migration-v0-v9");
 var import_utils10 = require("@rjsf/utils");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -459,10 +490,11 @@ function ObjectFieldTemplate(props) {
     disabled,
     readonly,
     uiSchema,
-    idSchema,
+    fieldPathId,
     schema,
     formData,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     registry
   } = props;
   const uiOptions = (0, import_utils10.getUiOptions)(uiSchema);
@@ -472,45 +504,48 @@ function ObjectFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       TitleFieldTemplate,
       {
-        id: (0, import_utils10.titleId)(idSchema),
+        id: (0, import_utils10.titleId)(fieldPathId),
         title,
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       DescriptionFieldTemplate,
       {
-        id: (0, import_utils10.descriptionId)(idSchema),
+        id: (0, import_utils10.descriptionId)(fieldPathId),
         description,
         schema,
         uiSchema,
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_migration_v0_v94.Flex, { fill: true, column: true, gap: "gap.medium", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_migration_v0_v94.Flex, { 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__ */ (0, import_jsx_runtime12.jsx)(import_react_migration_v0_v94.Flex, { column: true, fill: true, style: { marginBottom: "10px" }, children: element.content }, index)
+          element.hidden ? element.content : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_migration_v0_v94.Flex, { column: true, fill: true, style: { marginBottom: "10px" }, children: element.content }, index)
         )
       ),
-      (0, import_utils10.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_migration_v0_v94.Flex, { hAlign: "end", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      (0, import_utils10.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_migration_v0_v94.Flex, { hAlign: "end", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         AddButton2,
         {
-          id: (0, import_utils10.buttonId)(idSchema, "add"),
+          id: (0, import_utils10.buttonId)(fieldPathId, "add"),
           className: "rjsf-object-property-expand",
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           uiSchema,
           registry
@@ -520,28 +555,66 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
+var import_react_icons3 = require("@fluentui/react-icons");
+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)(
+      FluentIconButton,
+      {
+        id,
+        registry,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons3.AddSquareMultipleRegular, {}),
+        className: "rjsf-add-optional-data",
+        onClick: onAddClick,
+        title: label,
+        size: "small",
+        appearance: "secondary"
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      FluentIconButton,
+      {
+        id,
+        registry,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons3.SubtractSquareMultipleRegular, {}),
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label,
+        size: "small",
+        appearance: "secondary"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("em", { id, children: label });
+}
+
 // src/SubmitButton/SubmitButton.tsx
 var import_utils11 = require("@rjsf/utils");
-var import_react_components11 = require("@fluentui/react-components");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var useStyles7 = (0, import_react_components11.makeStyles)({
+var import_react_components12 = require("@fluentui/react-components");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var useStyles8 = (0, import_react_components12.makeStyles)({
   buttonRow: {
-    marginTop: import_react_components11.tokens.spacingVerticalL
+    marginTop: import_react_components12.tokens.spacingVerticalL
   }
 });
 function SubmitButton({ uiSchema }) {
-  const classes = useStyles7();
+  const classes = useStyles8();
   const { submitText, norender, props: submitButtonProps } = (0, import_utils11.getSubmitButtonOptions)(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: classes.buttonRow, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components11.Button, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: classes.buttonRow, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components12.Button, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
-var import_react_components12 = require("@fluentui/react-components");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var useStyles8 = (0, import_react_components12.makeStyles)({
+var import_react_migration_v0_v95 = require("@fluentui/react-migration-v0-v9");
+var import_react_components13 = require("@fluentui/react-components");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var useStyles9 = (0, import_react_components13.makeStyles)({
   root: {
     marginTop: "8px",
     marginBottom: "8px"
@@ -549,21 +622,29 @@ var useStyles8 = (0, import_react_components12.makeStyles)({
 });
 function TitleField({
   id,
-  title
+  title,
+  optionalDataControl
 }) {
-  const classes = useStyles8();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { id, className: classes.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components12.Text, { as: "h5", size: 600, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components12.Divider, {})
+  const classes = useStyles9();
+  let heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_components13.Text, { as: "h5", size: 600, style: { marginBlock: 0 }, children: title });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_migration_v0_v95.Flex, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_migration_v0_v95.Flex, { fill: true, children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_migration_v0_v95.Flex, { hAlign: "end", children: optionalDataControl })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { id, className: classes.root, children: [
+    heading,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_components13.Divider, {})
   ] });
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
 var import_utils12 = require("@rjsf/utils");
-var import_react_components13 = require("@fluentui/react-components");
-var import_react_migration_v0_v95 = require("@fluentui/react-migration-v0-v9");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var useStyles9 = (0, import_react_components13.makeStyles)({
+var import_react_components14 = require("@fluentui/react-components");
+var import_react_migration_v0_v96 = require("@fluentui/react-migration-v0-v9");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var useStyles10 = (0, import_react_components14.makeStyles)({
   input: {
     width: "100%"
   },
@@ -579,8 +660,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemoveProperty,
+    onKeyRenameBlur,
     readonly,
     required,
     schema,
@@ -588,7 +669,7 @@ function WrapIfAdditionalTemplate(props) {
     registry
   } = props;
   const { templates, translateString } = registry;
-  const classes = useStyles9();
+  const classes = useStyles10();
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
   const keyLabel = translateString(import_utils12.TranslatableString.KeyLabel, [label]);
   const additional = import_utils12.ADDITIONAL_PROPERTY_FLAG in schema;
@@ -599,27 +680,26 @@ function WrapIfAdditionalTemplate(props) {
     fontWeight: "bold"
   };
   if (!additional) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)(import_react_migration_v0_v95.Flex, { gap: "gap.medium", vAlign: "center", className: classNames, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components13.Field, { label: keyLabel, required, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_components13.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_migration_v0_v96.Flex, { gap: "gap.medium", vAlign: "center", className: classNames, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_components14.Field, { label: keyLabel, required, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_react_components14.Input,
       {
         required,
         defaultValue: label,
         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__ */ (0, import_jsx_runtime15.jsx)("div", { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       RemoveButton2,
       {
         id: (0, import_utils12.buttonId)(id, "remove"),
@@ -627,7 +707,7 @@ function WrapIfAdditionalTemplate(props) {
         className: "rjsf-object-property-remove",
         style: btnStyle,
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema,
         registry
       }
@@ -655,7 +735,9 @@ function generateTemplates() {
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
   };
@@ -664,12 +746,13 @@ var Templates_default = generateTemplates();
 
 // src/CheckboxWidget/CheckboxWidget.tsx
 var import_utils13 = require("@rjsf/utils");
-var import_react_components14 = require("@fluentui/react-components");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react_components15 = require("@fluentui/react-components");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
     schema,
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -690,11 +773,11 @@ function CheckboxWidget(props) {
   );
   const required = (0, import_utils13.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__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       DescriptionFieldTemplate,
       {
         id: (0, import_utils13.descriptionId)(id),
@@ -704,11 +787,11 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_react_components14.Checkbox,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_react_components15.Checkbox,
       {
         id,
-        name: id,
+        name: htmlName || id,
         label,
         checked: typeof value === "undefined" ? false : Boolean(value),
         required,
@@ -725,13 +808,14 @@ function CheckboxWidget(props) {
 
 // src/CheckboxesWidget/CheckboxesWidget.tsx
 var import_utils14 = require("@rjsf/utils");
-var import_react_components15 = require("@fluentui/react-components");
-var import_react_migration_v0_v96 = require("@fluentui/react-migration-v0-v9");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react_components16 = require("@fluentui/react-components");
+var import_react_migration_v0_v97 = require("@fluentui/react-migration-v0-v9");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CheckboxesWidget({
   label,
   hideLabel,
   id,
+  htmlName,
   disabled,
   options,
   value,
@@ -753,19 +837,19 @@ function CheckboxesWidget({
   };
   const _onBlur = ({ target }) => onBlur(id, (0, import_utils14.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, (0, import_utils14.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
     (0, import_utils14.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_components15.Label, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_components16.Label, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_migration_v0_v96.Flex, { column: !inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_migration_v0_v97.Flex, { column: !inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = (0, import_utils14.enumOptionsIsSelected)(option.value, checkboxesValues);
       const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_react_components15.Checkbox,
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_react_components16.Checkbox,
         {
           id: (0, import_utils14.optionId)(id, index),
-          name: id,
+          name: htmlName || id,
           label: option.label,
           checked,
           disabled: disabled || itemDisabled || readonly,
@@ -783,10 +867,11 @@ function CheckboxesWidget({
 
 // src/RadioWidget/RadioWidget.tsx
 var import_utils15 = require("@rjsf/utils");
-var import_react_components16 = require("@fluentui/react-components");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react_components17 = require("@fluentui/react-components");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function RadioWidget({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -803,16 +888,16 @@ function RadioWidget({
   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));
   const selectedIndex = (0, import_utils15.enumOptionsIndexForValue)(value, enumOptions) ?? void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     (0, import_utils15.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_components16.Label, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_components17.Label, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_react_components16.RadioGroup,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react_components17.RadioGroup,
       {
         id,
-        name: id,
+        name: htmlName || id,
         layout: inline ? "horizontal" : "vertical",
         value: selectedIndex,
         onChange: _onChange,
@@ -821,8 +906,8 @@ function RadioWidget({
         "aria-describedby": (0, import_utils15.ariaDescribedByIds)(id),
         children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
           const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react_components16.Radio,
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react_components17.Radio,
             {
               id: (0, import_utils15.optionId)(id, index),
               label: option.label,
@@ -839,8 +924,8 @@ function RadioWidget({
 
 // src/RangeWidget/RangeWidget.tsx
 var import_utils16 = require("@rjsf/utils");
-var import_react_components17 = require("@fluentui/react-components");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react_components18 = require("@fluentui/react-components");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function RangeWidget(props) {
   const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } = props;
   const sliderProps = { value, label, id, name: id, ...(0, import_utils16.rangeSpec)(schema) };
@@ -849,13 +934,13 @@ function RangeWidget(props) {
   };
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
     (0, import_utils16.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_components17.Label, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_components18.Label, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_react_components17.Slider,
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      import_react_components18.Slider,
       {
         disabled: disabled || readonly,
         onChange: _onChange,
@@ -870,8 +955,8 @@ function RangeWidget(props) {
 
 // src/SelectWidget/SelectWidget.tsx
 var import_utils17 = require("@rjsf/utils");
-var import_react_components18 = require("@fluentui/react-components");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react_components19 = require("@fluentui/react-components");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function getValue(data, multiple) {
   if (multiple) {
     return data.selectedOptions;
@@ -880,6 +965,7 @@ function getValue(data, multiple) {
 }
 function SelectWidget({
   id,
+  htmlName,
   options,
   label,
   hideLabel,
@@ -912,17 +998,17 @@ function SelectWidget({
     return onChange((0, import_utils17.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
   };
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react_components18.Field,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react_components19.Field,
     {
       label: (0, import_utils17.labelValue)(label, hideLabel),
       validationState: rawErrors.length ? "error" : void 0,
       required,
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-        import_react_components18.Dropdown,
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        import_react_components19.Dropdown,
         {
           id,
-          name: id,
+          name: htmlName || id,
           multiselect: multiple,
           className: "form-control",
           value: dropdownValue,
@@ -934,10 +1020,10 @@ function SelectWidget({
           selectedOptions: selectedIndexesAsArray,
           "aria-describedby": (0, import_utils17.ariaDescribedByIds)(id),
           children: [
-            showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_components18.Option, { value: "", children: placeholder || "" }),
+            showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_components19.Option, { value: "", children: placeholder || "" }),
             Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
               const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-              return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_components18.Option, { value: String(i), disabled: disabled2, children: label2 }, i);
+              return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_components19.Option, { value: String(i), disabled: disabled2, children: label2 }, i);
             })
           ]
         }
@@ -948,10 +1034,10 @@ function SelectWidget({
 var SelectWidget_default = SelectWidget;
 
 // src/TextareaWidget/TextareaWidget.tsx
-var import_react_components19 = require("@fluentui/react-components");
+var import_react_components20 = require("@fluentui/react-components");
 var import_utils18 = require("@rjsf/utils");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var useStyles10 = (0, import_react_components19.makeStyles)({
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var useStyles11 = (0, import_react_components20.makeStyles)({
   label: {
     paddingTop: "2px",
     paddingBottom: "2px",
@@ -961,6 +1047,7 @@ var useStyles10 = (0, import_react_components19.makeStyles)({
 function TextareaWidget(props) {
   const {
     id,
+    htmlName,
     placeholder,
     required,
     readonly,
@@ -976,7 +1063,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);
@@ -984,16 +1071,16 @@ function TextareaWidget(props) {
   if (typeof options.rows === "string" || typeof options.rows === "number") {
     rows = options.rows;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     (0, import_utils18.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_components19.Label, { htmlFor: id, required, disabled, className: classes.label, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_components20.Label, { htmlFor: id, required, disabled, className: classes.label, children: label }),
       hideLabel
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_react_components19.Textarea,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react_components20.Textarea,
       {
         id,
-        name: id,
+        name: htmlName || id,
         placeholder,
         autoFocus: autofocus,
         required,
@@ -1038,18 +1125,18 @@ function generateForm() {
 var FluentForm_default = generateForm();
 
 // src/FluentUIRCFrameProvider.tsx
-var import_react_components20 = require("@fluentui/react-components");
+var import_react_components21 = require("@fluentui/react-components");
 var import_react = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var FluentWrapper = (props) => {
   const { children, targetDocument } = props;
-  const renderer = (0, import_react.useMemo)(() => (0, import_react_components20.createDOMRenderer)(targetDocument), [targetDocument]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_components20.RendererProvider, { renderer, targetDocument, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_components20.FluentProvider, { targetDocument, theme: import_react_components20.teamsLightTheme, children }) });
+  const renderer = (0, import_react.useMemo)(() => (0, import_react_components21.createDOMRenderer)(targetDocument), [targetDocument]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_components21.RendererProvider, { renderer, targetDocument, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_components21.FluentProvider, { targetDocument, theme: import_react_components21.teamsLightTheme, children }) });
 };
 var __createFluentUIRCFrameProvider = (props) => ({ document }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FluentWrapper, { targetDocument: document, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FluentWrapper, { targetDocument: document, children: props.children });
 };
 
 // src/index.ts
 var index_default = FluentForm_default;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map