@rjsf/fluentui-rc 6.0.0-beta.2 → 6.0.0-beta.20

package/README.md

@@ -59,11 +59,15 @@ Fluent UI React Components (v9) theme, fields and widgets for `react-jsonschema-
 
 ### Prerequisites
 
-- `@fluentui/react-components >= 9.35.0`
-- `@rjsf/core >= 2.0.0`
+- `@fluentui/react-components >= 9`
+- `@fluentui/react-icons >= 2`
+- `@fluentui/react-migration-v0-v9 >= 9`
+- `@rjsf/core >= 6`
+- `@rjsf/utils >= 6`
+- `@rjsf/validator-ajv8 >= 6`
 
 ```bash
-yarn add @fluentui/react-components @rjsf/core @rjsf/utils @rjsf/validator-ajv8
+yarn add @fluentui/react-components @fluentui/react-icons @fluentui/react-migration-v0-v9 @rjsf/core @rjsf/utils @rjsf/validator-ajv8
 ```
 
 ### Installation

package/dist/core.umd.js

@@ -40,7 +40,7 @@
     }
   });
   function ArrayFieldTemplate(props) {
-    const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
+    const { canAdd, disabled, fieldPathId, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
     const classes = useStyles2();
     const uiOptions = utils.getUiOptions(uiSchema);
     const ArrayFieldDescriptionTemplate = utils.getTemplate(
@@ -65,7 +65,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldTitleTemplate,
         {
-          idSchema,
+          fieldPathId,
           title: uiOptions.title || title,
           schema,
           uiSchema,
@@ -76,7 +76,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldDescriptionTemplate,
         {
-          idSchema,
+          fieldPathId,
           description: uiOptions.description || schema.description,
           schema,
           uiSchema,
@@ -88,7 +88,7 @@
         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 +96,7 @@
             registry
           }
         ) })
-      ] }, `array-item-list-${idSchema.$id}`)
+      ] }, `array-item-list-${fieldPathId.$id}`)
     ] });
   }
   var useStyles3 = reactComponents.makeStyles({
@@ -271,22 +271,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) {
@@ -357,6 +357,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,7 +379,7 @@
       disabled,
       readonly,
       uiSchema,
-      idSchema,
+      fieldPathId,
       schema,
       formData,
       onAddClick,
@@ -386,7 +399,7 @@
       title && /* @__PURE__ */ jsxRuntime.jsx(
         TitleFieldTemplate,
         {
-          id: utils.titleId(idSchema),
+          id: utils.titleId(fieldPathId),
           title,
           required,
           schema,
@@ -397,7 +410,7 @@
       description && /* @__PURE__ */ jsxRuntime.jsx(
         DescriptionFieldTemplate,
         {
-          id: utils.descriptionId(idSchema),
+          id: utils.descriptionId(fieldPathId),
           description,
           schema,
           uiSchema,
@@ -415,7 +428,7 @@
         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),
             disabled: disabled || readonly,
@@ -426,20 +439,20 @@
       ] })
     ] });
   }
-  var useStyles7 = reactComponents.makeStyles({
+  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"
@@ -449,13 +462,13 @@
     id,
     title
   }) {
-    const classes = useStyles8();
+    const classes = useStyles9();
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: classes.root, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { as: "h5", size: 600, children: title }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
     ] });
   }
-  var useStyles9 = reactComponents.makeStyles({
+  var useStyles10 = reactComponents.makeStyles({
     input: {
       width: "100%"
     },
@@ -480,7 +493,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;
@@ -547,6 +560,7 @@
       FieldHelpTemplate,
       FieldTemplate,
       GridTemplate,
+      MultiSchemaFieldTemplate,
       ObjectFieldTemplate,
       TitleFieldTemplate: TitleField,
       WrapIfAdditionalTemplate
@@ -577,8 +591,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(
@@ -812,7 +826,7 @@
     );
   }
   var SelectWidget_default = SelectWidget;
-  var useStyles10 = reactComponents.makeStyles({
+  var useStyles11 = reactComponents.makeStyles({
     label: {
       paddingTop: "2px",
       paddingBottom: "2px",
@@ -837,7 +851,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);