@rjsf/fluentui-rc 6.0.1 → 6.1.0

package/dist/core.umd.js

@@ -14,16 +14,16 @@
   });
   function ArrayFieldItemTemplate(props) {
     const classes = useStyles();
-    const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+    const { children, buttonsProps, displayLabel, hasToolbar, uiSchema, registry } = props;
     const uiOptions = utils.getUiOptions(uiSchema);
     const ArrayFieldItemButtonsTemplate = utils.getTemplate(
       "ArrayFieldItemButtonsTemplate",
       registry,
       uiOptions
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { vAlign: "end", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { vAlign: "start", children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { fill: true, className: classes.arrayFieldItem, children }),
-      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { style: { marginLeft: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) })
+      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { style: { marginLeft: "8px", marginTop: displayLabel ? "26px" : 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) })
     ] });
   }
   function AddButton({
@@ -294,12 +294,11 @@
     }) });
   }
   function FieldHelpTemplate(props) {
-    const { fieldPathId, help } = props;
+    const { fieldPathId, help, uiSchema = {}, registry } = props;
     if (!help) {
       return null;
     }
-    const id = utils.helpId(fieldPathId);
-    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { id, children: help });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { id: utils.helpId(fieldPathId), children: /* @__PURE__ */ jsxRuntime.jsx(core.RichHelp, { help, registry, uiSchema }) });
   }
   function FieldTemplate(props) {
     const {
@@ -334,6 +333,7 @@
     if (hidden) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "none" }, children });
     }
+    const isCheckbox = uiOptions.widget === "checkbox";
     return /* @__PURE__ */ jsxRuntime.jsx(
       WrapIfAdditionalTemplate2,
       {
@@ -342,6 +342,8 @@
         disabled,
         id,
         label,
+        displayLabel,
+        rawDescription,
         onKeyRename,
         onKeyRenameBlur,
         onRemoveProperty,
@@ -352,7 +354,7 @@
         registry,
         children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Field, { validationState: rawErrors.length ? "error" : void 0, required, children: [
           children,
-          displayLabel && rawDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { as: "p", block: true, style: { marginTop: 0, marginBottom: 0 }, children: description }) : null,
+          displayLabel && rawDescription && !isCheckbox ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { as: "p", block: true, style: { marginTop: 0, marginBottom: 0 }, children: description }) : null,
           errors,
           help
         ] })
@@ -531,10 +533,26 @@
     input: {
       width: "100%"
     },
+    grow: {
+      flexGrow: 1
+    },
+    halfWidth: {
+      width: "46%"
+    },
+    alignEnd: {
+      alignSelf: "flex-end",
+      justifyContent: "flex-end"
+    },
+    alignCenter: {
+      alignSelf: "center",
+      marginTop: "-14px",
+      justifyContent: "flex-end"
+    },
     label: {
       marginBottom: "4px"
     }
   });
+  var containerTypes = ["object", "array"];
   function WrapIfAdditionalTemplate(props) {
     const {
       children,
@@ -543,8 +561,10 @@
       disabled,
       id,
       label,
+      displayLabel,
       onRemoveProperty,
       onKeyRenameBlur,
+      rawDescription,
       readonly,
       required,
       schema,
@@ -556,6 +576,7 @@
     const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
     const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
     const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
+    const hasDescription = !!rawDescription;
     const btnStyle = {
       flex: 1,
       paddingLeft: 6,
@@ -563,10 +584,12 @@
       fontWeight: "bold"
     };
     if (!additional) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
+      const { type } = schema;
+      const className = containerTypes.includes(type) ? classNames : `${classes.grow} ${classNames}`;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children });
     }
