@rjsf/semantic-ui 6.0.2 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/semantic-ui",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -24,7 +24,8 @@ export default function ArrayFieldItemTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldItemTemplateProps<T, S, F>) {
-  const { children, buttonsProps, hasToolbar, uiSchema, registry, parentUiSchema } = props;
+  const { children, buttonsProps, displayLabel, hasDescription, hasToolbar, uiSchema, registry, parentUiSchema } =
+    props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
     'ArrayFieldItemButtonsTemplate',
@@ -37,6 +38,7 @@ export default function ArrayFieldItemTemplate<
     defaultSchemaProps: { horizontalButtons: true, wrapItem: false },
   });
   const { horizontalButtons = true, wrapItem = false } = semanticProps;
+  const margin = hasDescription ? 5 : 24;
   return (
     <div className='rjsf-array-item'>
       <MaybeWrap wrap={wrapItem} component={Segment}>
@@ -46,7 +48,11 @@ export default function ArrayFieldItemTemplate<
           </Grid.Column>
           {hasToolbar && (
             <Grid.Column>
-              <Button.Group size='mini' vertical={!horizontalButtons}>
+              <Button.Group
+                size='mini'
+                vertical={!horizontalButtons}
+                style={{ marginTop: displayLabel ? `${margin}px` : undefined }}
+              >
                 <ArrayFieldItemButtonsTemplate {...buttonsProps} />
               </Button.Group>
             </Grid.Column>

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,5 +1,6 @@
-import { Message } from 'semantic-ui-react';
 import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+import { RichHelp } from '@rjsf/core';
+import { Message } from 'semantic-ui-react';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -10,10 +11,13 @@ 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) {
-    const id = helpId(fieldPathId);
-    return <Message size='mini' info id={id} content={help} />;
+    return (
+      <Message size='mini' info id={helpId(fieldPathId)}>
+        <RichHelp help={help} registry={registry} uiSchema={uiSchema} />
+      </Message>
+    );
   }
   return null;
 }

package/src/FieldTemplate/FieldTemplate.tsx

@@ -60,6 +60,8 @@ export default function FieldTemplate<
       style={style}
       id={id}
       label={label}
+      displayLabel={displayLabel}
+      rawDescription={rawDescription}
       registry={registry}
       schema={schema}
       uiSchema={uiSchema}

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -26,8 +26,10 @@ export default function WrapIfAdditionalTemplate<
     disabled,
     id,
     label,
+    displayLabel,
     onKeyRenameBlur,
     onRemoveProperty,
+    rawDescription,
     readonly,
     required,
     schema,
@@ -41,6 +43,7 @@ export default function WrapIfAdditionalTemplate<
   const { readonlyAsDisabled = true, wrapperStyle } = registry.formContext;
 
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+  const margin = rawDescription ? 4 : 24;
 
   if (!additional) {
     return (
@@ -52,16 +55,16 @@ export default function WrapIfAdditionalTemplate<
 
   return (
     <div className={classNames} style={style} key={`${id}-key`}>
-      <Grid columns='equal'>
+      <Grid>
         <Grid.Row>
-          <Grid.Column className='form-additional'>
+          <Grid.Column width={7} className='form-additional'>
             <Form.Group widths='equal' grouped>
               <Form.Input
                 className='form-group'
                 hasFeedback
                 fluid
                 htmlFor={`${id}`}
-                label={keyLabel}
+                label={displayLabel ? keyLabel : undefined}
                 required={required}
                 defaultValue={label}
                 disabled={disabled || (readonlyAsDisabled && readonly)}
@@ -73,10 +76,10 @@ export default function WrapIfAdditionalTemplate<
               ></Form.Input>
             </Form.Group>
           </Grid.Column>
-          <Grid.Column className='form-additional' verticalAlign='middle'>
+          <Grid.Column width={7} className='form-additional' verticalAlign='middle'>
             {children}
           </Grid.Column>
-          <Grid.Column>
+          <Grid.Column verticalAlign='middle' style={displayLabel ? { marginTop: `${margin}px` } : undefined}>
             <RemoveButton
               id={buttonId(id, 'remove')}
               iconType='mini'