@rjsf/core 6.0.0-beta.9 → 6.0.0

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<T>(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,12 @@
 import { useCallback, Component, ComponentType } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
-  deepEquals,
+  ANY_OF_KEY,
   descriptionId,
   ErrorSchema,
+  Field,
+  FieldPathId,
+  FieldPathList,
   FieldProps,
   FieldTemplateProps,
   FormContextType,
@@ -11,12 +14,14 @@ import {
   getTemplate,
   getUiOptions,
   ID_KEY,
-  IdSchema,
-  mergeObjects,
+  isFormDataAvailable,
+  ONE_OF_KEY,
   Registry,
   RJSFSchema,
+  shouldRender,
+  shouldRenderOptionalField,
   StrictRJSFSchema,
-  TranslatableString,
+  toFieldPathId,
   UI_OPTIONS_KEY,
   UIOptionsType,
 } from '@rjsf/utils';
@@ -40,18 +45,16 @@ 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 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>,
   registry: Registry<T, S, F>,
 ): ComponentType<FieldProps<T, S, F>> {
   const field = uiOptions.field;
-  const { fields, translateString } = registry;
+  const { fields } = registry;
   if (typeof field === 'function') {
     return field;
   }
@@ -75,24 +78,7 @@ function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     return () => null;
   }
 
-  return componentName in fields
-    ? fields[componentName]
-    : () => {
-        const UnsupportedFieldTemplate = getTemplate<'UnsupportedFieldTemplate', T, S, F>(
-          'UnsupportedFieldTemplate',
-          registry,
-          uiOptions,
-        );
-
-        return (
-          <UnsupportedFieldTemplate
-            schema={schema}
-            idSchema={idSchema}
-            reason={translateString(TranslatableString.UnknownFieldType, [String(schema.type)])}
-            registry={registry}
-          />
-        );
-      };
+  return componentName in fields ? fields[componentName] : fields['FallbackField'];
 }
 
 /** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
@@ -106,21 +92,21 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
 ) {
   const {
     schema: _schema,
-    idSchema: _idSchema,
+    fieldPathId,
     uiSchema,
     formData,
     errorSchema,
-    idPrefix,
-    idSeparator,
     name,
     onChange,
-    onKeyChange,
-    onDropPropertyClick,
-    required,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
+    required = false,
     registry,
     wasPropertyKeyModified = false,
   } = props;
-  const { formContext, schemaUtils, globalUiOptions } = registry;
+  const { schemaUtils, globalFormOptions, globalUiOptions, fields } = registry;
+  const { AnyOfField: _AnyOfField, OneOfField: _OneOfField } = fields;
   const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
   const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, uiOptions);
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
@@ -131,24 +117,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, registry);
   const disabled = Boolean(uiOptions.disabled ?? props.disabled);
   const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
   const uiSchemaHideError = uiOptions.hideError;
@@ -159,7 +141,40 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     return null;
   }
 
-  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+  let displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+
+  /** If the schema `anyOf` or 'oneOf' can be rendered as a select control, don't render the selection and let
+   * `StringField` component handle rendering unless there is a field override and that field replaces the any or one of
+   */
+  const isReplacingAnyOrOneOf = uiOptions.field && uiOptions.fieldReplacesAnyOrOneOf === true;
+  let XxxOfField: Field<T, S, F> | undefined;
+  let XxxOfOptions: S[] | undefined;
+  // When rendering the `XxxOfField` we'll need to change the fieldPathId of the main component, remembering the
+  // fieldPathId of the children for the ObjectField and ArrayField
+  let fieldPathIdProps: { fieldPathId: FieldPathId; childFieldPathId?: FieldPathId } = { fieldPathId };
+  if ((ANY_OF_KEY in schema || ONE_OF_KEY in schema) && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema)) {
+    if (schema[ANY_OF_KEY]) {
+      XxxOfField = _AnyOfField;
+      XxxOfOptions = schema[ANY_OF_KEY].map((_schema) =>
+        schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData),
+      );
+    } else if (schema[ONE_OF_KEY]) {
+      XxxOfField = _OneOfField;
+      XxxOfOptions = schema[ONE_OF_KEY].map((_schema) =>
+        schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData),
+      );
+    }
+    // When the anyOf/oneOf is an optional data control render AND it does not have form data, hide the label
+    const isOptionalRender = shouldRenderOptionalField<T, S, F>(registry, schema, required, uiSchema);
+    const hasFormData = isFormDataAvailable<T>(formData);
+    displayLabel = displayLabel && (!isOptionalRender || hasFormData);
+    fieldPathIdProps = {
+      childFieldPathId: fieldPathId,
+      // The main FieldComponent will add `XxxOf` onto the fieldPathId to avoid duplication with the rendering of the
+      // same FieldComponent by the `XxxOfField`
+      fieldPathId: toFieldPathId('XxxOf', globalFormOptions, fieldPathId),
+    };
+  }
 
   const { __errors, ...fieldErrorSchema } = errorSchema || {};
   // See #439: uiSchema: Don't pass consumed class names or style to child components
