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

package/lib/components/RichDescription.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { FormContextType, Registry, RJSFSchema, StrictRJSFSchema, UiSchema } from '@rjsf/utils';
+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
+ */
+declare function RichDescription<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ description, registry, uiSchema }: RichDescriptionProps<T, S, F>): string | import("react/jsx-runtime").JSX.Element;
+declare namespace RichDescription {
+    var TEST_IDS: import("@rjsf/utils").TestIdShape;
+}
+export default RichDescription;
+//# sourceMappingURL=RichDescription.d.ts.map

package/lib/components/RichDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichDescription.d.ts","sourceRoot":"","sources":["../../src/components/RichDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EACL,eAAe,EACf,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,QAAQ,EAGT,MAAM,aAAa,CAAC;AAKrB,MAAM,WAAW,oBAAoB,CACnC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG;IAE/B,wEAAwE;IACxE,WAAW,EAAE,MAAM,GAAG,YAAY,CAAC;IACnC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC7B,4BAA4B;IAC5B,QAAQ,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;CAC7B;AAED;;;GAGG;AACH,iBAAwB,eAAe,CACrC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAa,EAAE,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,oDAYxE;kBAhBuB,eAAe;;;eAAf,eAAe"}

package/lib/components/RichDescription.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTestIds, getUiOptions, } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
+const TEST_IDS = getTestIds();
+/** Renders the given `description` in the props as
+ *
+ * @param props - The `RichDescriptionProps` for this component
+ */
+export default function RichDescription({ description, registry, uiSchema = {} }) {
+    const { globalUiOptions } = registry;
+    const uiOptions = getUiOptions(uiSchema, globalUiOptions);
+    if (uiOptions.enableMarkdownInDescription && typeof description === 'string') {
+        return (_jsx(Markdown, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS.markdown, children: description }));
+    }
+    return description;
+}
+RichDescription.TEST_IDS = TEST_IDS;

package/lib/components/fields/SchemaField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SchemaField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAiB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAKL,UAAU,EAEV,eAAe,EAQf,UAAU,EACV,gBAAgB,EAIjB,MAAM,aAAa,CAAC;AAoUrB;;GAEG;AACH,cAAM,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,CAAE,SAAQ,SAAS,CACpH,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CACpB;IACC,qBAAqB,CAAC,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAI9D,MAAM;CAGP;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SchemaField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAiB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAKL,UAAU,EAEV,eAAe,EAQf,UAAU,EACV,gBAAgB,EAIjB,MAAM,aAAa,CAAC;AA6TrB;;GAEG;AACH,cAAM,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,CAAE,SAAQ,SAAS,CACpH,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CACpB;IACC,qBAAqB,CAAC,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAI9D,MAAM;CAGP;AAED,eAAe,WAAW,CAAC"}

package/lib/components/fields/SchemaField.js

@@ -3,7 +3,6 @@ import { useCallback, Component } from 'react';
 import { ADDITIONAL_PROPERTY_FLAG, deepEquals, descriptionId, getSchemaType, getTemplate, getUiOptions, ID_KEY, mergeObjects, TranslatableString, UI_OPTIONS_KEY, } from '@rjsf/utils';
 import isObject from 'lodash-es/isObject.js';
 import omit from 'lodash-es/omit.js';
-import Markdown from 'markdown-to-jsx';
 /** The map of component type to FieldName */
 const COMPONENT_TYPES = {
     array: 'ArrayField',
@@ -107,7 +106,6 @@ function SchemaFieldRender(props) {
                 : uiOptions.title || props.schema.title || schema.title || props.title || name;
     }
     const description = uiOptions.description || props.schema.description || schema.description || '';
-    const richDescription = uiOptions.enableMarkdownInDescription ? (_jsx(Markdown, { options: { disableParsingRawHTML: true }, children: description })) : (description);
     const help = uiOptions.help;
     const hidden = uiOptions.widget === 'hidden';
     const classNames = ['rjsf-field', `rjsf-field-${getSchemaType(schema)}`];
@@ -124,7 +122,7 @@ function SchemaFieldRender(props) {
      */
     const errorsComponent = hideError || ((schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema)) ? undefined : (_jsx(FieldErrorTemplate, { errors: __errors, errorSchema: errorSchema, idSchema: idSchema, schema: schema, uiSchema: uiSchema, registry: registry }));
     const fieldProps = {
-        description: (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: richDescription, schema: schema, uiSchema: uiSchema, registry: registry })),
+        description: (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: description, schema: schema, uiSchema: uiSchema, registry: registry })),
         rawDescription: description,
         help: helpComponent,
         rawHelp: typeof help === 'string' ? help : undefined,

