@rjsf/core 6.0.2 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/core",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "compileReplacer": "tsc -p tsconfig.replacer.json && move-file lodashReplacer.js lodashReplacer.cjs",

package/src/components/RichHelp.tsx

@@ -0,0 +1,46 @@
+import { ReactElement } from 'react';
+import {
+  FormContextType,
+  Registry,
+  RJSFSchema,
+  StrictRJSFSchema,
+  UiSchema,
+  getTestIds,
+  getUiOptions,
+} from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
+
+const TEST_IDS = getTestIds();
+
+export interface RichHelpProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
+  /** The description text for a field, potentially containing markdown */
+  help: string | ReactElement;
+  /** The uiSchema object for this base component */
+  uiSchema?: UiSchema<T, S, F>;
+  /** The `registry` object */
+  registry: Registry<T, S, F>;
+}
+
+/** Renders the given `description` in the props as
+ *
+ * @param props - The `RichHelpProps` for this component
+ */
+export default function RichHelp<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  help,
+  registry,
+  uiSchema = {},
+}: RichHelpProps<T, S, F>) {
+  const { globalUiOptions } = registry;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+
+  if (uiOptions.enableMarkdownInHelp && typeof help === 'string') {
+    return (
+      <Markdown options={{ disableParsingRawHTML: true }} data-testid={TEST_IDS.markdown}>
+        {help}
+      </Markdown>
+    );
+  }
+  return help;
+}
+
+RichHelp.TEST_IDS = TEST_IDS;

package/src/components/fields/ArrayField.tsx

@@ -406,7 +406,9 @@ function ArrayFieldItem<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
     handleReorderItems,
   } = props;
   const {
+    schemaUtils,
     fields: { ArraySchemaField, SchemaField },
+    globalUiOptions,
   } = registry;
   const fieldPathId = useDeepCompareMemo<FieldPathId>(itemFieldPathId);
   const ItemSchemaField = ArraySchemaField || SchemaField;
@@ -415,6 +417,9 @@ function ArrayFieldItem<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
     registry,
     uiOptions,
   );
+  const displayLabel = schemaUtils.getDisplayLabel(itemSchema, itemUiSchema, globalUiOptions);
+  const { description } = getUiOptions(itemUiSchema);
+  const hasDescription = !!description || !!itemSchema.description;
   const { orderable = true, removable = true, copyable = false } = uiOptions;
   const has: { [key: string]: boolean } = {
     moveUp: orderable && canMoveUp,
@@ -510,6 +515,8 @@ function ArrayFieldItem<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
     schema: itemSchema,
     uiSchema: itemUiSchema,
     parentUiSchema,
+    displayLabel,
+    hasDescription,
   };
   return <ArrayFieldItemTemplate {...templateProps} />;
 }

package/src/components/fields/StringField.tsx

@@ -34,8 +34,9 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
     registry,
     rawErrors,
     hideError,
+    title,
   } = props;
-  const { title, format } = schema;
+  const { title: schemaTitle, format } = schema;
   const { widgets, schemaUtils, globalUiOptions } = registry;
   const enumOptions = schemaUtils.isSelect(schema) ? optionsList<T, S, F>(schema, uiSchema) : undefined;
   let defaultWidget = enumOptions ? 'select' : 'text';
