@rjsf/core 5.24.10 → 6.0.0-beta.1

package/src/components/fields/LayoutHeaderField.tsx

@@ -0,0 +1,49 @@
+import {
+  getTemplate,
+  getUiOptions,
+  titleId,
+  FieldProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TemplatesType,
+} from '@rjsf/utils';
+
+/** The `LayoutHeaderField` component renders a `TitleFieldTemplate` with an `id` derived from the `idSchema`
+ * and whether it is `required` from the props. The `title` is derived from the props as follows:
+ * - If there is a title in the `uiSchema`, it is displayed
+ * - Else, if there is an explicit `title` passed in the props, it is displayed
+ * - Otherwise, if there is a title in the `schema`, it is displayed
+ * - Finally, the `name` prop is displayed as the title
+ *
+ * @param props - The `LayoutHeaderField` for the component
+ */
+export default function LayoutHeaderField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: FieldProps<T, S, F>) {
+  const { idSchema, title, schema, uiSchema, required, registry, name } = props;
+  const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
+  const { title: uiTitle } = options;
+  const { title: schemaTitle } = schema;
+  const fieldTitle = uiTitle || title || schemaTitle || name;
+  if (!fieldTitle) {
+    return null;
+  }
+  const TitleFieldTemplate: TemplatesType<T, S, F>['TitleFieldTemplate'] = getTemplate<'TitleFieldTemplate', T, S, F>(
+    'TitleFieldTemplate',
+    registry,
+    options,
+  );
+  return (
+    <TitleFieldTemplate
+      id={titleId<T>(idSchema)}
+      title={fieldTitle}
+      required={required}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    />
+  );
+}

package/src/components/fields/LayoutMultiSchemaField.tsx

