@rjsf/fluentui-rc 6.0.1 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/fluentui-rc",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "FluentUI React Components theme, fields and widgets for react-jsonschema-form",
   "scripts": {
     "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
@@ -73,9 +73,9 @@
     "react": ">=18"
   },
   "devDependencies": {
-    "@fluentui/react-components": "^9.72.3",
+    "@fluentui/react-components": "^9.72.4",
     "@fluentui/react-icons": "^2.0.313",
-    "@fluentui/react-migration-v0-v9": "^9.6.11",
+    "@fluentui/react-migration-v0-v9": "^9.6.12",
     "@rjsf/core": "^6.x",
     "@rjsf/snapshot-tests": "^6.x",
     "@rjsf/utils": "^6.x",

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -27,7 +27,7 @@ export default function ArrayFieldItemTemplate<
   F extends FormContextType = any,
 >(props: ArrayFieldItemTemplateProps<T, S, F>) {
   const classes = useStyles();
-  const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+  const { children, buttonsProps, displayLabel, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
     'ArrayFieldItemButtonsTemplate',
@@ -36,12 +36,12 @@ export default function ArrayFieldItemTemplate<
   );
 
   return (
-    <Flex vAlign='end'>
+    <Flex vAlign='start'>
       <Flex fill className={classes.arrayFieldItem}>
         {children}
       </Flex>
       {hasToolbar && (
-        <Flex style={{ marginLeft: '8px' }}>
+        <Flex style={{ marginLeft: '8px', marginTop: displayLabel ? '26px' : 0 }}>
           <ArrayFieldItemButtonsTemplate {...buttonsProps} />
         </Flex>
       )}

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,5 +1,6 @@
 import { Caption1 } from '@fluentui/react-components';
 import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { RichHelp } from '@rjsf/core';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -10,10 +11,14 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema = {}, registry } = props;
+
   if (!help) {
     return null;
   }
-  const id = helpId(fieldPathId);
-  return <Caption1 id={id}>{help}</Caption1>;
+  return (
+    <Caption1 id={helpId(fieldPathId)}>
+      <RichHelp help={help} registry={registry} uiSchema={uiSchema} />
+    </Caption1>
+  );
 }

package/src/FieldTemplate/FieldTemplate.tsx

@@ -51,6 +51,7 @@ export default function FieldTemplate<
   if (hidden) {
     return <div style={{ display: 'none' }}>{children}</div>;
   }
+  const isCheckbox = uiOptions.widget === 'checkbox';
   return (
     <WrapIfAdditionalTemplate
       classNames={classNames}
@@ -58,6 +59,8 @@ export default function FieldTemplate<
       disabled={disabled}
       id={id}
       label={label}
+      displayLabel={displayLabel}
+      rawDescription={rawDescription}
       onKeyRename={onKeyRename}
       onKeyRenameBlur={onKeyRenameBlur}
       onRemoveProperty={onRemoveProperty}
@@ -69,7 +72,7 @@ export default function FieldTemplate<
     >
       <Field validationState={rawErrors.length ? 'error' : undefined} required={required}>
         {children}
-        {displayLabel && rawDescription ? (
+        {displayLabel && rawDescription && !isCheckbox ? (
           <Text as='p' block style={{ marginTop: 0, marginBottom: 0 }}>
             {description}
           </Text>

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -15,11 +15,28 @@ const useStyles = 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',
   },
 });
 
+const containerTypes = ['object', 'array'];
+
 /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
  * part of an `additionalProperties` part of a schema.
  *
@@ -37,8 +54,10 @@ export default function WrapIfAdditionalTemplate<
     disabled,
     id,
     label,
+    displayLabel,
     onRemoveProperty,
     onKeyRenameBlur,
+    rawDescription,
     readonly,
     required,
     schema,
@@ -51,6 +70,7 @@ export default function WrapIfAdditionalTemplate<
   const { RemoveButton } = templates.ButtonTemplates;
   const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+  const hasDescription = !!rawDescription;
   const btnStyle: CSSProperties = {
     flex: 1,
     paddingLeft: 6,
@@ -59,17 +79,20 @@ export default function WrapIfAdditionalTemplate<
   };
 
   if (!additional) {
+    const { type } = schema;
+    // Flex grow only non container classes
+    const className = containerTypes.includes(type as string) ? classNames : `${classes.grow} ${classNames}`;
     return (
-      <div className={classNames} style={style}>
+      <div className={className} style={style}>
         {children}
       </div>
     );
   }
 
   return (
-    <Flex gap='gap.medium' vAlign='center' key={`${id}-key`} className={classNames} style={style}>
-      <div>
-        <Field label={keyLabel} required={required}>
+    <Flex gap='gap.medium' vAlign='start' key={`${id}-key`} className={classNames} style={style}>
+      <div className={classes.halfWidth}>
+        <Field label={displayLabel ? keyLabel : undefined} required={required}>
           <Input
             required={required}
             defaultValue={label}
@@ -84,8 +107,8 @@ export default function WrapIfAdditionalTemplate<
           />
         </Field>
       </div>
-      <div>{children}</div>
-      <div>
+      <div className={classes.halfWidth}>{children}</div>
+      <div className={hasDescription ? classes.alignCenter : classes.alignEnd}>
         <RemoveButton
           id={buttonId(id, 'remove')}
           iconType='default'