@@ -172,7 +187,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     <FieldComponent
       {...props}
       onChange={handleFieldComponentChange}
-      idSchema={idSchema}
+      {...fieldPathIdProps}
       schema={schema}
       uiSchema={fieldUiSchema}
       disabled={disabled}
@@ -180,12 +195,11 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
       hideError={hideError}
       autofocus={autofocus}
       errorSchema={fieldErrorSchema as ErrorSchema}
-      formContext={formContext}
       rawErrors={__errors}
     />
   );
 
-  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 +227,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}
@@ -225,11 +239,11 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    * unless it can be rendered as select control
    */
   const errorsComponent =
-    hideError || ((schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema)) ? undefined : (
+    hideError || (XxxOfField && !schemaUtils.isSelect(schema)) ? undefined : (
       <FieldErrorTemplate
         errors={__errors}
         errorSchema={errorSchema}
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}
@@ -238,7 +252,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}
@@ -254,8 +268,9 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     label,
     hidden,
     onChange,
-    onKeyChange,
-    onDropPropertyClick,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     required,
     disabled,
     readonly,
@@ -263,68 +278,29 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     displayLabel,
     classNames: classNames.join(' ').trim(),
     style: uiOptions.style,
-    formContext,
     formData,
     schema,
     uiSchema,
     registry,
   };
 
-  const _AnyOfField = registry.fields.AnyOfField;
-  const _OneOfField = registry.fields.OneOfField;
-  const isReplacingAnyOrOneOf = uiSchema?.['ui:field'] && uiSchema?.['ui:fieldReplacesAnyOrOneOf'] === true;
-
   return (
     <FieldTemplate {...fieldProps}>
       <>
         {field}
-        {/*
-        If the schema `anyOf` or 'oneOf' can be rendered as a select control, don't
-        render the selection and let `StringField` component handle
-        rendering
-      */}
-        {schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && (
-          <_AnyOfField
+        {XxxOfField && (
+          <XxxOfField
             name={name}
             disabled={disabled}
             readonly={readonly}
             hideError={hideError}
             errorSchema={errorSchema}
             formData={formData}
-            formContext={formContext}
-            idPrefix={idPrefix}
-            idSchema={idSchema}
-            idSeparator={idSeparator}
+            fieldPathId={fieldPathId}
             onBlur={props.onBlur}
             onChange={props.onChange}
             onFocus={props.onFocus}
-            options={schema.anyOf.map((_schema) =>
-              schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData),
-            )}
-            registry={registry}
-            required={required}
-            schema={schema}
-            uiSchema={uiSchema}
-          />
-        )}
-        {schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && (
-          <_OneOfField
-            name={name}
-            disabled={disabled}
-            readonly={readonly}
-            hideError={hideError}
-            errorSchema={errorSchema}
-            formData={formData}
-            formContext={formContext}
-            idPrefix={idPrefix}
-            idSchema={idSchema}
-            idSeparator={idSeparator}
-            onBlur={props.onBlur}
-            onChange={props.onChange}
-            onFocus={props.onFocus}
-            options={schema.oneOf.map((_schema) =>
-              schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData),
-            )}
+            options={XxxOfOptions}
             registry={registry}
             required={required}
             schema={schema}
@@ -343,7 +319,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,
@@ -34,7 +36,7 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
     hideError,
   } = props;
   const { title, format } = schema;
-  const { widgets, formContext, schemaUtils, globalUiOptions } = registry;
+  const { widgets, schemaUtils, globalUiOptions } = registry;
   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)) {
@@ -44,28 +46,35 @@ 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}
       disabled={disabled}
       readonly={readonly}
