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

package/README.md

@@ -47,6 +47,8 @@
 
 Fluent UI React Components (v9) theme, fields and widgets for `react-jsonschema-form`.
 
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/fluentui-rc)
+
 ### Built With
 
 - [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)

package/dist/core.umd.js

@@ -32,7 +32,7 @@
     ...props
   }) {
     const { translateString } = registry;
-    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.AddRegular, {}), title: translateString(utils.TranslatableString.AddItemButton) });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { title: translateString(utils.TranslatableString.AddItemButton), ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.AddRegular, {}) });
   }
   var useStyles2 = reactComponents.makeStyles({
     arrayItemList: {
@@ -40,7 +40,20 @@
     }
   });
   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 = utils.getUiOptions(uiSchema);
     const ArrayFieldDescriptionTemplate = utils.getTemplate(
@@ -48,16 +61,12 @@
       registry,
       uiOptions
     );
-    const ArrayFieldItemTemplate2 = utils.getTemplate(
-      "ArrayFieldItemTemplate",
-      registry,
-      uiOptions
-    );
     const ArrayFieldTitleTemplate = utils.getTemplate(
       "ArrayFieldTitleTemplate",
       registry,
       uiOptions
     );
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
@@ -65,18 +74,19 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldTitleTemplate,
         {
-          idSchema,
+          fieldPathId,
           title: uiOptions.title || title,
           schema,
           uiSchema,
           required,
-          registry
+          registry,
+          optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldDescriptionTemplate,
         {
-          idSchema,
+          fieldPathId,
           description: uiOptions.description || schema.description,
           schema,
           uiSchema,
@@ -84,11 +94,12 @@
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { column: true, className: classes.arrayItemList, children: [
-        items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key)),
+        !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+        items,
         canAdd && /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { hAlign: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
           AddButton2,
           {
-            id: utils.buttonId(idSchema, "add"),
+            id: utils.buttonId(fieldPathId, "add"),
             className: "rjsf-array-item-add",
             onClick: onAddClick,
             disabled: disabled || readonly,
@@ -96,7 +107,7 @@
             registry
           }
         ) })
-      ] }, `array-item-list-${idSchema.$id}`)
+      ] }, `array-item-list-${fieldPathId.$id}`)
     ] });
   }
   var useStyles3 = reactComponents.makeStyles({
@@ -112,6 +123,7 @@
   function BaseInputTemplate(props) {
     const {
       id,
+      htmlName,
       placeholder,
       required,
       readonly,
@@ -142,7 +154,7 @@
         reactComponents.Input,
         {
           id,
-          name: id,
+          name: htmlName || id,
           placeholder,
           autoFocus: autofocus,
           required,
@@ -271,22 +283,22 @@
     errorLabel: { color: reactComponents.tokens.colorPaletteRedForeground1 }
   });
   function FieldErrorTemplate(props) {
-    const { errors = [], idSchema } = props;
+    const { errors = [], fieldPathId } = props;
     const classes = useStyles6();
     if (errors.length === 0) {
       return null;
     }
-    const id = utils.errorId(idSchema);
+    const id = utils.errorId(fieldPathId);
     return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: classes.list, children: errors.map((error, i) => {
       return /* @__PURE__ */ jsxRuntime.jsx("li", { className: classes.listItem, children: /* @__PURE__ */ jsxRuntime.jsx("small", { className: classes.errorLabel, id, children: error }) }, i);
     }) });
   }
   function FieldHelpTemplate(props) {
-    const { idSchema, help } = props;
+    const { fieldPathId, help } = props;
     if (!help) {
       return null;
     }
-    const id = utils.helpId(idSchema);
+    const id = utils.helpId(fieldPathId);
     return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { id, children: help });
   }
   function FieldTemplate(props) {
@@ -299,8 +311,9 @@
       displayLabel,
       hidden,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       rawErrors = [],
@@ -329,8 +342,9 @@
         disabled,
         id,
         label,
-        onDropPropertyClick,
-        onKeyChange,
+        onKeyRename,
+        onKeyRenameBlur,
+        onRemoveProperty,
         readonly,
         required,
         schema,
@@ -357,6 +371,19 @@
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style, ...rest, children });
   }