package/lib/components/templates/DescriptionField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionField.d.ts","sourceRoot":"","sources":["../../../src/components/templates/DescriptionField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEnG;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,qBAAqB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,kDAkBtC"}
+{"version":3,"file":"DescriptionField.d.ts","sourceRoot":"","sources":["../../../src/components/templates/DescriptionField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAInG;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,qBAAqB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,kDAUtC"}

package/lib/components/templates/DescriptionField.js

@@ -1,17 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import RichDescription from '../RichDescription.js';
 /** The `DescriptionField` is the template to use to render the description of a field
  *
  * @param props - The `DescriptionFieldProps` for this component
  */
 export default function DescriptionField(props) {
-    const { id, description } = props;
+    const { id, description, registry, uiSchema } = props;
     if (!description) {
         return null;
     }
-    if (typeof description === 'string') {
-        return (_jsx("p", { id: id, className: 'field-description', children: description }));
-    }
-    else {
-        return (_jsx("div", { id: id, className: 'field-description', children: description }));
-    }
+    return (_jsx("div", { id: id, className: 'field-description', children: _jsx(RichDescription, { description: description, registry: registry, uiSchema: uiSchema }) }));
 }

package/lib/components/widgets/CheckboxWidget.js

@@ -16,6 +16,6 @@ function CheckboxWidget({ schema, uiSchema, options, id, value, disabled, readon
     const handleBlur = useCallback((event) => onBlur(id, event.target.checked), [onBlur, id]);
     const handleFocus = useCallback((event) => onFocus(id, event.target.checked), [onFocus, id]);
     const description = options.description ?? schema.description;
-    return (_jsxs("div", { className: `checkbox ${disabled || readonly ? 'disabled' : ''}`, children: [!hideLabel && !!description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsxs("label", { children: [_jsx("input", { type: 'checkbox', id: id, name: id, checked: typeof value === 'undefined' ? false : value, required: required, disabled: disabled || readonly, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, "aria-describedby": ariaDescribedByIds(id) }), labelValue(_jsx("span", { children: label }), hideLabel)] })] }));
+    return (_jsxs("div", { className: `checkbox ${disabled || readonly ? 'disabled' : ''}`, children: [!hideLabel && description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsxs("label", { children: [_jsx("input", { type: 'checkbox', id: id, name: id, checked: typeof value === 'undefined' ? false : value, required: required, disabled: disabled || readonly, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, "aria-describedby": ariaDescribedByIds(id) }), labelValue(_jsx("span", { children: label }), hideLabel)] })] }));
 }
 export default CheckboxWidget;

package/lib/index.d.ts

@@ -1,7 +1,8 @@
 import Form, { FormProps, FormState, IChangeEvent } from './components/Form.js';
+import RichDescription, { RichDescriptionProps } from './components/RichDescription.js';
 import withTheme, { ThemeProps } from './withTheme.js';
 import getDefaultRegistry from './getDefaultRegistry.js';
-export type { FormProps, FormState, IChangeEvent, ThemeProps };
-export { withTheme, getDefaultRegistry };
+export type { FormProps, FormState, IChangeEvent, ThemeProps, RichDescriptionProps };
+export { withTheme, getDefaultRegistry, RichDescription };
 export default Form;
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;AACzC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,eAAe,EAAE,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,oBAAoB,EAAE,CAAC;AAErF,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC;AAC1D,eAAe,IAAI,CAAC"}

package/lib/index.js

@@ -1,5 +1,6 @@
 import Form from './components/Form.js';
+import RichDescription from './components/RichDescription.js';
 import withTheme from './withTheme.js';
 import getDefaultRegistry from './getDefaultRegistry.js';
-export { withTheme, getDefaultRegistry };
+export { withTheme, getDefaultRegistry, RichDescription };
 export default Form;