@rjsf/core 6.0.0-beta.1 → 6.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/core",
-  "version": "6.0.0-beta.1",
+  "version": "6.0.0-beta.3",
   "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",
@@ -66,7 +66,7 @@
     "node": ">=20"
   },
   "peerDependencies": {
-    "@rjsf/utils": "^6.x",
+    "@rjsf/utils": "6",
     "react": ">=18"
   },
   "dependencies": {
@@ -77,9 +77,9 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rjsf/snapshot-tests": "^6.0.0-beta.1",
-    "@rjsf/utils": "^6.0.0-beta.1",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.1",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.3",
+    "@rjsf/utils": "^6.0.0-beta.3",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",

package/src/components/RichDescription.tsx

@@ -0,0 +1,50 @@
+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 RichDescriptionProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> {
+  /** The description text for a field, potentially containing markdown */
+  description: 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 `RichDescriptionProps` for this component
+ */
+export default function RichDescription<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({ description, registry, uiSchema = {} }: RichDescriptionProps<T, S, F>) {
+  const { globalUiOptions } = registry;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+
+  if (uiOptions.enableMarkdownInDescription && typeof description === 'string') {
+    return (
+      <Markdown options={{ disableParsingRawHTML: true }} data-testid={TEST_IDS.markdown}>
+        {description}
+      </Markdown>
+    );
+  }
+  return description;
+}
+
+RichDescription.TEST_IDS = TEST_IDS;

package/src/components/fields/SchemaField.tsx

@@ -22,7 +22,6 @@ import {
 } from '@rjsf/utils';
 import isObject from 'lodash/isObject';
 import omit from 'lodash/omit';
-import Markdown from 'markdown-to-jsx';
 
 /** The map of component type to FieldName */
 const COMPONENT_TYPES: { [key: string]: string } = {
@@ -200,12 +199,6 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   }
 
   const description = uiOptions.description || props.schema.description || schema.description || '';
-
-  const richDescription = uiOptions.enableMarkdownInDescription ? (
-    <Markdown options={{ disableParsingRawHTML: true }}>{description}</Markdown>
-  ) : (
-    description
-  );
   const help = uiOptions.help;
   const hidden = uiOptions.widget === 'hidden';
 
@@ -246,7 +239,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     description: (
       <DescriptionFieldTemplate
         id={descriptionId<T>(id)}
-        description={richDescription}
+        description={description}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}

package/src/components/templates/DescriptionField.tsx

@@ -1,5 +1,7 @@
 import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
+import RichDescription from '../RichDescription';
+
 /** The `DescriptionField` is the template to use to render the description of a field
  *
  * @param props - The `DescriptionFieldProps` for this component
@@ -9,21 +11,13 @@ export default function DescriptionField<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: DescriptionFieldProps<T, S, F>) {
-  const { id, description } = props;
+  const { id, description, registry, uiSchema } = props;
   if (!description) {
     return null;
   }
-  if (typeof description === 'string') {
-    return (
-      <p id={id} className='field-description'>
-        {description}
-      </p>
-    );
-  } else {
-    return (
-      <div id={id} className='field-description'>
-        {description}
-      </div>
-    );
-  }
+  return (
+    <div id={id} className='field-description'>
+      <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+    </div>
+  );
 }

package/src/components/widgets/CheckboxWidget.tsx

@@ -60,7 +60,7 @@ function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
 
   return (
     <div className={`checkbox ${disabled || readonly ? 'disabled' : ''}`}>
-      {!hideLabel && !!description && (
+      {!hideLabel && description && (
         <DescriptionFieldTemplate
           id={descriptionId<T>(id)}
           description={description}

package/src/index.ts

@@ -1,8 +1,9 @@
 import Form, { FormProps, FormState, IChangeEvent } from './components/Form';
+import RichDescription, { RichDescriptionProps } from './components/RichDescription';
 import withTheme, { ThemeProps } from './withTheme';
 import getDefaultRegistry from './getDefaultRegistry';
 
-export type { FormProps, FormState, IChangeEvent, ThemeProps };
+export type { FormProps, FormState, IChangeEvent, ThemeProps, RichDescriptionProps };
 
-export { withTheme, getDefaultRegistry };
+export { withTheme, getDefaultRegistry, RichDescription };
 export default Form;