@@ -44,7 +45,7 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   }
   const { widget = defaultWidget, placeholder = '', title: uiTitle, ...options } = getUiOptions<T, S, F>(uiSchema);
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-  const label = uiTitle ?? title ?? name;
+  const label = uiTitle ?? title ?? schemaTitle ?? name;
   const Widget = getWidget<T, S, F>(schema, widget, widgets);
   const onWidgetChange = useCallback(
     (value: T | undefined, errorSchema?: ErrorSchema, id?: string) => {

package/src/components/templates/ArrayFieldItemTemplate.tsx

@@ -17,7 +17,7 @@ export default function ArrayFieldItemTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldItemTemplateProps<T, S, F>) {
-  const { children, className, buttonsProps, hasToolbar, registry, uiSchema } = props;
+  const { children, className, buttonsProps, displayLabel, hasDescription, hasToolbar, registry, uiSchema } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
     'ArrayFieldItemButtonsTemplate',
@@ -30,18 +30,15 @@ export default function ArrayFieldItemTemplate<
     paddingRight: 6,
     fontWeight: 'bold',
   };
+  const margin = hasDescription ? 31 : 9;
+  const containerStyle = { display: 'flex', alignItems: displayLabel ? 'center' : 'baseline' };
+  const toolbarStyle = { display: 'flex', justifyContent: 'flex-end', marginTop: displayLabel ? `${margin}px` : 0 };
   return (
-    <div className={className}>
-      <div className={hasToolbar ? 'col-xs-9' : 'col-xs-12'}>{children}</div>
+    <div className={className} style={containerStyle}>
+      <div className={hasToolbar ? 'col-xs-9 col-md-10 col-xl-11' : 'col-xs-12'}>{children}</div>
       {hasToolbar && (
-        <div className='col-xs-3 array-item-toolbox'>
-          <div
-            className='btn-group'
-            style={{
-              display: 'flex',
-              justifyContent: 'space-around',
-            }}
-          >
+        <div className='col-xs-3 col-md-2 col-xl-1 array-item-toolbox'>
+          <div className='btn-group' style={toolbarStyle}>
             <ArrayFieldItemButtonsTemplate {...buttonsProps} style={btnStyle} />
           </div>
         </div>

package/src/components/templates/ButtonTemplates/AddButton.tsx

@@ -14,7 +14,9 @@ export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSche
   const { translateString } = registry;
   return (
     <div className='row'>
-      <p className={`col-xs-3 col-xs-offset-9 text-right ${className}`}>
+      <p
+        className={`col-xs-4 col-sm-2 col-lg-1 col-xs-offset-8 col-sm-offset-10 col-lg-offset-11 text-right ${className}`}
+      >
         <IconButton
           id={id}
           iconType='info'

package/src/components/templates/FieldHelpTemplate.tsx

@@ -1,4 +1,5 @@
 import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import RichHelp from '../RichHelp';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -9,21 +10,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);
-  if (typeof help === 'string') {
-    return (
-      <p id={id} className='help-block'>
-        {help}
-      </p>
-    );
-  }
+
   return (
-    <div id={id} className='help-block'>
-      {help}
+    <div id={helpId(fieldPathId)} className='help-block'>
+      <RichHelp help={help as string} registry={registry} uiSchema={uiSchema} />
     </div>
   );
 }

package/src/components/templates/WrapIfAdditionalTemplate.tsx

@@ -25,9 +25,11 @@ export default function WrapIfAdditionalTemplate<
     classNames,
     style,
     disabled,
+    displayLabel,
     label,
     onKeyRenameBlur,
     onRemoveProperty,
+    rawDescription,
     readonly,
     required,
     schema,
@@ -42,6 +44,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 classNamesList = ['form-group', classNames];
   if (!hideError && rawErrors && rawErrors.length > 0) {
@@ -56,13 +59,14 @@ export default function WrapIfAdditionalTemplate<
       </div>
     );
   }
-
+  const margin = hasDescription ? 46 : 26;
   return (
     <div className={uiClassNames} style={style}>
       <div className='row'>
         <div className='col-xs-5 form-additional'>
           <div className='form-group'>
-            <Label label={keyLabel} required={required} id={`${id}-key`} />
+            {displayLabel && <Label label={keyLabel} required={required} id={`${id}-key`} />}
+            {displayLabel && rawDescription && <div>&nbsp;</div>}
             <input
               className='form-control'
               type='text'
@@ -73,7 +77,7 @@ export default function WrapIfAdditionalTemplate<
           </div>
         </div>
         <div className='form-additional form-group col-xs-5'>{children}</div>
-        <div className='col-xs-2'>
+        <div className='col-xs-2' style={{ marginTop: displayLabel ? `${margin}px` : undefined }}>
           <RemoveButton
             id={buttonId(id, 'remove')}
             className='rjsf-object-property-remove btn-block'

package/src/index.ts

@@ -1,10 +1,11 @@
 import Form, { FormProps, FormState, IChangeEvent } from './components/Form';
 import RichDescription, { RichDescriptionProps } from './components/RichDescription';
+import RichHelp, { RichHelpProps } from './components/RichHelp';
 import withTheme, { ThemeProps } from './withTheme';
 import getDefaultRegistry from './getDefaultRegistry';
 import getTestRegistry from './getTestRegistry';
 
-export type { FormProps, FormState, IChangeEvent, ThemeProps, RichDescriptionProps };
+export type { FormProps, FormState, IChangeEvent, ThemeProps, RichDescriptionProps, RichHelpProps };
 
-export { withTheme, getDefaultRegistry, getTestRegistry, RichDescription };
+export { withTheme, getDefaultRegistry, getTestRegistry, RichDescription, RichHelp };
 export default Form;