@rjsf/core 6.0.0-alpha.0 → 6.0.0-beta.2

package/src/components/templates/ArrayFieldItemButtonsTemplate.tsx

@@ -0,0 +1,85 @@
+import { useMemo } from 'react';
+import {
+  ArrayFieldItemButtonsTemplateType,
+  buttonId,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+/** The `ArrayFieldTemplateItemButtons` component is the template used to render the buttons associate3d with items of
+ * an array.
+ *
+ * @param props - The `ArrayFieldItemButtonsTemplateType` props for the component
+ */
+export default function ArrayFieldItemButtonsTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: ArrayFieldItemButtonsTemplateType<T, S, F>) {
+  const {
+    disabled,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    idSchema,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    registry,
+    uiSchema,
+  } = props;
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+  const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
+  const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
+  const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+  const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+
+  return (
+    <>
+      {(hasMoveUp || hasMoveDown) && (
+        <MoveUpButton
+          id={buttonId<T>(idSchema, 'moveUp')}
+          className='rjsf-array-item-move-up'
+          disabled={disabled || readonly || !hasMoveUp}
+          onClick={onArrowUpClick}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {(hasMoveUp || hasMoveDown) && (
+        <MoveDownButton
+          id={buttonId<T>(idSchema, 'moveDown')}
+          className='rjsf-array-item-move-down'
+          disabled={disabled || readonly || !hasMoveDown}
+          onClick={onArrowDownClick}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {hasCopy && (
+        <CopyButton
+          id={buttonId<T>(idSchema, 'copy')}
+          className='rjsf-array-item-copy'
+          disabled={disabled || readonly}
+          onClick={onCopyClick}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {hasRemove && (
+        <RemoveButton
+          id={buttonId<T>(idSchema, 'remove')}
+          className='rjsf-array-item-remove'
+          disabled={disabled || readonly}
+          onClick={onRemoveClick}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+    </>
+  );
+}

package/src/components/templates/ArrayFieldItemTemplate.tsx

@@ -1,33 +1,29 @@
 import { CSSProperties } from 'react';
-import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import {
+  ArrayFieldItemTemplateType,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
- * @param props - The `ArrayFieldTemplateItemType` props for the component
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
  */
 export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
-  const {
-    children,
-    className,
-    disabled,
-    hasToolbar,
-    hasMoveDown,
-    hasMoveUp,
-    hasRemove,
-    hasCopy,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
-    readonly,
+  F extends FormContextType = any,
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
+  const { children, className, buttonsProps, hasToolbar, registry, uiSchema } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
+    'ArrayFieldItemButtonsTemplate',
     registry,
-    uiSchema,
-  } = props;
-  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+    uiOptions,
+  );
   const btnStyle: CSSProperties = {
     flex: 1,
     paddingLeft: 6,
@@ -46,42 +42,7 @@ export default function ArrayFieldItemTemplate<
               justifyContent: 'space-around',
             }}
           >
-            {(hasMoveUp || hasMoveDown) && (
-              <MoveUpButton
-                style={btnStyle}
-                disabled={disabled || readonly || !hasMoveUp}
-                onClick={onReorderClick(index, index - 1)}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {(hasMoveUp || hasMoveDown) && (
-              <MoveDownButton
-                style={btnStyle}
-                disabled={disabled || readonly || !hasMoveDown}
-                onClick={onReorderClick(index, index + 1)}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {hasCopy && (
-              <CopyButton
-                style={btnStyle}
-                disabled={disabled || readonly}
-                onClick={onCopyIndexClick(index)}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {hasRemove && (
-              <RemoveButton
-                style={btnStyle}
-                disabled={disabled || readonly}
-                onClick={onDropIndexClick(index)}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
+            <ArrayFieldItemButtonsTemplate {...buttonsProps} style={btnStyle} />
           </div>
         </div>
       )}

package/src/components/templates/ArrayFieldTemplate.tsx

@@ -2,20 +2,21 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
+  buttonId,
 } from '@rjsf/utils';
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
- * @param props - The `ArrayFieldTemplateItemType` props for the component
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
  */
 export default function ArrayFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: ArrayFieldTemplateProps<T, S, F>) {
   const {
     canAdd,
@@ -35,17 +36,17 @@ export default function ArrayFieldTemplate<
   const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
     'ArrayFieldDescriptionTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
     'ArrayFieldItemTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
     'ArrayFieldTitleTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   // Button templates are not overridden in the uiSchema
   const {
@@ -70,13 +71,14 @@ export default function ArrayFieldTemplate<
       />
       <div className='row array-item-list'>
         {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
             <ArrayFieldItemTemplate key={key} {...itemProps} />
           ))}
       </div>
       {canAdd && (
         <AddButton
-          className='array-item-add'
+          id={buttonId<T>(idSchema, 'add')}
+          className='rjsf-array-item-add'
           onClick={onAddClick}
           disabled={disabled || readonly}
           uiSchema={uiSchema}

package/src/components/templates/ArrayFieldTitleTemplate.tsx

@@ -17,7 +17,7 @@ import {
 export default function ArrayFieldTitleTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: ArrayFieldTitleProps<T, S, F>) {
   const { idSchema, title, schema, uiSchema, required, registry } = props;
   const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
@@ -28,7 +28,7 @@ export default function ArrayFieldTitleTemplate<
   const TitleFieldTemplate: TemplatesType<T, S, F>['TitleFieldTemplate'] = getTemplate<'TitleFieldTemplate', T, S, F>(
     'TitleFieldTemplate',
     registry,
-    options
+    options,
   );
   return (
     <TitleFieldTemplate

package/src/components/templates/BaseInputTemplate.tsx

@@ -18,7 +18,7 @@ import {
 export default function BaseInputTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: BaseInputTemplateProps<T, S, F>) {
   const {
     id,
@@ -63,15 +63,15 @@ export default function BaseInputTemplate<
 
   const _onChange = useCallback(
     ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onChange(value === '' ? options.emptyValue : value),
-    [onChange, options]
+    [onChange, options],
   );
   const _onBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value),
-    [onBlur, id]
+    [onBlur, id],
   );
   const _onFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value),
-    [onFocus, id]
+    [onFocus, id],
   );
 
   return (

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

@@ -1,7 +1,7 @@
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
 
 export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>
+  props: IconButtonProps<T, S, F>,
 ) {
   const { iconType = 'default', icon, className, uiSchema, registry, ...otherProps } = props;
   return (
@@ -12,66 +12,39 @@ export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSch
 }
 
 export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>
+  props: IconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
   } = props;
-  return (
-    <IconButton
-      title={translateString(TranslatableString.CopyButton)}
-      className='array-item-copy'
-      {...props}
-      icon='copy'
-    />
-  );
+  return <IconButton title={translateString(TranslatableString.CopyButton)} {...props} icon='copy' />;
 }
 
 export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>
+  props: IconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
   } = props;
-  return (
-    <IconButton
-      title={translateString(TranslatableString.MoveDownButton)}
-      className='array-item-move-down'
-      {...props}
-      icon='arrow-down'
-    />
-  );
+  return <IconButton title={translateString(TranslatableString.MoveDownButton)} {...props} icon='arrow-down' />;
 }
 
 export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>
+  props: IconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
   } = props;
-  return (
-    <IconButton
-      title={translateString(TranslatableString.MoveUpButton)}
-      className='array-item-move-up'
-      {...props}
-      icon='arrow-up'
-    />
-  );
+  return <IconButton title={translateString(TranslatableString.MoveUpButton)} {...props} icon='arrow-up' />;
 }
 
 export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>
+  props: IconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
   } = props;
   return (
-    <IconButton
-      title={translateString(TranslatableString.RemoveButton)}
-      className='array-item-remove'
-      {...props}
-      iconType='danger'
-      icon='remove'
-    />
+    <IconButton title={translateString(TranslatableString.RemoveButton)} {...props} iconType='danger' icon='remove' />
   );
 }

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

@@ -5,7 +5,7 @@ import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema,
 export default function SubmitButton<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({ uiSchema }: SubmitButtonProps<T, S, F>) {
   const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions<T, S, F>(uiSchema);
   if (norender) {

package/src/components/templates/ButtonTemplates/index.ts

@@ -7,7 +7,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconBu
 function buttonTemplates<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): TemplatesType<T, S, F>['ButtonTemplates'] {
   return {
     SubmitButton,

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
@@ -7,23 +9,15 @@ import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema }
 export default function DescriptionField<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  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/templates/FieldErrorTemplate.tsx

@@ -7,7 +7,7 @@ import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema
 export default function FieldErrorTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: FieldErrorProps<T, S, F>) {
   const { errors = [], idSchema } = props;
   if (errors.length === 0) {

package/src/components/templates/FieldHelpTemplate.tsx

@@ -7,7 +7,7 @@ import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema }
 export default function FieldHelpTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
   const { idSchema, help } = props;
   if (!help) {

package/src/components/templates/FieldTemplate/FieldTemplate.tsx

@@ -17,14 +17,14 @@ import Label from './Label';
 export default function FieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: FieldTemplateProps<T, S, F>) {
   const { id, label, children, errors, help, description, hidden, required, displayLabel, registry, uiSchema } = props;
   const uiOptions = getUiOptions(uiSchema);
   const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
     'WrapIfAdditionalTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   if (hidden) {
     return <div className='hidden'>{children}</div>;

package/src/components/templates/GridTemplate.tsx

@@ -0,0 +1,15 @@
+import { GridTemplateProps } from '@rjsf/utils';
+
+/** Renders a `GridTemplate` for bootstrap 3, which is expecting the column information coming in via the `className`
+ * prop. Also spreads all the other props provided by the user directly on the div.
+ *
+ * @param props - The GridTemplateProps, including the expected className for the bootstrap 3 grid behavior
+ */
+export default function GridTemplate(props: GridTemplateProps) {
+  const { children, column, className, ...rest } = props;
+  return (
+    <div className={className} {...rest}>
+      {children}
+    </div>
+  );
+}

package/src/components/templates/ObjectFieldTemplate.tsx

@@ -9,6 +9,7 @@ import {
   getTemplate,
   getUiOptions,
   titleId,
+  buttonId,
 } from '@rjsf/utils';
 
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
@@ -20,7 +21,7 @@ import {
 export default function ObjectFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: ObjectFieldTemplateProps<T, S, F>) {
   const {
     description,
@@ -41,7 +42,7 @@ export default function ObjectFieldTemplate<
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
-    options
+    options,
   );
   // Button templates are not overridden in the uiSchema
   const {
@@ -71,7 +72,8 @@ export default function ObjectFieldTemplate<
       {properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
       {canExpand<T, S, F>(schema, uiSchema, formData) && (
         <AddButton
-          className='object-property-expand'
+          id={buttonId<T>(idSchema, 'add')}
+          className='rjsf-object-property-expand'
           onClick={onAddClick(schema)}
           disabled={disabled || readonly}
           uiSchema={uiSchema}

package/src/components/templates/TitleField.tsx

@@ -7,7 +7,7 @@ const REQUIRED_FIELD_SYMBOL = '*';
  * @param props - The `TitleFieldProps` for this component
  */
 export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: TitleFieldProps<T, S, F>
+  props: TitleFieldProps<T, S, F>,
 ) {
   const { id, title, required } = props;
   return (

package/src/components/templates/UnsupportedField.tsx

@@ -7,7 +7,7 @@ import Markdown from 'markdown-to-jsx';
  * @param props - The `FieldProps` for this template
  */
 function UnsupportedField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: UnsupportedFieldProps<T, S, F>
+  props: UnsupportedFieldProps<T, S, F>,
 ) {
   const { schema, idSchema, reason, registry } = props;
   const { translateString } = registry;

package/src/components/templates/WrapIfAdditionalTemplate.tsx

@@ -1,5 +1,6 @@
 import {
   ADDITIONAL_PROPERTY_FLAG,
+  buttonId,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -17,7 +18,7 @@ import Label from './FieldTemplate/Label';
 export default function WrapIfAdditionalTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: WrapIfAdditionalTemplateProps<T, S, F>) {
   const {
     id,
@@ -30,6 +31,8 @@ export default function WrapIfAdditionalTemplate<
     readonly,
     required,
     schema,
+    hideError,
+    rawErrors,
     children,
     uiSchema,
     registry,
@@ -40,16 +43,22 @@ export default function WrapIfAdditionalTemplate<
   const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
 
+  const classNamesList = ['form-group', classNames];
+  if (!hideError && rawErrors && rawErrors.length > 0) {
+    classNamesList.push('has-error has-danger');
+  }
+  const uiClassNames = classNamesList.join(' ').trim();
+
   if (!additional) {
     return (
-      <div className={classNames} style={style}>
+      <div className={uiClassNames} style={style}>
         {children}
       </div>
     );
   }
 
   return (
-    <div className={classNames} style={style}>
+    <div className={uiClassNames} style={style}>
       <div className='row'>
         <div className='col-xs-5 form-additional'>
           <div className='form-group'>
@@ -66,7 +75,8 @@ export default function WrapIfAdditionalTemplate<
         <div className='form-additional form-group col-xs-5'>{children}</div>
         <div className='col-xs-2'>
           <RemoveButton
-            className='array-item-remove btn-block'
+            id={buttonId<T>(id, 'remove')}
+            className='rjsf-object-property-remove btn-block'
             style={{ border: '0' }}
             disabled={disabled || readonly}
             onClick={onDropPropertyClick(label)}

package/src/components/templates/index.ts

@@ -2,6 +2,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@r
 
 import ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';
 import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
+import ArrayFieldItemButtonsTemplate from './ArrayFieldItemButtonsTemplate';
 import ArrayFieldTemplate from './ArrayFieldTemplate';
 import ArrayFieldTitleTemplate from './ArrayFieldTitleTemplate';
 import BaseInputTemplate from './BaseInputTemplate';
@@ -11,6 +12,7 @@ import ErrorList from './ErrorList';
 import FieldTemplate from './FieldTemplate';
 import FieldErrorTemplate from './FieldErrorTemplate';
 import FieldHelpTemplate from './FieldHelpTemplate';
+import GridTemplate from './GridTemplate';
 import ObjectFieldTemplate from './ObjectFieldTemplate';
 import TitleField from './TitleField';
 import UnsupportedField from './UnsupportedField';
@@ -24,6 +26,7 @@ function templates<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
   return {
     ArrayFieldDescriptionTemplate,
     ArrayFieldItemTemplate,
+    ArrayFieldItemButtonsTemplate,
     ArrayFieldTemplate,
     ArrayFieldTitleTemplate,
     ButtonTemplates: ButtonTemplates<T, S, F>(),
@@ -33,6 +36,7 @@ function templates<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
     FieldTemplate,
     FieldErrorTemplate,
     FieldHelpTemplate,
+    GridTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     UnsupportedFieldTemplate: UnsupportedField,