@@ -0,0 +1,228 @@
+import { useState, useEffect } from 'react';
+import {
+  ANY_OF_KEY,
+  CONST_KEY,
+  DEFAULT_KEY,
+  EnumOptionsType,
+  ERRORS_KEY,
+  FieldProps,
+  FormContextType,
+  getDiscriminatorFieldFromSchema,
+  hashObject,
+  ID_KEY,
+  ONE_OF_KEY,
+  optionsList,
+  PROPERTIES_KEY,
+  RJSFSchema,
+  getTemplate,
+  getUiOptions,
+  getWidget,
+  SchemaUtilsType,
+  StrictRJSFSchema,
+  UiSchema,
+} from '@rjsf/utils';
+import get from 'lodash/get';
+import has from 'lodash/has';
+import isEmpty from 'lodash/isEmpty';
+import noop from 'lodash/noop';
+import omit from 'lodash/omit';
+import set from 'lodash/set';
+
+/** Gets the selected option from the list of `options`, using the `selectorField` to search inside each `option` for
+ * the `properties[selectorField].default(or const)` that matches the given `value`.
+ *
+ * @param options - The list of schemas each representing a choice in the `oneOf`
+ * @param selectorField - The name of the field that is common in all of the schemas that represents the selector field
+ * @param value - The current value of the selector field from the data
+ */
+export function getSelectedOption<S extends StrictRJSFSchema = RJSFSchema>(
+  options: EnumOptionsType<S>[],
+  selectorField: string,
+  value: unknown,
+): S | undefined {
+  const defaultValue = '!@#!@$@#$!@$#';
+  const schemaOptions: S[] = options.map(({ schema }) => schema!);
+  return schemaOptions.find((option) => {
+    const selector = get(option, [PROPERTIES_KEY, selectorField]);
+    const result = get(selector, DEFAULT_KEY, get(selector, CONST_KEY, defaultValue));
+    return result === value;
+  });
+}
+
+/** Computes the `enumOptions` array from the schema and options.
+ *
+ * @param schema - The schema that contains the `options`
+ * @param options - The options from the `schema`
+ * @param schemaUtils - The SchemaUtilsType object used to call retrieveSchema,
+ * @param [uiSchema] - The optional uiSchema for the schema
+ * @param [formData] - The optional formData associated with the schema
+ * @returns - The list of enumOptions for the `schema` and `options`
+ * @throws - Error when no enum options were computed
+ */
+export function computeEnumOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  schema: S,
+  options: S[],
+  schemaUtils: SchemaUtilsType<T, S, F>,
+  uiSchema?: UiSchema<T, S, F>,
+  formData?: T,
+): EnumOptionsType<S>[] {
+  const realOptions = options.map((opt: S) => schemaUtils.retrieveSchema(opt, formData));
+  let tempSchema = schema;
+  if (has(schema, ONE_OF_KEY)) {
+    tempSchema = { ...schema, [ONE_OF_KEY]: realOptions };
+  } else if (has(schema, ANY_OF_KEY)) {
+    tempSchema = { ...schema, [ANY_OF_KEY]: realOptions };
+  }
+  const enumOptions = optionsList<T, S, F>(tempSchema, uiSchema);
+  if (!enumOptions) {
+    throw new Error(`No enumOptions were computed from the schema ${JSON.stringify(tempSchema)}`);
+  }
+  return enumOptions;
+}
+
+/** The `LayoutMultiSchemaField` is an adaptation of the `MultiSchemaField` but changed considerably to only
+ * support `anyOf`/`oneOf` fields that are being displayed in a `LayoutGridField` where the field selection is shown as
+ * a radio group by default. It expects that a `selectorField` is provided (either directly via the `discriminator`
+ * field or indirectly via `ui:optionsSchemaSelector` in the `uiSchema`) to help determine which `anyOf`/`oneOf` schema
+ * is active. If no `selectorField` is specified, then an error is thrown.
+ */
+export default function LayoutMultiSchemaField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: FieldProps<T, S, F>) {
+  const {
+    name,
+    baseType,
+    disabled = false,
+    formData,
+    idSchema,
+    onBlur,
+    onChange,
+    options,
+    onFocus,
+    registry,
+    uiSchema,
+    schema,
+    formContext,
+    autofocus,
+    readonly,
+    required,
+    errorSchema,
+    hideError = false,
+  } = props;
+  const { widgets, schemaUtils, globalUiOptions } = registry;
+  const [enumOptions, setEnumOptions] = useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData)!);
+  const id = get(idSchema, ID_KEY);
+  const discriminator = getDiscriminatorFieldFromSchema(schema);
+  const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, options);
+  const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, options);
+  const schemaHash = hashObject(schema);
+  const optionsHash = hashObject(options);
+  const uiSchemaHash = uiSchema ? hashObject(uiSchema) : '';
+  const formDataHash = formData ? hashObject(formData) : '';
+
+  useEffect(() => {
+    setEnumOptions(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
+    // We are using hashes in place of the dependencies
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [schemaHash, optionsHash, schemaUtils, uiSchemaHash, formDataHash]);
+  const {
+    widget = discriminator ? 'radio' : 'select',
+    title = '',
+    placeholder = '',
+    optionsSchemaSelector: selectorField = discriminator,
+    hideError: uiSchemaHideError,
+    ...uiOptions
+  } = getUiOptions<T, S, F>(uiSchema);
+  if (!selectorField) {
+    throw new Error('No selector field provided for the LayoutMultiSchemaField');
+  }
+  const selectedOption = get(formData, selectorField);
+  let optionSchema: S = get(enumOptions[0]?.schema, [PROPERTIES_KEY, selectorField], {}) as S;
+  const option = getSelectedOption<S>(enumOptions, selectorField, selectedOption);
+  // If the subschema doesn't declare a type, infer the type from the parent schema
+  optionSchema = optionSchema?.type ? optionSchema : ({ ...optionSchema, type: option?.type || baseType } as S);
+  const Widget = getWidget<T, S, F>(optionSchema!, widget, widgets);
+
+  // The following code was copied from `@rjsf`'s `SchemaField`
+  // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
+  const hideFieldError = uiSchemaHideError === undefined ? hideError : Boolean(uiSchemaHideError);
+
+  const rawErrors = get(errorSchema, [ERRORS_KEY], []) as string[];
+  const fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
+  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+
+  /** Callback function that updates the selected option and adjusts the form data based on the structure of the new
+   * option, calling the `onChange` callback with the adjusted formData.
+   *
+   * @param opt - If the option is undefined, we are going to clear the selection otherwise we
+   *      will use it as the index of the new option to select
+   */
+  const onOptionChange = (opt?: unknown) => {
+    const newOption = getSelectedOption<S>(enumOptions, selectorField, opt);
+    const oldOption = getSelectedOption<S>(enumOptions, selectorField, selectedOption);
+
+    let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
+    if (newFormData && newOption) {
+      // Call getDefaultFormState to make sure defaults are populated on change.
+      newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren') as T;
+    }
+    if (newFormData) {
+      set(newFormData, selectorField, opt);
+    }
+    onChange(newFormData, undefined, id);
+  };
+
+  // filtering the options based on the type of widget because `selectField` does not recognize the `convertOther` prop
+  const widgetOptions = { enumOptions, ...uiOptions };
+  const errors =
+    !hideFieldError && rawErrors.length > 0 ? (
+      <FieldErrorTemplate idSchema={idSchema} schema={schema} errors={rawErrors} registry={registry} />
+    ) : undefined;
+  const ignored = (value: string) => noop;
+
+  return (
+    <FieldTemplate
+      id={id}
+      schema={schema}
+      label={(title || schema.title) ?? ''}
+      disabled={disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions))}
+      uiSchema={uiSchema}
+      formContext={formContext}
+      required={required}
+      readonly={!!readonly}
+      registry={registry}
+      displayLabel={displayLabel}
+      errors={errors}
+      onChange={onChange}
+      onDropPropertyClick={ignored}
+      onKeyChange={ignored}
+    >
+      <Widget
+        id={id}
+        name={name}
+        schema={schema}
+        label={(title || schema.title) ?? ''}
+        disabled={disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions))}
+        uiSchema={uiSchema}
+        formContext={formContext}
+        autofocus={autofocus}
+        readonly={readonly}
+        required={required}
+        registry={registry}
+        multiple={false}
+        rawErrors={rawErrors}
+        hideError={hideFieldError}
+        hideLabel={!displayLabel}
+        errorSchema={fieldErrorSchema}
+        placeholder={placeholder}
+        onChange={onOptionChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        value={selectedOption}
+        options={widgetOptions}
+      />
+    </FieldTemplate>
+  );
+}

