@rjsf/core 6.0.2 → 6.1.1

package/lib/components/RichHelp.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichHelp.d.ts","sourceRoot":"","sources":["../../src/components/RichHelp.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,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG;IAC9G,wEAAwE;IACxE,IAAI,EAAE,MAAM,GAAG,YAAY,CAAC;IAC5B,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,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EAClH,IAAI,EACJ,QAAQ,EACR,QAAa,GACd,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,oDAYxB;kBAhBuB,QAAQ;;;eAAR,QAAQ"}

package/lib/components/RichHelp.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 `RichHelpProps` for this component
+ */
+export default function RichHelp({ help, registry, uiSchema = {}, }) {
+    const { globalUiOptions } = registry;
+    const uiOptions = getUiOptions(uiSchema, globalUiOptions);
+    if (uiOptions.enableMarkdownInHelp && typeof help === 'string') {
+        return (_jsx(Markdown, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS.markdown, children: help }));
+    }
+    return help;
+}
+RichHelp.TEST_IDS = TEST_IDS;

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

@@ -1 +1 @@
-{"version":3,"file":"ArrayField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ArrayField.tsx"],"names":[],"mappings":"AACA,OAAO,EAmBL,UAAU,EACV,eAAe,EAEf,UAAU,EACV,gBAAgB,EAIjB,MAAM,aAAa,CAAC;AA0yBrB;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAClH,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,2CAkP7B"}
+{"version":3,"file":"ArrayField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ArrayField.tsx"],"names":[],"mappings":"AACA,OAAO,EAmBL,UAAU,EACV,eAAe,EAEf,UAAU,EACV,gBAAgB,EAIjB,MAAM,aAAa,CAAC;AAizBrB;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAClH,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,2CAkP7B"}

package/lib/components/fields/ArrayField.js