+  var useStyles7 = reactComponents.makeStyles({
+    root: {
+      "> div": { marginBottom: "4px" }
+    }
+  });
+  function MultiSchemaFieldTemplate(props) {
+    const { selector, optionSchemaField } = props;
+    const styles = useStyles7();
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.root, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: selector }),
+      optionSchemaField
+    ] });
+  }
   function ObjectFieldTemplate(props) {
     const {
       description,
@@ -366,10 +393,11 @@
       disabled,
       readonly,
       uiSchema,
-      idSchema,
+      fieldPathId,
       schema,
       formData,
-      onAddClick,
+      optionalDataControl,
+      onAddProperty,
       registry
     } = props;
     const uiOptions = utils.getUiOptions(uiSchema);
@@ -379,6 +407,7 @@
       registry,
       uiOptions
     );
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
@@ -386,18 +415,19 @@
       title && /* @__PURE__ */ jsxRuntime.jsx(
         TitleFieldTemplate,
         {
-          id: utils.titleId(idSchema),
+          id: utils.titleId(fieldPathId),
           title,
           required,
           schema,
           uiSchema,
-          registry
+          registry,
+          optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
         }
       ),
       description && /* @__PURE__ */ jsxRuntime.jsx(
         DescriptionFieldTemplate,
         {
-          id: utils.descriptionId(idSchema),
+          id: utils.descriptionId(fieldPathId),
           description,
           schema,
           uiSchema,
@@ -405,6 +435,7 @@
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.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>
@@ -415,9 +446,9 @@
         utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { hAlign: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
           AddButton2,
           {
-            id: utils.buttonId(idSchema, "add"),
+            id: utils.buttonId(fieldPathId, "add"),
             className: "rjsf-object-property-expand",
-            onClick: onAddClick(schema),
+            onClick: onAddProperty,
             disabled: disabled || readonly,
             uiSchema,
             registry
@@ -426,20 +457,53 @@
       ] })
     ] });
   }
-  var useStyles7 = reactComponents.makeStyles({
+  function OptionalDataControlsTemplate(props) {
+    const { id, registry, label, onAddClick, onRemoveClick } = props;
+    if (onAddClick) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FluentIconButton,
+        {
+          id,
+          registry,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.AddSquareMultipleRegular, {}),
+          className: "rjsf-add-optional-data",
+          onClick: onAddClick,
+          title: label,
+          size: "small",
+          appearance: "secondary"
+        }
+      );
+    } else if (onRemoveClick) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FluentIconButton,
+        {
+          id,
+          registry,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SubtractSquareMultipleRegular, {}),
+          className: "rjsf-remove-optional-data",
+          onClick: onRemoveClick,
+          title: label,
+          size: "small",
+          appearance: "secondary"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("em", { id, children: label });
+  }
+  var useStyles8 = reactComponents.makeStyles({
     buttonRow: {
       marginTop: reactComponents.tokens.spacingVerticalL
     }
   });
   function SubmitButton({ uiSchema }) {
-    const classes = useStyles7();
+    const classes = useStyles8();
     const { submitText, norender, props: submitButtonProps } = utils.getSubmitButtonOptions(uiSchema);
     if (norender) {
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.buttonRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
   }
-  var useStyles8 = reactComponents.makeStyles({
+  var useStyles9 = reactComponents.makeStyles({
     root: {
       marginTop: "8px",
       marginBottom: "8px"
@@ -447,15 +511,23 @@
   });
   function TitleField({
     id,
-    title
+    title,
+    optionalDataControl
   }) {
-    const classes = useStyles8();
+    const classes = useStyles9();
+    let heading = /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { as: "h5", size: 600, style: { marginBlock: 0 }, children: title });
+    if (optionalDataControl) {
+      heading = /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { fill: true, children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { hAlign: "end", children: optionalDataControl })
+      ] });
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: classes.root, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { as: "h5", size: 600, children: title }),
+      heading,
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
     ] });
   }