package/src/components/fields/NullField.tsx

@@ -7,7 +7,7 @@ import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf
  * @param props - The `FieldProps` for this template
  */
 function NullField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: FieldProps<T, S, F>
+  props: FieldProps<T, S, F>,
 ) {
   const { formData, onChange } = props;
   useEffect(() => {

package/src/components/fields/NumberField.tsx

@@ -31,7 +31,7 @@ const trailingCharMatcher = /[0.]0*$/;
  *    value is passed to the input instead of the formData value
  */
 function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: FieldProps<T, S, F>
+  props: FieldProps<T, S, F>,
 ) {
   const { registry, onChange, formData, value: initialValue } = props;
   const [lastValue, setLastValue] = useState(initialValue);
@@ -64,7 +64,7 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
 
       onChange(processed as unknown as T, errorSchema, id);
     },
-    [onChange]
+    [onChange],
   );
 
   if (typeof lastValue === 'string' && typeof value === 'number') {

package/src/components/fields/ObjectField.tsx

@@ -86,7 +86,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
             ...errorSchema,
             [name]: newErrorSchema,
           },
-        id
+        id,
       );
     };
   };
@@ -158,7 +158,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
           errorSchema && {
             ...errorSchema,
             [value]: newErrorSchema,
-          }
+          },
       );
     };
   };