-    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(
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { gap: "gap.medium", vAlign: "start", className: classNames, style, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.halfWidth, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: displayLabel ? keyLabel : void 0, required, children: /* @__PURE__ */ jsxRuntime.jsx(
         reactComponents.Input,
         {
           required,
@@ -581,8 +604,8 @@
           }
         }
       ) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.halfWidth, children }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: hasDescription ? classes.alignCenter : classes.alignEnd, children: /* @__PURE__ */ jsxRuntime.jsx(
         RemoveButton2,
         {
           id: utils.buttonId(id, "remove"),

package/dist/index.cjs

@@ -34,7 +34,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/FluentForm/FluentForm.ts
-var import_core2 = require("@rjsf/core");
+var import_core3 = require("@rjsf/core");
 
 // src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
 var import_utils = require("@rjsf/utils");
@@ -50,16 +50,16 @@ var useStyles = (0, import_react_components.makeStyles)({
 });
 function ArrayFieldItemTemplate(props) {
   const classes = useStyles();
-  const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+  const { children, buttonsProps, displayLabel, hasToolbar, uiSchema, registry } = props;
   const uiOptions = (0, import_utils.getUiOptions)(uiSchema);
   const ArrayFieldItemButtonsTemplate = (0, import_utils.getTemplate)(
     "ArrayFieldItemButtonsTemplate",
     registry,
     uiOptions
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_migration_v0_v9.Flex, { vAlign: "end", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_migration_v0_v9.Flex, { vAlign: "start", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_migration_v0_v9.Flex, { fill: true, className: classes.arrayFieldItem, children }),
-    hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_migration_v0_v9.Flex, { style: { marginLeft: "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) })
+    hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_migration_v0_v9.Flex, { style: { marginLeft: "8px", marginTop: displayLabel ? "26px" : 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) })
   ] });
 }
 
@@ -371,14 +371,14 @@ function FieldErrorTemplate(props) {
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
 var import_react_components9 = require("@fluentui/react-components");
 var import_utils8 = require("@rjsf/utils");
+var import_core2 = require("@rjsf/core");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function FieldHelpTemplate(props) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema = {}, registry } = props;
   if (!help) {
     return null;
   }
-  const id = (0, import_utils8.helpId)(fieldPathId);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components9.Caption1, { id, children: help });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components9.Caption1, { id: (0, import_utils8.helpId)(fieldPathId), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core2.RichHelp, { help, registry, uiSchema }) });
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
@@ -418,6 +418,7 @@ function FieldTemplate(props) {
   if (hidden) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "none" }, children });
   }
+  const isCheckbox = uiOptions.widget === "checkbox";
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     WrapIfAdditionalTemplate2,
     {
@@ -426,6 +427,8 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
+      displayLabel,
+      rawDescription,
       onKeyRename,
       onKeyRenameBlur,
       onRemoveProperty,
@@ -436,7 +439,7 @@ function FieldTemplate(props) {
       registry,
       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_components10.Field, { validationState: rawErrors.length ? "error" : void 0, required, children: [
         children,
-        displayLabel && rawDescription ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_components10.Text, { as: "p", block: true, style: { marginTop: 0, marginBottom: 0 }, children: description }) : null,
+        displayLabel && rawDescription && !isCheckbox ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_components10.Text, { as: "p", block: true, style: { marginTop: 0, marginBottom: 0 }, children: description }) : null,
         errors,
         help
       ] })
@@ -648,10 +651,26 @@ var useStyles10 = (0, import_react_components14.makeStyles)({
   input: {
     width: "100%"
   },
+  grow: {
+    flexGrow: 1
+  },
+  halfWidth: {
+    width: "46%"
+  },
+  alignEnd: {
+    alignSelf: "flex-end",
+    justifyContent: "flex-end"
+  },
+  alignCenter: {
+    alignSelf: "center",
+    marginTop: "-14px",
+    justifyContent: "flex-end"
+  },
   label: {
     marginBottom: "4px"
   }
 });
+var containerTypes = ["object", "array"];
 function WrapIfAdditionalTemplate(props) {
   const {
     children,
@@ -660,8 +679,10 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     id,
     label,
+    displayLabel,
     onRemoveProperty,
     onKeyRenameBlur,
+    rawDescription,
     readonly,
     required,
     schema,
@@ -673,6 +694,7 @@ function WrapIfAdditionalTemplate(props) {
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
   const keyLabel = translateString(import_utils12.TranslatableString.KeyLabel, [label]);
   const additional = import_utils12.ADDITIONAL_PROPERTY_FLAG in schema;
+  const hasDescription = !!rawDescription;
   const btnStyle = {
     flex: 1,
     paddingLeft: 6,
@@ -680,10 +702,12 @@ function WrapIfAdditionalTemplate(props) {
     fontWeight: "bold"
   };
   if (!additional) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children });
+    const { type } = schema;
+    const className = containerTypes.includes(type) ? classNames : `${classes.grow} ${classNames}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className, style, children });
   }
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_migration_v0_v96.Flex, { gap: "gap.medium", vAlign: "start", className: classNames, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classes.halfWidth, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_components14.Field, { label: displayLabel ? keyLabel : void 0, required, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       import_react_components14.Input,
       {
         required,
@@ -698,8 +722,8 @@ function WrapIfAdditionalTemplate(props) {
         }
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classes.halfWidth, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: hasDescription ? classes.alignCenter : classes.alignEnd, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       RemoveButton2,
       {
         id: (0, import_utils12.buttonId)(id, "remove"),
@@ -1120,7 +1144,7 @@ var Theme_default = generateTheme();
 
 // src/FluentForm/FluentForm.ts
 function generateForm() {
-  return (0, import_core2.withTheme)(generateTheme());
+  return (0, import_core3.withTheme)(generateTheme());
 }
 var FluentForm_default = generateForm();