@@ -165,10 +165,13 @@ function ArrayAsFiles(props) {
  */
 function ArrayFieldItem(props) {
     const { itemKey, index, name, disabled, hideError, readonly, registry, uiOptions, parentUiSchema, canAdd, canRemove = true, canMoveUp, canMoveDown, itemSchema, itemData, itemUiSchema, itemFieldPathId, itemErrorSchema, autofocus, onBlur, onFocus, onChange, rawErrors, totalItems, title, handleAddItem, handleCopyItem, handleRemoveItem, handleReorderItems, } = props;
-    const { fields: { ArraySchemaField, SchemaField }, } = registry;
+    const { schemaUtils, fields: { ArraySchemaField, SchemaField }, globalUiOptions, } = registry;
     const fieldPathId = useDeepCompareMemo(itemFieldPathId);
     const ItemSchemaField = ArraySchemaField || SchemaField;
     const ArrayFieldItemTemplate = getTemplate('ArrayFieldItemTemplate', 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 = {
         moveUp: orderable && canMoveUp,
@@ -226,6 +229,8 @@ function ArrayFieldItem(props) {
         schema: itemSchema,
         uiSchema: itemUiSchema,
         parentUiSchema,
+        displayLabel,
+        hasDescription,
     };
     return _jsx(ArrayFieldItemTemplate, { ...templateProps });
 }

package/lib/components/fields/ObjectField.js

@@ -210,7 +210,7 @@ export default function ObjectField(props) {
             const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
             const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
             const hidden = getUiOptions(fieldUiSchema).widget === 'hidden';
-            const content = (_jsx(ObjectFieldProperty, { propertyName: name, required: isRequired(schema, name), schema: get(schema, [PROPERTIES_KEY, name], {}), uiSchema: fieldUiSchema, errorSchema: get(errorSchema, name), fieldPathId: childFieldPathId, formData: get(formData, name), handleKeyRename: handleKeyRename, handleRemoveProperty: handleRemoveProperty, addedByAdditionalProperties: addedByAdditionalProperties, onChange: onChange, onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError }, name));
+            const content = (_jsx(ObjectFieldProperty, { propertyName: name, required: isRequired(schema, name), schema: get(schema, [PROPERTIES_KEY, name], {}), uiSchema: fieldUiSchema, errorSchema: get(errorSchema, [name]), fieldPathId: childFieldPathId, formData: get(formData, [name]), handleKeyRename: handleKeyRename, handleRemoveProperty: handleRemoveProperty, addedByAdditionalProperties: addedByAdditionalProperties, onChange: onChange, onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError }, name));
             return {
                 content,
                 name,

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

@@ -1 +1 @@
-{"version":3,"file":"StringField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/StringField.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,UAAU,EACV,eAAe,EACf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,iBAAS,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACpG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA6D3B;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StringField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/StringField.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,UAAU,EACV,eAAe,EACf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,iBAAS,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACpG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA8D3B;AAED,eAAe,WAAW,CAAC"}

package/lib/components/fields/StringField.js

@@ -6,8 +6,8 @@ import { getWidget, getUiOptions, optionsList, hasWidget, } from '@rjsf/utils';
  * @param props - The `FieldProps` for this template
  */
 function StringField(props) {
-    const { schema, name, uiSchema, fieldPathId, formData, required, disabled = false, readonly = false, autofocus = false, onChange, onBlur, onFocus, registry, rawErrors, hideError, } = props;
-    const { title, format } = schema;
+    const { schema, name, uiSchema, fieldPathId, formData, required, disabled = false, readonly = false, autofocus = false, onChange, onBlur, onFocus, registry, rawErrors, hideError, title, } = props;
+    const { title: schemaTitle, format } = schema;
     const { widgets, schemaUtils, globalUiOptions } = registry;
     const enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema, uiSchema) : undefined;
     let defaultWidget = enumOptions ? 'select' : 'text';
@@ -16,7 +16,7 @@ function StringField(props) {
     }
     const { widget = defaultWidget, placeholder = '', title: uiTitle, ...options } = getUiOptions(uiSchema);
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-    const label = uiTitle ?? title ?? name;
+    const label = uiTitle ?? title ?? schemaTitle ?? name;
     const Widget = getWidget(schema, widget, widgets);
     const onWidgetChange = useCallback((value, errorSchema, id) => {
         // String field change passes an empty path array to the parent field which adds the appropriate path

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

@@ -1 +1 @@
-{"version":3,"file":"ArrayFieldItemTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/ArrayFieldItemTemplate.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,2BAA2B,EAC3B,eAAe,EAGf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,2BAA2B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAgC5C"}
+{"version":3,"file":"ArrayFieldItemTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/ArrayFieldItemTemplate.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,2BAA2B,EAC3B,eAAe,EAGf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,2BAA2B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA6B5C"}

package/lib/components/templates/ArrayFieldItemTemplate.js

@@ -5,7 +5,7 @@ import { getTemplate, getUiOptions, } from '@rjsf/utils';
  * @param props - The `ArrayFieldItemTemplateProps` props for the component
  */
 export default function ArrayFieldItemTemplate(props) {
-    const { children, className, buttonsProps, hasToolbar, registry, uiSchema } = props;
+    const { children, className, buttonsProps, displayLabel, hasDescription, hasToolbar, registry, uiSchema } = props;
     const uiOptions = getUiOptions(uiSchema);
     const ArrayFieldItemButtonsTemplate = getTemplate('ArrayFieldItemButtonsTemplate', registry, uiOptions);
     const btnStyle = {
@@ -14,8 +14,8 @@ export default function ArrayFieldItemTemplate(props) {
         paddingRight: 6,
         fontWeight: 'bold',
     };
-    return (_jsxs("div", { className: className, children: [_jsx("div", { className: hasToolbar ? 'col-xs-9' : 'col-xs-12', children: children }), hasToolbar && (_jsx("div", { className: 'col-xs-3 array-item-toolbox', children: _jsx("div", { className: 'btn-group', style: {
-                        display: 'flex',
-                        justifyContent: 'space-around',
-                    }, children: _jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) }) }))] }));
+    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 (_jsxs("div", { className: className, style: containerStyle, children: [_jsx("div", { className: hasToolbar ? 'col-xs-9 col-md-10 col-xl-11' : 'col-xs-12', children: children }), hasToolbar && (_jsx("div", { className: 'col-xs-3 col-md-2 col-xl-1 array-item-toolbox', children: _jsx("div", { className: 'btn-group', style: toolbarStyle, children: _jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) }) }))] }));
 }

package/lib/components/templates/ButtonTemplates/AddButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddButton.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/ButtonTemplates/AddButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAsB,MAAM,aAAa,CAAC;AAIjH;GACG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACnH,EAAE,EACF,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAkB1B"}
+{"version":3,"file":"AddButton.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/ButtonTemplates/AddButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAsB,MAAM,aAAa,CAAC;AAIjH;GACG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACnH,EAAE,EACF,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAoB1B"}

package/lib/components/templates/ButtonTemplates/AddButton.js

@@ -5,5 +5,5 @@ import IconButton from './IconButton.js';
  */
 export default function AddButton({ id, className, onClick, disabled, registry, }) {
     const { translateString } = registry;
-    return (_jsx("div", { className: 'row', children: _jsx("p", { className: `col-xs-3 col-xs-offset-9 text-right ${className}`, children: _jsx(IconButton, { id: id, iconType: 'info', icon: 'plus', className: 'btn-add col-xs-12', title: translateString(TranslatableString.AddButton), onClick: onClick, disabled: disabled, registry: registry }) }) }));
+    return (_jsx("div", { className: 'row', children: _jsx("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}`, children: _jsx(IconButton, { id: id, iconType: 'info', icon: 'plus', className: 'btn-add col-xs-12', title: translateString(TranslatableString.AddButton), onClick: onClick, disabled: disabled, registry: registry }) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FieldHelpTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/FieldHelpTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpG;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,kDAkB/B"}
+{"version":3,"file":"FieldHelpTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/FieldHelpTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpG;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,kDAW/B"}

package/lib/components/templates/FieldHelpTemplate.js

@@ -1,17 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { helpId } from '@rjsf/utils';
+import RichHelp from '../RichHelp.js';
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
  * @param props - The `FieldHelpProps` to be rendered
  */
 export default function FieldHelpTemplate(props) {
-    const { fieldPathId, help } = props;
+    const { fieldPathId, help, uiSchema, registry } = props;
     if (!help) {
         return null;
     }
-    const id = helpId(fieldPathId);
-    if (typeof help === 'string') {
-        return (_jsx("p", { id: id, className: 'help-block', children: help }));
-    }
-    return (_jsx("div", { id: id, className: 'help-block', children: help }));
+    return (_jsx("div", { id: helpId(fieldPathId), className: 'help-block', children: _jsx(RichHelp, { help: help, registry: registry, uiSchema: uiSchema }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"WrapIfAdditionalTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/WrapIfAdditionalTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,eAAe,EACf,UAAU,EACV,gBAAgB,EAEhB,6BAA6B,EAC9B,MAAM,aAAa,CAAC;AAIrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,6BAA6B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAoE9C"}
+{"version":3,"file":"WrapIfAdditionalTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/WrapIfAdditionalTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,eAAe,EACf,UAAU,EACV,gBAAgB,EAEhB,6BAA6B,EAC9B,MAAM,aAAa,CAAC;AAIrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,6BAA6B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAwE9C"}

package/lib/components/templates/WrapIfAdditionalTemplate.js

@@ -7,12 +7,13 @@ import Label from './FieldTemplate/Label.js';
  * @param props - The `WrapIfAdditionalProps` for this component
  */
 export default function WrapIfAdditionalTemplate(props) {
-    const { id, classNames, style, disabled, label, onKeyRenameBlur, onRemoveProperty, readonly, required, schema, hideError, rawErrors, children, uiSchema, registry, } = props;
+    const { id, classNames, style, disabled, displayLabel, label, onKeyRenameBlur, onRemoveProperty, rawDescription, readonly, required, schema, hideError, rawErrors, children, uiSchema, registry, } = props;
     const { templates, translateString } = registry;
     // Button templates are not overridden in the uiSchema
     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) {
         classNamesList.push('has-error has-danger');
@@ -21,5 +22,6 @@ export default function WrapIfAdditionalTemplate(props) {
     if (!additional) {
         return (_jsx("div", { className: uiClassNames, style: style, children: children }));
     }
-    return (_jsx("div", { className: uiClassNames, style: style, children: _jsxs("div", { className: 'row', children: [_jsx("div", { className: 'col-xs-5 form-additional', children: _jsxs("div", { className: 'form-group', children: [_jsx(Label, { label: keyLabel, required: required, id: `${id}-key` }), _jsx("input", { className: 'form-control', type: 'text', id: `${id}-key`, onBlur: onKeyRenameBlur, defaultValue: label })] }) }), _jsx("div", { className: 'form-additional form-group col-xs-5', children: children }), _jsx("div", { className: 'col-xs-2', children: _jsx(RemoveButton, { id: buttonId(id, 'remove'), className: 'rjsf-object-property-remove btn-block', style: { border: '0' }, disabled: disabled || readonly, onClick: onRemoveProperty, uiSchema: uiSchema, registry: registry }) })] }) }));
+    const margin = hasDescription ? 46 : 26;
+    return (_jsx("div", { className: uiClassNames, style: style, children: _jsxs("div", { className: 'row', children: [_jsx("div", { className: 'col-xs-5 form-additional', children: _jsxs("div", { className: 'form-group', children: [displayLabel && _jsx(Label, { label: keyLabel, required: required, id: `${id}-key` }), displayLabel && rawDescription && _jsx("div", { children: "\u00A0" }), _jsx("input", { className: 'form-control', type: 'text', id: `${id}-key`, onBlur: onKeyRenameBlur, defaultValue: label })] }) }), _jsx("div", { className: 'form-additional form-group col-xs-5', children: children }), _jsx("div", { className: 'col-xs-2', style: { marginTop: displayLabel ? `${margin}px` : undefined }, children: _jsx(RemoveButton, { id: buttonId(id, 'remove'), className: 'rjsf-object-property-remove btn-block', style: { border: '0' }, disabled: disabled || readonly, onClick: onRemoveProperty, uiSchema: uiSchema, registry: registry }) })] }) }));
 }

package/lib/index.d.ts

@@ -1,9 +1,10 @@
 import Form, { FormProps, FormState, IChangeEvent } from './components/Form.js';
 import RichDescription, { RichDescriptionProps } from './components/RichDescription.js';
+import RichHelp, { RichHelpProps } from './components/RichHelp.js';
 import withTheme, { ThemeProps } from './withTheme.js';
 import getDefaultRegistry from './getDefaultRegistry.js';
 import getTestRegistry from './getTestRegistry.js';
-export type { FormProps, FormState, IChangeEvent, ThemeProps, RichDescriptionProps };
-export { withTheme, getDefaultRegistry, getTestRegistry, RichDescription };
+export type { FormProps, FormState, IChangeEvent, ThemeProps, RichDescriptionProps, RichHelpProps };
+export { withTheme, getDefaultRegistry, getTestRegistry, RichDescription, RichHelp };
 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,eAAe,EAAE,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,oBAAoB,EAAE,CAAC;AAErF,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAC3E,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,QAAQ,EAAE,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,oBAAoB,EAAE,aAAa,EAAE,CAAC;AAEpG,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC;AACrF,eAAe,IAAI,CAAC"}

package/lib/index.js

@@ -1,7 +1,8 @@
 import Form from './components/Form.js';
 import RichDescription from './components/RichDescription.js';
+import RichHelp from './components/RichHelp.js';
 import withTheme from './withTheme.js';
 import getDefaultRegistry from './getDefaultRegistry.js';
 import getTestRegistry from './getTestRegistry.js';
-export { withTheme, getDefaultRegistry, getTestRegistry, RichDescription };
+export { withTheme, getDefaultRegistry, getTestRegistry, RichDescription, RichHelp };
 export default Form;