-      formContext={formContext}
       autofocus={autofocus}
       registry={registry}
       placeholder={placeholder}
       rawErrors={rawErrors}
+      htmlName={fieldPathId.name}
     />
   );
 }

package/src/components/fields/index.ts

@@ -2,12 +2,14 @@ import { Field, FormContextType, RegistryFieldsType, RJSFSchema, StrictRJSFSchem
 
 import ArrayField from './ArrayField';
 import BooleanField from './BooleanField';
+import FallbackField from './FallbackField';
 import LayoutGridField from './LayoutGridField';
 import LayoutHeaderField from './LayoutHeaderField';
 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';
@@ -22,12 +24,14 @@ function fields<
     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,
+    FallbackField,
     LayoutGridField,
     LayoutHeaderField,
     LayoutMultiSchemaField,
     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

@@ -1,6 +1,5 @@
-import { useMemo } from 'react';
 import {
-  ArrayFieldItemButtonsTemplateType,
+  ArrayFieldItemButtonsTemplateProps,
   buttonId,
   FormContextType,
   RJSFSchema,
@@ -10,72 +9,68 @@ import {
 /** 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
+ * @param props - The `ArrayFieldItemButtonsTemplateProps` props for the component
  */
 export default function ArrayFieldItemButtonsTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->(props: ArrayFieldItemButtonsTemplateType<T, S, F>) {
+>(props: ArrayFieldItemButtonsTemplateProps<T, S, F>) {
   const {
     disabled,
     hasCopy,
     hasMoveDown,
     hasMoveUp,
     hasRemove,
-    idSchema,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
+    fieldPathId,
+    onCopyItem,
+    onRemoveItem,
+    onMoveDownItem,
+    onMoveUpItem,
     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')}
+          id={buttonId(fieldPathId, 'moveUp')}
           className='rjsf-array-item-move-up'
           disabled={disabled || readonly || !hasMoveUp}
-          onClick={onArrowUpClick}
+          onClick={onMoveUpItem}
           uiSchema={uiSchema}
           registry={registry}
         />
       )}
       {(hasMoveUp || hasMoveDown) && (
         <MoveDownButton
-          id={buttonId<T>(idSchema, 'moveDown')}
+          id={buttonId(fieldPathId, 'moveDown')}
           className='rjsf-array-item-move-down'
           disabled={disabled || readonly || !hasMoveDown}
-          onClick={onArrowDownClick}
+          onClick={onMoveDownItem}
           uiSchema={uiSchema}
           registry={registry}
         />
       )}
       {hasCopy && (
         <CopyButton
-          id={buttonId<T>(idSchema, 'copy')}
+          id={buttonId(fieldPathId, 'copy')}
           className='rjsf-array-item-copy'
           disabled={disabled || readonly}
-          onClick={onCopyClick}
+          onClick={onCopyItem}
           uiSchema={uiSchema}
           registry={registry}
         />
       )}
       {hasRemove && (
         <RemoveButton
-          id={buttonId<T>(idSchema, 'remove')}
+          id={buttonId(fieldPathId, 'remove')}
           className='rjsf-array-item-remove'
           disabled={disabled || readonly}
-          onClick={onRemoveClick}
+          onClick={onRemoveItem}
           uiSchema={uiSchema}
           registry={registry}
         />

package/src/components/templates/ArrayFieldItemTemplate.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import {
-  ArrayFieldItemTemplateType,
+  ArrayFieldItemTemplateProps,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -10,13 +10,13 @@ import {
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
- * @param props - The `ArrayFieldItemTemplateType` props for the component
+ * @param props - The `ArrayFieldItemTemplateProps` props for the component
  */
 export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->(props: ArrayFieldItemTemplateType<T, S, F>) {
+>(props: ArrayFieldItemTemplateProps<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>(