@rjsf/core 6.0.0-beta.2 → 6.0.0-beta.21

package/src/components/fields/ObjectField.tsx

@@ -3,11 +3,13 @@ import {
   getTemplate,
   getUiOptions,
   orderProperties,
+  shouldRenderOptionalField,
+  toFieldPathId,
   ErrorSchema,
+  FieldPathList,
   FieldProps,
   FormContextType,
   GenericObjectType,
-  IdSchema,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
@@ -16,6 +18,7 @@ import {
   REF_KEY,
   ANY_OF_KEY,
   ONE_OF_KEY,
+  isFormDataAvailable,
 } from '@rjsf/utils';
 import Markdown from 'markdown-to-jsx';
 import get from 'lodash/get';
@@ -66,8 +69,8 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
    * @returns - The onPropertyChange callback for the `name` property
    */
   onPropertyChange = (name: string, addedByAdditionalProperties = false) => {
-    return (value: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => {
-      const { formData, onChange, errorSchema } = this.props;
+    return (value: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
+      const { onChange } = this.props;
       if (value === undefined && addedByAdditionalProperties) {
         // Don't set value = undefined for fields added by
         // additionalProperties. Doing so removes them from the
@@ -78,16 +81,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
         // set empty values to the empty string.
         value = '' as unknown as T;
       }
-      const newFormData = { ...formData, [name]: value } as unknown as T;
-      onChange(
-        newFormData,
-        errorSchema &&
-          errorSchema && {
-            ...errorSchema,
-            [name]: newErrorSchema,
-          },
-        id,
-      );
+      onChange(value, path, newErrorSchema, id);
     };
   };
 
@@ -100,10 +94,11 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
   onDropPropertyClick = (key: string) => {
     return (event: DragEvent) => {
       event.preventDefault();
-      const { onChange, formData } = this.props;
+      const { onChange, formData, fieldPathId } = this.props;
       const copiedFormData = { ...formData } as T;
       unset(copiedFormData, key);
-      onChange(copiedFormData);
+      // drop property will pass the name in `path` array
+      onChange(copiedFormData, fieldPathId.path);
     };
   };
 
@@ -133,11 +128,11 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
    * @returns - The key change callback function
    */
   onKeyChange = (oldValue: any) => {
-    return (value: any, newErrorSchema: ErrorSchema<T>) => {
+    return (value: any) => {
       if (oldValue === value) {
         return;
       }
-      const { formData, onChange, errorSchema } = this.props;
+      const { formData, onChange, fieldPathId } = this.props;
 
       value = this.getAvailableKey(value, formData);
       const newFormData: GenericObjectType = {
@@ -152,14 +147,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
 
       this.setState({ wasPropertyKeyModified: true });
 
-      onChange(
-        renamedObj,
-        errorSchema &&
-          errorSchema && {
-            ...errorSchema,
-            [value]: newErrorSchema,
-          },
-      );
+      onChange(renamedObj, fieldPathId.path);
     };
   };
 
@@ -198,7 +186,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
     if (!(schema.additionalProperties || schema.patternProperties)) {
       return;
     }
-    const { formData, onChange, registry } = this.props;
+    const { formData, onChange, registry, fieldPathId } = this.props;
     const newFormData = { ...formData } as T;
     const newKey = this.getAvailableKey('newKey', newFormData);
     if (schema.patternProperties) {
@@ -230,7 +218,8 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
       set(newFormData as GenericObjectType, newKey, newValue);
     }
 
-    onChange(newFormData);
+    // add will pass the name in `path` array
+    onChange(newFormData, fieldPathId.path);
   };
 
   /** Renders the `ObjectField` from the given props
@@ -241,46 +230,51 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
       uiSchema = {},
       formData,
       errorSchema,
-      idSchema,
+      fieldPathId,
       name,
       required = false,
       disabled,
       readonly,
       hideError,
-      idPrefix,
-      idSeparator,
       onBlur,
       onFocus,
       registry,
       title,
     } = this.props;
 
-    const { fields, formContext, schemaUtils, translateString, globalUiOptions } = registry;
-    const { SchemaField } = fields;
-    const schema: S = schemaUtils.retrieveSchema(rawSchema, formData);
+    const { fields, formContext, schemaUtils, translateString, globalFormOptions, globalUiOptions } = registry;
+    const { OptionalDataControlsField, SchemaField } = fields;
+    const schema: S = schemaUtils.retrieveSchema(rawSchema, formData, true);
     const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
     const { properties: schemaProperties = {} } = schema;
 
     const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
     const description = uiOptions.description ?? schema.description;
-    let orderedProperties: string[];
-    try {
-      const properties = Object.keys(schemaProperties);
-      orderedProperties = orderProperties(properties, uiOptions.order);
-    } catch (err) {
-      return (
-        <div>
-          <p className='rjsf-config-error' style={{ color: 'red' }}>
-            <Markdown options={{ disableParsingRawHTML: true }}>
-              {translateString(TranslatableString.InvalidObjectField, [name || 'root', (err as Error).message])}
-            </Markdown>
-          </p>
-          <pre>{JSON.stringify(schema)}</pre>
-        </div>
-      );
+    const renderOptionalField = shouldRenderOptionalField(registry, schema, required, uiSchema);
+    const hasFormData = isFormDataAvailable(formData);
+    let orderedProperties: string[] = [];
+    if (!renderOptionalField || hasFormData) {
+      try {
+        const properties = Object.keys(schemaProperties);
+        orderedProperties = orderProperties(properties, uiOptions.order);
+      } catch (err) {
+        return (
+          <div>
+            <p className='rjsf-config-error' style={{ color: 'red' }}>
+              <Markdown options={{ disableParsingRawHTML: true }}>
+                {translateString(TranslatableString.InvalidObjectField, [name || 'root', (err as Error).message])}
+              </Markdown>
+            </p>
+            <pre>{JSON.stringify(schema)}</pre>
+          </div>
+        );
+      }
     }
 
     const Template = getTemplate<'ObjectFieldTemplate', T, S, F>('ObjectFieldTemplate', registry, uiOptions);
+    const optionalDataControl = renderOptionalField ? (
+      <OptionalDataControlsField {...this.props} schema={schema} />
+    ) : undefined;
 
     const templateProps = {
       // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
@@ -290,7 +284,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
         const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
         const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
         const hidden = getUiOptions<T, S, F>(fieldUiSchema).widget === 'hidden';
-        const fieldIdSchema: IdSchema<T> = get(idSchema, [name], {});
+        const innerFieldIdPathId = toFieldPathId(name, globalFormOptions, fieldPathId);
 
         return {
           content: (
@@ -301,9 +295,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
               schema={get(schema, [PROPERTIES_KEY, name], {}) as S}
               uiSchema={fieldUiSchema}
               errorSchema={get(errorSchema, name)}
-              idSchema={fieldIdSchema}
-              idPrefix={idPrefix}
-              idSeparator={idSeparator}
+              fieldPathId={innerFieldIdPathId}
               formData={get(formData, name)}
               formContext={formContext}
               wasPropertyKeyModified={this.state.wasPropertyKeyModified}
@@ -328,13 +320,15 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
       readonly,
       disabled,
       required,
-      idSchema,
+      fieldPathId,
       uiSchema,
       errorSchema,
       schema,
       formData,
       formContext,
       registry,
+      optionalDataControl,
+      className: renderOptionalField ? 'rjsf-optional-object-field' : undefined,
     };
     return <Template {...templateProps} onAddClick={this.handleAddClick} />;
   }

package/src/components/fields/OptionalDataControlsField.tsx

@@ -0,0 +1,84 @@
+import {
+  FieldProps,
+  FormContextType,
+  getSchemaType,
+  getTemplate,
+  getUiOptions,
+  isFormDataAvailable,
+  optionalControlsId,
+  OptionalDataControlsTemplateProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+} from '@rjsf/utils';
+
+/** The `OptionalDataControlsField` component is used to render the optional data controls for the field associated
+ * with the given props.
+ *
+ * @param props - The `FieldProps` for this template
+ */
+export default function OptionalDataControlsField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: FieldProps<T, S, F>) {
+  const {
+    schema,
+    uiSchema = {},
+    formData,
+    disabled = false,
+    readonly = false,
+    onChange,
+    errorSchema,
+    fieldPathId,
+    registry,
+  } = props;
+
+  const { globalUiOptions = {}, schemaUtils, translateString } = registry;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+  const OptionalDataControlsTemplate = getTemplate<'OptionalDataControlsTemplate', T, S, F>(
+    'OptionalDataControlsTemplate',
+    registry,
+    uiOptions,
+  );
+  const hasFormData = isFormDataAvailable(formData);
+  let id: string;
+  let label: string | undefined;
+  let onAddClick: OptionalDataControlsTemplateProps['onAddClick'];
+  let onRemoveClick: OptionalDataControlsTemplateProps['onRemoveClick'];
+  if (disabled || readonly) {
+    id = optionalControlsId(fieldPathId, 'Msg');
+    label = hasFormData ? undefined : translateString(TranslatableString.OptionalObjectEmptyMsg);
+  } else {
+    const labelEnum = hasFormData ? TranslatableString.OptionalObjectRemove : TranslatableString.OptionalObjectAdd;
+    label = translateString(labelEnum);
+    if (hasFormData) {
+      id = optionalControlsId(fieldPathId, 'Remove');
+      onRemoveClick = () => onChange(undefined as T, fieldPathId.path, errorSchema);
+    } else {
+      id = optionalControlsId(fieldPathId, 'Add');
+      onAddClick = () => {
+        // If it has form data, store an empty object, otherwise get the default form state and use it
+        let newFormData: unknown = schemaUtils.getDefaultFormState(schema, formData, 'excludeObjectChildren');
+        if (newFormData === undefined) {
+          // If new form data ended up being undefined, and we have pushed the add button we need to actually add data
+          newFormData = getSchemaType<S>(schema) === 'array' ? [] : {};
+        }
+        onChange(newFormData as T, fieldPathId.path, errorSchema);
+      };
+    }
+  }
+  return (
+    label && (
+      <OptionalDataControlsTemplate
+        id={id}
+        registry={registry}
+        schema={schema}
+        uiSchema={uiSchema}
+        label={label}
+        onAddClick={onAddClick}
+        onRemoveClick={onRemoveClick}
+      />
+    )
+  );
+}

package/src/components/fields/SchemaField.tsx

@@ -1,9 +1,10 @@
 import { useCallback, Component, ComponentType } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
-  deepEquals,
   descriptionId,
   ErrorSchema,
+  FieldPathId,
+  FieldPathList,
   FieldProps,
   FieldTemplateProps,
   FormContextType,
@@ -11,10 +12,9 @@ import {
   getTemplate,
   getUiOptions,
   ID_KEY,
-  IdSchema,
-  mergeObjects,
   Registry,
   RJSFSchema,
+  shouldRender,
   StrictRJSFSchema,
   TranslatableString,
   UI_OPTIONS_KEY,
@@ -40,14 +40,14 @@ const COMPONENT_TYPES: { [key: string]: string } = {
  *
  * @param schema - The schema from which to obtain the type
  * @param uiOptions - The UI Options that may affect the component decision
- * @param idSchema - The id that is passed to the `UnsupportedFieldTemplate`
+ * @param fieldPathId - The id that is passed to the `UnsupportedFieldTemplate`
  * @param registry - The registry from which fields and templates are obtained
  * @returns - The `Field` component that is used to render the actual field data
  */
 function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   schema: S,
   uiOptions: UIOptionsType<T, S, F>,
-  idSchema: IdSchema<T>,
+  fieldPathId: FieldPathId,
   registry: Registry<T, S, F>,
 ): ComponentType<FieldProps<T, S, F>> {
   const field = uiOptions.field;
@@ -87,7 +87,7 @@ function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
         return (
           <UnsupportedFieldTemplate
             schema={schema}
-            idSchema={idSchema}
+            fieldPathId={fieldPathId}
             reason={translateString(TranslatableString.UnknownFieldType, [String(schema.type)])}
             registry={registry}
           />
@@ -106,12 +106,10 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
 ) {
   const {
     schema: _schema,
-    idSchema: _idSchema,
+    fieldPathId,
     uiSchema,
     formData,
     errorSchema,
-    idPrefix,
-    idSeparator,
     name,
     onChange,
     onKeyChange,
@@ -131,24 +129,20 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const FieldHelpTemplate = getTemplate<'FieldHelpTemplate', T, S, F>('FieldHelpTemplate', registry, uiOptions);
   const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, uiOptions);
   const schema = schemaUtils.retrieveSchema(_schema, formData);
-  const fieldId = _idSchema[ID_KEY];
-  const idSchema = mergeObjects(
-    schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator),
-    _idSchema,
-  ) as IdSchema<T>;
+  const fieldId = fieldPathId[ID_KEY];
 
   /** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
    * `onChange` chain if it is not already being provided from a deeper level in the hierarchy
    */
   const handleFieldComponentChange = useCallback(
-    (formData: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => {
+    (formData: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
       const theId = id || fieldId;
-      return onChange(formData, newErrorSchema, theId);
+      return onChange(formData, path, newErrorSchema, theId);
     },
     [fieldId, onChange],
   );
 
-  const FieldComponent = getFieldComponent<T, S, F>(schema, uiOptions, idSchema, registry);
+  const FieldComponent = getFieldComponent<T, S, F>(schema, uiOptions, fieldPathId, registry);
   const disabled = Boolean(uiOptions.disabled ?? props.disabled);
   const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
   const uiSchemaHideError = uiOptions.hideError;
@@ -172,7 +166,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     <FieldComponent
       {...props}
       onChange={handleFieldComponentChange}
-      idSchema={idSchema}
+      fieldPathId={fieldPathId}
       schema={schema}
       uiSchema={fieldUiSchema}
       disabled={disabled}
@@ -185,7 +179,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     />
   );
 
-  const id = idSchema[ID_KEY];
+  const id = fieldPathId[ID_KEY];
 
   // If this schema has a title defined, but the user has set a new key/label, retain their input.
   let label;
@@ -213,7 +207,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const helpComponent = (
     <FieldHelpTemplate
       help={help}
-      idSchema={idSchema}
+      fieldPathId={fieldPathId}
       schema={schema}
       uiSchema={uiSchema}
       hasErrors={!hideError && __errors && __errors.length > 0}
@@ -229,7 +223,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
       <FieldErrorTemplate
         errors={__errors}
         errorSchema={errorSchema}
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}
@@ -238,7 +232,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const fieldProps: Omit<FieldTemplateProps<T, S, F>, 'children'> = {
     description: (
       <DescriptionFieldTemplate
-        id={descriptionId<T>(id)}
+        id={descriptionId(id)}
         description={description}
         schema={schema}
         uiSchema={uiSchema}
@@ -263,7 +257,6 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     displayLabel,
     classNames: classNames.join(' ').trim(),
     style: uiOptions.style,
-    formContext,
     formData,
     schema,
     uiSchema,
@@ -292,9 +285,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
             errorSchema={errorSchema}
             formData={formData}
             formContext={formContext}
-            idPrefix={idPrefix}
-            idSchema={idSchema}
-            idSeparator={idSeparator}
+            fieldPathId={fieldPathId}
             onBlur={props.onBlur}
             onChange={props.onChange}
             onFocus={props.onFocus}
@@ -316,9 +307,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
             errorSchema={errorSchema}
             formData={formData}
             formContext={formContext}
-            idPrefix={idPrefix}
-            idSchema={idSchema}
-            idSeparator={idSeparator}
+            fieldPathId={fieldPathId}
             onBlur={props.onBlur}
             onChange={props.onChange}
             onFocus={props.onFocus}
@@ -343,7 +332,12 @@ class SchemaField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
   FieldProps<T, S, F>
 > {
   shouldComponentUpdate(nextProps: Readonly<FieldProps<T, S, F>>) {
-    return !deepEquals(this.props, nextProps);
+    const {
+      registry: { globalFormOptions },
+    } = this.props;
+    const { experimental_componentUpdateStrategy = 'customDeep' } = globalFormOptions;
+
+    return shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
   }
 
   render() {

package/src/components/fields/StringField.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import {
   getWidget,
   getUiOptions,
@@ -7,6 +8,7 @@ import {
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
+  ErrorSchema,
 } from '@rjsf/utils';
 
 /** The `StringField` component is used to render a schema field that represents a string type
@@ -20,7 +22,7 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
     schema,
     name,
     uiSchema,
-    idSchema,
+    fieldPathId,
     formData,
     required,
     disabled = false,
@@ -44,18 +46,25 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
   const label = uiTitle ?? title ?? name;
   const Widget = getWidget<T, S, F>(schema, widget, widgets);
+  const onWidgetChange = useCallback(
+    (value: T | undefined, errorSchema?: ErrorSchema, id?: string) => {
+      // String field change passes an empty path array to the parent field which adds the appropriate path
+      return onChange(value, fieldPathId.path, errorSchema, id);
+    },
+    [onChange, fieldPathId],
+  );
   return (
     <Widget
       options={{ ...options, enumOptions }}
       schema={schema}
       uiSchema={uiSchema}
-      id={idSchema.$id}
+      id={fieldPathId.$id}
       name={name}
       label={label}
       hideLabel={!displayLabel}
       hideError={hideError}
       value={formData}
-      onChange={onChange}
+      onChange={onWidgetChange}
       onBlur={onBlur}
       onFocus={onFocus}
       required={required}

package/src/components/fields/index.ts

@@ -8,6 +8,7 @@ import LayoutMultiSchemaField from './LayoutMultiSchemaField';
 import MultiSchemaField from './MultiSchemaField';
 import NumberField from './NumberField';
 import ObjectField from './ObjectField';
+import OptionalDataControlsField from './OptionalDataControlsField';
 import SchemaField from './SchemaField';
 import StringField from './StringField';
 import NullField from './NullField';
@@ -28,6 +29,7 @@ function fields<
     NumberField,
     ObjectField,
     OneOfField: MultiSchemaField,
+    OptionalDataControlsField,
     SchemaField,
     StringField,
     NullField,

package/src/components/templates/ArrayFieldDescriptionTemplate.tsx

@@ -9,7 +9,7 @@ import {
 } from '@rjsf/utils';
 
 /** The `ArrayFieldDescriptionTemplate` component renders a `DescriptionFieldTemplate` with an `id` derived from
- * the `idSchema`.
+ * the `fieldPathId`.
  *
  * @param props - The `ArrayFieldDescriptionProps` for the component
  */
@@ -18,7 +18,7 @@ export default function ArrayFieldDescriptionTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldDescriptionProps<T, S, F>) {
-  const { idSchema, description, registry, schema, uiSchema } = props;
+  const { fieldPathId, description, registry, schema, uiSchema } = props;
   const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
   const { label: displayLabel = true } = options;
   if (!description || !displayLabel) {
@@ -31,7 +31,7 @@ export default function ArrayFieldDescriptionTemplate<
   );
   return (
     <DescriptionFieldTemplate
-      id={descriptionId<T>(idSchema)}
+      id={descriptionId(fieldPathId)}
       description={description}
       schema={schema}
       uiSchema={uiSchema}

package/src/components/templates/ArrayFieldItemButtonsTemplate.tsx

@@ -23,7 +23,7 @@ export default function ArrayFieldItemButtonsTemplate<
     hasMoveDown,
     hasMoveUp,
     hasRemove,
-    idSchema,
+    fieldPathId,
     index,
     onCopyIndexClick,
     onDropIndexClick,
@@ -42,7 +42,7 @@ export default function ArrayFieldItemButtonsTemplate<
     <>
       {(hasMoveUp || hasMoveDown) && (
         <MoveUpButton
-          id={buttonId<T>(idSchema, 'moveUp')}
+          id={buttonId(fieldPathId, 'moveUp')}
           className='rjsf-array-item-move-up'
           disabled={disabled || readonly || !hasMoveUp}
           onClick={onArrowUpClick}
@@ -52,7 +52,7 @@ export default function ArrayFieldItemButtonsTemplate<
       )}
       {(hasMoveUp || hasMoveDown) && (
         <MoveDownButton
-          id={buttonId<T>(idSchema, 'moveDown')}
+          id={buttonId(fieldPathId, 'moveDown')}
           className='rjsf-array-item-move-down'
           disabled={disabled || readonly || !hasMoveDown}
           onClick={onArrowDownClick}
@@ -62,7 +62,7 @@ export default function ArrayFieldItemButtonsTemplate<
       )}
       {hasCopy && (
         <CopyButton
-          id={buttonId<T>(idSchema, 'copy')}
+          id={buttonId(fieldPathId, 'copy')}
           className='rjsf-array-item-copy'
           disabled={disabled || readonly}
           onClick={onCopyClick}
@@ -72,7 +72,7 @@ export default function ArrayFieldItemButtonsTemplate<
       )}
       {hasRemove && (
         <RemoveButton
-          id={buttonId<T>(idSchema, 'remove')}
+          id={buttonId(fieldPathId, 'remove')}
           className='rjsf-array-item-remove'
           disabled={disabled || readonly}
           onClick={onRemoveClick}

package/src/components/templates/ArrayFieldTemplate.tsx

@@ -22,9 +22,10 @@ export default function ArrayFieldTemplate<
     canAdd,
     className,
     disabled,
-    idSchema,
+    fieldPathId,
     uiSchema,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     registry,
@@ -49,26 +50,29 @@ export default function ArrayFieldTemplate<
     uiOptions,
   );
   // Button templates are not overridden in the uiSchema
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton },
   } = registry.templates;
   return (
-    <fieldset className={className} id={idSchema.$id}>
+    <fieldset className={className} id={fieldPathId.$id}>
       <ArrayFieldTitleTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         title={uiOptions.title || title}
         required={required}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}
+        optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
       />
       <ArrayFieldDescriptionTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         description={uiOptions.description || schema.description}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}
       />
+      {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
       <div className='row array-item-list'>
         {items &&
           items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
@@ -77,7 +81,7 @@ export default function ArrayFieldTemplate<
       </div>
       {canAdd && (
         <AddButton
-          id={buttonId<T>(idSchema, 'add')}
+          id={buttonId(fieldPathId, 'add')}
           className='rjsf-array-item-add'
           onClick={onAddClick}
           disabled={disabled || readonly}