@@ -195,36 +195,40 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
    * @param schema - The schema element to which the new property is being added
    */
   handleAddClick = (schema: S) => () => {
-    if (!schema.additionalProperties) {
+    if (!(schema.additionalProperties || schema.patternProperties)) {
       return;
     }
     const { formData, onChange, registry } = this.props;
     const newFormData = { ...formData } as T;
-
-    let type: RJSFSchema['type'] = undefined;
-    let constValue: RJSFSchema['const'] = undefined;
-    let defaultValue: RJSFSchema['default'] = undefined;
-    if (isObject(schema.additionalProperties)) {
-      type = schema.additionalProperties.type;
-      constValue = schema.additionalProperties.const;
-      defaultValue = schema.additionalProperties.default;
-      let apSchema = schema.additionalProperties;
-      if (REF_KEY in apSchema) {
-        const { schemaUtils } = registry;
-        apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[REF_KEY] } as S, formData);
-        type = apSchema.type;
-        constValue = apSchema.const;
-        defaultValue = apSchema.default;
-      }
-      if (!type && (ANY_OF_KEY in apSchema || ONE_OF_KEY in apSchema)) {
-        type = 'object';
+    const newKey = this.getAvailableKey('newKey', newFormData);
+    if (schema.patternProperties) {
+      // Cast this to make the `set` work properly
+      set(newFormData as GenericObjectType, newKey, null);
+    } else {
+      let type: RJSFSchema['type'] = undefined;
+      let constValue: RJSFSchema['const'] = undefined;
+      let defaultValue: RJSFSchema['default'] = undefined;
+      if (isObject(schema.additionalProperties)) {
+        type = schema.additionalProperties.type;
+        constValue = schema.additionalProperties.const;
+        defaultValue = schema.additionalProperties.default;
+        let apSchema = schema.additionalProperties;
+        if (REF_KEY in apSchema) {
+          const { schemaUtils } = registry;
+          apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[REF_KEY] } as S, formData);
+          type = apSchema.type;
+          constValue = apSchema.const;
+          defaultValue = apSchema.default;
+        }
+        if (!type && (ANY_OF_KEY in apSchema || ONE_OF_KEY in apSchema)) {
+          type = 'object';
+        }
       }
-    }
 
-    const newKey = this.getAvailableKey('newKey', newFormData);
-    const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
-    // Cast this to make the `set` work properly
-    set(newFormData as GenericObjectType, newKey, newValue);
+      const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
+      // Cast this to make the `set` work properly
+      set(newFormData as GenericObjectType, newKey, newValue);
+    }
 
     onChange(newFormData);
   };