-  var useStyles9 = reactComponents.makeStyles({
+  var useStyles10 = reactComponents.makeStyles({
     input: {
       width: "100%"
     },
@@ -471,8 +543,8 @@
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onRemoveProperty,
+      onKeyRenameBlur,
       readonly,
       required,
       schema,
@@ -480,7 +552,7 @@
       registry
     } = props;
     const { templates, translateString } = registry;
-    const classes = useStyles9();
+    const classes = useStyles10();
     const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
     const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
     const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
@@ -493,7 +565,6 @@
     if (!additional) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
     }
-    const handleBlur = ({ target }) => onKeyChange(target.value);
     return /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { gap: "gap.medium", vAlign: "center", className: classNames, style, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: keyLabel, required, children: /* @__PURE__ */ jsxRuntime.jsx(
         reactComponents.Input,
@@ -503,7 +574,7 @@
           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
@@ -519,7 +590,7 @@
           className: "rjsf-object-property-remove",
           style: btnStyle,
           disabled: disabled || readonly,
-          onClick: onDropPropertyClick(label),
+          onClick: onRemoveProperty,
           uiSchema,
           registry
         }
@@ -547,7 +618,9 @@
       FieldHelpTemplate,
       FieldTemplate,
       GridTemplate,
+      MultiSchemaFieldTemplate,
       ObjectFieldTemplate,
+      OptionalDataControlsTemplate,
       TitleFieldTemplate: TitleField,
       WrapIfAdditionalTemplate
     };
@@ -557,6 +630,7 @@
     const {
       schema,
       id,
+      htmlName,
       value,
       disabled,
       readonly,
@@ -577,8 +651,8 @@
     );
     const required = utils.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       !hideLabel && description && /* @__PURE__ */ jsxRuntime.jsx(
@@ -595,7 +669,7 @@
         reactComponents.Checkbox,
         {
           id,
-          name: id,
+          name: htmlName || id,
           label,
           checked: typeof value === "undefined" ? false : Boolean(value),
           required,
@@ -613,6 +687,7 @@
     label,
     hideLabel,
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -646,7 +721,7 @@
           reactComponents.Checkbox,
           {
             id: utils.optionId(id, index),
-            name: id,
+            name: htmlName || id,
             label: option.label,
             checked,
             disabled: disabled || itemDisabled || readonly,
@@ -663,6 +738,7 @@
   }
   function RadioWidget({
     id,
+    htmlName,
     options,
     value,
     required,
@@ -688,7 +764,7 @@
         reactComponents.RadioGroup,
         {
           id,
-          name: id,
+          name: htmlName || id,
           layout: inline ? "horizontal" : "vertical",
           value: selectedIndex,
           onChange: _onChange,
@@ -746,6 +822,7 @@
   }
   function SelectWidget({
     id,
+    htmlName,
     options,
     label,
     hideLabel,
@@ -788,7 +865,7 @@
           reactComponents.Dropdown,
           {
             id,
-            name: id,
+            name: htmlName || id,
             multiselect: multiple,
             className: "form-control",
             value: dropdownValue,
@@ -812,7 +889,7 @@
     );
   }
   var SelectWidget_default = SelectWidget;
-  var useStyles10 = reactComponents.makeStyles({
+  var useStyles11 = reactComponents.makeStyles({
     label: {
       paddingTop: "2px",
       paddingBottom: "2px",
@@ -822,6 +899,7 @@
   function TextareaWidget(props) {
     const {
       id,
+      htmlName,
       placeholder,
       required,
       readonly,
@@ -837,7 +915,7 @@
       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);
@@ -854,7 +932,7 @@
         reactComponents.Textarea,
         {
           id,
-          name: id,
+          name: htmlName || id,
           placeholder,
           autoFocus: autofocus,
           required,