@@ -266,7 +270,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
     } catch (err) {
       return (
         <div>
-          <p className='config-error' style={{ color: 'red' }}>
+          <p className='rjsf-config-error' style={{ color: 'red' }}>
             <Markdown options={{ disableParsingRawHTML: true }}>
               {translateString(TranslatableString.InvalidObjectField, [name || 'root', (err as Error).message])}
             </Markdown>
@@ -294,7 +298,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
               key={name}
               name={name}
               required={this.isRequired(name)}
-              schema={get(schema, [PROPERTIES_KEY, name], {})}
+              schema={get(schema, [PROPERTIES_KEY, name], {}) as S}
               uiSchema={fieldUiSchema}
               errorSchema={get(errorSchema, name)}
               idSchema={fieldIdSchema}

package/src/components/fields/SchemaField.tsx

@@ -1,4 +1,4 @@
-import { useCallback, Component } from 'react';
+import { useCallback, Component, ComponentType } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   deepEquals,
@@ -49,15 +49,15 @@ function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   schema: S,
   uiOptions: UIOptionsType<T, S, F>,
   idSchema: IdSchema<T>,
-  registry: Registry<T, S, F>
-) {
+  registry: Registry<T, S, F>,
+): ComponentType<FieldProps<T, S, F>> {
   const field = uiOptions.field;
   const { fields, translateString } = registry;
   if (typeof field === 'function') {
     return field;
   }
   if (typeof field === 'string' && field in fields) {
-    return fields[field];
+    return fields[field] as ComponentType<FieldProps<T, S, F>>;
   }
 
   const schemaType = getSchemaType(schema);
@@ -82,7 +82,7 @@ function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
         const UnsupportedFieldTemplate = getTemplate<'UnsupportedFieldTemplate', T, S, F>(
           'UnsupportedFieldTemplate',
           registry,
-          uiOptions
+          uiOptions,
         );
 
         return (
@@ -103,7 +103,7 @@ function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
  * @param props - The `FieldProps` for this component
  */
 function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: FieldProps<T, S, F>
+  props: FieldProps<T, S, F>,
 ) {
   const {
     schema: _schema,
@@ -127,7 +127,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   const FieldHelpTemplate = getTemplate<'FieldHelpTemplate', T, S, F>('FieldHelpTemplate', registry, uiOptions);
   const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, uiOptions);
@@ -135,7 +135,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const fieldId = _idSchema[ID_KEY];
   const idSchema = mergeObjects(
     schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator),
-    _idSchema
+    _idSchema,
   ) as IdSchema<T>;
 
   /** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
@@ -146,7 +146,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
       const theId = id || fieldId;
       return onChange(formData, newErrorSchema, theId);
     },
-    [fieldId, onChange]
+    [fieldId, onChange],
   );
 
   const FieldComponent = getFieldComponent<T, S, F>(schema, uiOptions, idSchema, registry);
@@ -180,7 +180,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
       readonly={readonly}
       hideError={hideError}
       autofocus={autofocus}
-      errorSchema={fieldErrorSchema}
+      errorSchema={fieldErrorSchema as ErrorSchema}
       formContext={formContext}
       rawErrors={__errors}
     />
@@ -209,17 +209,9 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const help = uiOptions.help;
   const hidden = uiOptions.widget === 'hidden';
 
-  const classNames = ['form-group', 'field', `field-${getSchemaType(schema)}`];
+  const classNames = ['rjsf-field', `rjsf-field-${getSchemaType(schema)}`];
   if (!hideError && __errors && __errors.length > 0) {
-    classNames.push('field-error has-error has-danger');
-  }
-  if (uiSchema?.classNames) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn(
-        "'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead."
-      );
-    }
-    classNames.push(uiSchema.classNames);
+    classNames.push('rjsf-field-error');
   }
   if (uiOptions.classNames) {
     classNames.push(uiOptions.classNames);
@@ -314,7 +306,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
             onChange={props.onChange}
             onFocus={props.onFocus}
             options={schema.anyOf.map((_schema) =>
-              schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData)
+              schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData),
             )}
             registry={registry}
             required={required}
@@ -338,7 +330,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
             onChange={props.onChange}
             onFocus={props.onFocus}
             options={schema.oneOf.map((_schema) =>
-              schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData)
+              schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData),
             )}
             registry={registry}
             required={required}

package/src/components/fields/StringField.tsx

@@ -14,7 +14,7 @@ import {
  * @param props - The `FieldProps` for this template
  */
 function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: FieldProps<T, S, F>
+  props: FieldProps<T, S, F>,
 ) {
   const {
     schema,
@@ -35,7 +35,7 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   } = props;
   const { title, format } = schema;
   const { widgets, formContext, schemaUtils, globalUiOptions } = registry;
-  const enumOptions = schemaUtils.isSelect(schema) ? optionsList<S, T, F>(schema, uiSchema) : undefined;
+  const enumOptions = schemaUtils.isSelect(schema) ? optionsList<T, S, F>(schema, uiSchema) : undefined;
   let defaultWidget = enumOptions ? 'select' : 'text';
   if (format && hasWidget<T, S, F>(schema, format, widgets)) {
     defaultWidget = format;

package/src/components/fields/index.ts

@@ -2,6 +2,9 @@ import { Field, FormContextType, RegistryFieldsType, RJSFSchema, StrictRJSFSchem
 
 import ArrayField from './ArrayField';
 import BooleanField from './BooleanField';
+import LayoutGridField from './LayoutGridField';
+import LayoutHeaderField from './LayoutHeaderField';
+import LayoutMultiSchemaField from './LayoutMultiSchemaField';
 import MultiSchemaField from './MultiSchemaField';
 import NumberField from './NumberField';
 import ObjectField from './ObjectField';
@@ -12,13 +15,16 @@ import NullField from './NullField';
 function fields<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): RegistryFieldsType<T, S, F> {
   return {
     AnyOfField: MultiSchemaField,
     ArrayField: ArrayField as unknown as Field<T, S, F>,
     // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
     BooleanField,
+    LayoutGridField,
+    LayoutHeaderField,
+    LayoutMultiSchemaField,
     NumberField,
     ObjectField,
     OneOfField: MultiSchemaField,

package/src/components/templates/ArrayFieldDescriptionTemplate.tsx

@@ -16,7 +16,7 @@ import {
 export default function ArrayFieldDescriptionTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: ArrayFieldDescriptionProps<T, S, F>) {
   const { idSchema, description, registry, schema, uiSchema } = props;
   const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
@@ -27,7 +27,7 @@ export default function ArrayFieldDescriptionTemplate<
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
-    options
+    options,
   );
   return (
     <DescriptionFieldTemplate

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}
+        />
+      )}
+    </>
+  );
+}