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

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@rjsf/core",
-  "version": "6.0.0-alpha.0",
+  "version": "6.0.0-beta.1",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
-    "build:ts": "tsc -b",
+    "compileReplacer": "tsc -p tsconfig.replacer.json && move-file lodashReplacer.js lodashReplacer.cjs",
+    "build:ts": "npm run compileReplacer && rimraf ./lib && tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/index.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/index.esm.js --format=umd --file=dist/core.umd.js --name=JSONSchemaForm",
@@ -14,7 +15,7 @@
     "precommit": "lint-staged",
     "publish-to-npm": "npm run build && npm publish",
     "test": "jest",
-    "test:debug": "node --inspect-brk node_modules/.bin/jest",
+    "test:debug": "node --inspect-brk ../../node_modules/.bin/jest",
     "test:update": "jest --u",
     "test:watch": "jest --watch",
     "test-coverage": "jest --coverage"
@@ -27,6 +28,34 @@
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./lib": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./lib/*.js": {
+      "types": "./lib/*.d.ts",
+      "require": "./dist/*.js",
+      "import": "./lib/*.js"
+    },
+    "./dist": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./dist/*.js": {
+      "types": "./lib/*.d.ts",
+      "require": "./dist/*.js",
+      "import": "./lib/*.js"
+    }
+  },
   "files": [
     "dist",
     "lib",
@@ -34,54 +63,35 @@
   ],
   "engineStrict": false,
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "peerDependencies": {
-    "@rjsf/utils": "^5.20.x",
-    "react": "^16.14.0 || >=17"
+    "@rjsf/utils": "^6.x",
+    "react": ">=18"
   },
   "dependencies": {
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "markdown-to-jsx": "^7.4.1",
-    "nanoid": "^3.3.7",
+    "markdown-to-jsx": "^7.7.6",
+    "nanoid": "^5.1.5",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@rjsf/snapshot-tests": "^6.0.0-alpha.0",
-    "@rjsf/utils": "^6.0.0-alpha.0",
-    "@rjsf/validator-ajv6": "^6.0.0-alpha.0",
-    "@rjsf/validator-ajv8": "^6.0.0-alpha.0",
-    "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.14.202",
-    "@types/react": "^18.2.58",
-    "@types/react-dom": "^18.2.19",
-    "@types/react-test-renderer": "^18.0.7",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.1",
+    "@rjsf/utils": "^6.0.0-beta.1",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "ajv": "^8.12.0",
     "atob": "^2.1.2",
-    "babel-jest": "^29.7.0",
     "chai": "^3.5.0",
-    "esbuild": "^0.18.20",
     "eslint": "^8.56.0",
     "html": "^1.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^20.0.3",
     "mocha": "^10.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-portal": "^4.2.2",
-    "react-test-renderer": "^18.2.0",
-    "rimraf": "^5.0.5",
-    "rollup": "^3.29.4",
-    "sinon": "^9.2.4",
-    "typescript": "^4.9.5"
+    "react-portal": "^4.3.0",
+    "sinon": "^9.2.4"
   },
   "directories": {
     "test": "test"
@@ -103,6 +113,5 @@
   "homepage": "https://github.com/rjsf-team/react-jsonschema-form",
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "f4229bf6e067d31b24de3ef9d3ca754ee52529ac"
+  }
 }

package/src/components/Form.tsx

@@ -7,6 +7,7 @@ import {
   ErrorTransformer,
   FormContextType,
   GenericObjectType,
+  getChangedFields,
   getTemplate,
   getUiOptions,
   IdSchema,
@@ -33,10 +34,14 @@ import {
   validationDataMerge,
   ValidatorType,
   Experimental_DefaultFormStateBehavior,
+  Experimental_CustomMergeAllOf,
+  createErrorHandler,
+  unwrapErrorHandler,
 } from '@rjsf/utils';
 import _forEach from 'lodash/forEach';
 import _get from 'lodash/get';
 import _isEmpty from 'lodash/isEmpty';
+import _isNil from 'lodash/isNil';
 import _pick from 'lodash/pick';
 import _toPath from 'lodash/toPath';
 
@@ -111,11 +116,6 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    * an `onFocus` handler, which will receive the id of the input that is focused and the field value
    */
   onFocus?: (id: string, data: any) => void;
-  // <form /> HTML attributes
-  /** The value of this prop will be passed to the `accept-charset` HTML attribute on the form
-   * @deprecated replaced with `acceptCharset` which will supercede this value if both are specified
-   */
-  acceptcharset?: string;
   /** The value of this prop will be passed to the `accept-charset` HTML attribute on the form */
   acceptCharset?: string;
   /** The value of this prop will be passed to the `action` HTML attribute on the form
@@ -195,6 +195,9 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    * `emptyObjectFields`
    */
   experimental_defaultFormStateBehavior?: Experimental_DefaultFormStateBehavior;
+  /** Optional function that allows for custom merging of `allOf` schemas
+   */
+  experimental_customMergeAllOf?: Experimental_CustomMergeAllOf<S>;
   // Private
   /**
    * _internalFormWrapper is currently used by the semantic-ui theme to provide a custom wrapper around `<Form />`
@@ -261,7 +264,7 @@ export interface IChangeEvent<T = any, S extends StrictRJSFSchema = RJSFSchema,
 export default class Form<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 > extends Component<FormProps<T, S, F>, FormState<T, S, F>> {
   /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
    * provide any possible type here
@@ -308,11 +311,15 @@ export default class Form<
    */
   getSnapshotBeforeUpdate(
     prevProps: FormProps<T, S, F>,
-    prevState: FormState<T, S, F>
+    prevState: FormState<T, S, F>,
   ): { nextState: FormState<T, S, F>; shouldUpdate: true } | { shouldUpdate: false } {
     if (!deepEquals(this.props, prevProps)) {
+      const formDataChangedFields = getChangedFields(this.props.formData, prevProps.formData);
       const isSchemaChanged = !deepEquals(prevProps.schema, this.props.schema);
-      const isFormDataChanged = !deepEquals(prevProps.formData, this.props.formData);
+      // When formData is not an object, getChangedFields returns an empty array.
+      // In this case, deepEquals is most needed to check again.
+      const isFormDataChanged =
+        formDataChangedFields.length > 0 || !deepEquals(prevProps.formData, this.props.formData);
       const nextState = this.getStateFromProps(
         this.props,
         this.props.formData,
@@ -320,7 +327,8 @@ export default class Form<
         // Or if the `formData` changes, for example in the case of a schema with dependencies that need to
         //  match one of the subSchemas, the retrieved schema must be updated.
         isSchemaChanged || isFormDataChanged ? undefined : this.state.retrievedSchema,
-        isSchemaChanged
+        isSchemaChanged,
+        formDataChangedFields,
       );
       const shouldUpdate = !deepEquals(nextState, prevState);
       return { nextState, shouldUpdate };
@@ -336,9 +344,6 @@ export default class Form<
    * If an update is required, it applies the next state and, if needed, triggers the `onChange` handler to inform about
    * changes.
    *
-   * This method effectively replaces the deprecated `UNSAFE_componentWillReceiveProps`, providing a safer alternative
-   * to handle prop changes and state updates.
-   *
    * @param _ - The previous set of props.
    * @param prevState - The previous state of the component before the update.
    * @param snapshot - The value returned from `getSnapshotBeforeUpdate`.
@@ -346,7 +351,7 @@ export default class Form<
   componentDidUpdate(
     _: FormProps<T, S, F>,
     prevState: FormState<T, S, F>,
-    snapshot: { nextState: FormState<T, S, F>; shouldUpdate: true } | { shouldUpdate: false }
+    snapshot: { nextState: FormState<T, S, F>; shouldUpdate: true } | { shouldUpdate: false },
   ) {
     if (snapshot.shouldUpdate) {
       const { nextState } = snapshot;
@@ -370,13 +375,15 @@ export default class Form<
    * @param inputFormData - The new or current data for the `Form`
    * @param retrievedSchema - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`.
    * @param isSchemaChanged - A flag indicating whether the schema has changed.
+   * @param formDataChangedFields - The changed fields of `formData`
    * @returns - The new state for the `Form`
    */
   getStateFromProps(
     props: FormProps<T, S, F>,
     inputFormData?: T,
     retrievedSchema?: S,
-    isSchemaChanged = false
+    isSchemaChanged = false,
+    formDataChangedFields: string[] = [],
   ): FormState<T, S, F> {
     const state: FormState<T, S, F> = this.state || {};
     const schema = 'schema' in props ? props.schema : this.props.schema;
@@ -389,15 +396,31 @@ export default class Form<
       'experimental_defaultFormStateBehavior' in props
         ? props.experimental_defaultFormStateBehavior
         : this.props.experimental_defaultFormStateBehavior;
+    const experimental_customMergeAllOf =
+      'experimental_customMergeAllOf' in props
+        ? props.experimental_customMergeAllOf
+        : this.props.experimental_customMergeAllOf;
     let schemaUtils: SchemaUtilsType<T, S, F> = state.schemaUtils;
     if (
       !schemaUtils ||
-      schemaUtils.doesSchemaUtilsDiffer(props.validator, rootSchema, experimental_defaultFormStateBehavior)
+      schemaUtils.doesSchemaUtilsDiffer(
+        props.validator,
+        rootSchema,
+        experimental_defaultFormStateBehavior,
+        experimental_customMergeAllOf,
+      )
     ) {
-      schemaUtils = createSchemaUtils<T, S, F>(props.validator, rootSchema, experimental_defaultFormStateBehavior);
+      schemaUtils = createSchemaUtils<T, S, F>(
+        props.validator,
+        rootSchema,
+        experimental_defaultFormStateBehavior,
+        experimental_customMergeAllOf,
+      );
     }
     const formData: T = schemaUtils.getDefaultFormState(schema, inputFormData) as T;
-    const _retrievedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
+    const _retrievedSchema = this.updateRetrievedSchema(
+      retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData),
+    );
 
     const getCurrentErrors = (): ValidationData<T> => {
       // If the `props.noValidate` option is set or the schema has changed, we reset the error state.
@@ -422,15 +445,15 @@ export default class Form<
     if (mustValidate) {
       const schemaValidation = this.validate(formData, schema, schemaUtils, _retrievedSchema);
       errors = schemaValidation.errors;
-      // If the schema has changed, we do not merge state.errorSchema.
+      // If retrievedSchema is undefined which means the schema or formData has changed, we do not merge state.
       // Else in the case where it hasn't changed, we merge 'state.errorSchema' with 'schemaValidation.errorSchema.' This done to display the raised field error.
-      if (isSchemaChanged) {
+      if (retrievedSchema === undefined) {
         errorSchema = schemaValidation.errorSchema;
       } else {
         errorSchema = mergeObjects(
           this.state?.errorSchema,
           schemaValidation.errorSchema,
-          'preventDuplicates'
+          'preventDuplicates',
         ) as ErrorSchema<T>;
       }
       schemaValidationErrors = errors;
@@ -439,7 +462,22 @@ export default class Form<
       const currentErrors = getCurrentErrors();
       errors = currentErrors.errors;
       errorSchema = currentErrors.errorSchema;
+      if (formDataChangedFields.length > 0) {
+        const newErrorSchema = formDataChangedFields.reduce(
+          (acc, key) => {
+            acc[key] = undefined;
+            return acc;
+          },
+          {} as Record<string, undefined>,
+        );
+        errorSchema = schemaValidationErrorSchema = mergeObjects(
+          currentErrors.errorSchema,
+          newErrorSchema,
+          'preventDuplicates',
+        ) as ErrorSchema<T>;
+      }
     }
+
     if (props.extraErrors) {
       const merged = validationDataMerge({ errorSchema, errors }, props.extraErrors);
       errorSchema = merged.errorSchema;
@@ -450,7 +488,7 @@ export default class Form<
       uiSchema['ui:rootFieldId'],
       formData,
       props.idPrefix,
-      props.idSeparator
+      props.idSeparator,
     );
     const nextState: FormState<T, S, F> = {
       schemaUtils,
@@ -478,6 +516,22 @@ export default class Form<
     return shouldRender(this, nextProps, nextState);
   }
 
+  /** Gets the previously raised customValidate errors.
+   *
+   * @returns the previous customValidate errors
+   */
+  private getPreviousCustomValidateErrors(): ErrorSchema<T> {
+    const { customValidate, uiSchema } = this.props;
+    const prevFormData = this.state.formData as T;
+    let customValidateErrors = {};
+    if (typeof customValidate === 'function') {
+      const errorHandler = customValidate(prevFormData, createErrorHandler<T>(prevFormData), uiSchema);
+      const userErrorSchema = unwrapErrorHandler<T>(errorHandler);
+      customValidateErrors = userErrorSchema;
+    }
+    return customValidateErrors;
+  }
+
   /** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
    * `schemaUtils` in the state), returning the results.
    *
@@ -489,7 +543,7 @@ export default class Form<
     formData: T | undefined,
     schema = this.props.schema,
     altSchemaUtils?: SchemaUtilsType<T, S, F>,
-    retrievedSchema?: S
+    retrievedSchema?: S,
   ): ValidationData<T> {
     const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
     const { customValidate, transformErrors, uiSchema } = this.props;
@@ -603,18 +657,39 @@ export default class Form<
     if (resolvedSchema?.type !== 'object' && resolvedSchema?.type !== 'array') {
       filteredErrors.__errors = schemaErrors.__errors;
     }
-    // Removing undefined and empty errors.
-    const filterUndefinedErrors = (errors: any): ErrorSchema<T> => {
-      _forEach(errors, (errorAtKey, errorKey: keyof typeof errors) => {
-        if (errorAtKey === undefined) {
+
+    const prevCustomValidateErrors = this.getPreviousCustomValidateErrors();
+    // Filtering out the previous raised customValidate errors so that they are cleared when no longer valid.
+    const filterPreviousCustomErrors = (errors: string[] = [], prevCustomErrors: string[]) => {
+      if (errors.length === 0) {
+        return errors;
+      }
+
+      return errors.filter((error) => {
+        return !prevCustomErrors.includes(error);
+      });
+    };
+
+    // Removing undefined, null and empty errors.
+    const filterNilOrEmptyErrors = (errors: any, previousCustomValidateErrors: any = {}): ErrorSchema<T> => {
+      _forEach(errors, (errorAtKey: ErrorSchema<T>['__errors'] | undefined, errorKey: keyof typeof errors) => {
+        const prevCustomValidateErrorAtKey: ErrorSchema<T> | undefined = previousCustomValidateErrors[errorKey];
+        if (_isNil(errorAtKey) || (Array.isArray(errorAtKey) && errorAtKey.length === 0)) {
           delete errors[errorKey];
+        } else if (
+          isObject(errorAtKey) &&
+          isObject(prevCustomValidateErrorAtKey) &&
+          Array.isArray(prevCustomValidateErrorAtKey?.__errors)
+        ) {
+          // if previous customValidate error is an object and has __errors array, filter out the errors previous customValidate errors.
+          errors[errorKey] = filterPreviousCustomErrors(errorAtKey.__errors, prevCustomValidateErrorAtKey.__errors);
         } else if (typeof errorAtKey === 'object' && !Array.isArray(errorAtKey.__errors)) {
-          filterUndefinedErrors(errorAtKey);
+          filterNilOrEmptyErrors(errorAtKey, previousCustomValidateErrors[errorKey]);
         }
       });
       return errors;
     };
-    return filterUndefinedErrors(filteredErrors);
+    return filterNilOrEmptyErrors(filteredErrors, prevCustomValidateErrors);
   }
 
   /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
@@ -630,18 +705,19 @@ export default class Form<
    */
   onChange = (formData: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => {
     const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-    const { schemaUtils, schema, retrievedSchema } = this.state;
+    const { schemaUtils, schema } = this.state;
 
+    let retrievedSchema = this.state.retrievedSchema;
     if (isObject(formData) || Array.isArray(formData)) {
-      const newState = this.getStateFromProps(this.props, formData, retrievedSchema);
+      const newState = this.getStateFromProps(this.props, formData);
       formData = newState.formData;
+      retrievedSchema = newState.retrievedSchema;
     }
 
     const mustValidate = !noValidate && liveValidate;
     let state: Partial<FormState<T, S, F>> = { formData, schema };
     let newFormData = formData;
 
-    let _retrievedSchema: S | undefined;
     if (omitExtraData === true && liveOmit === true) {
       newFormData = this.omitExtraData(formData);
       state = {
@@ -682,12 +758,23 @@ export default class Form<
         errors: toErrorList(errorSchema),
       };
     }
-    if (_retrievedSchema) {
-      state.retrievedSchema = _retrievedSchema;
-    }
     this.setState(state as FormState<T, S, F>, () => onChange && onChange({ ...this.state, ...state }, id));
   };
 
+  /**
+   * If the retrievedSchema has changed the new retrievedSchema is returned.
+   * Otherwise, the old retrievedSchema is returned to persist reference.
+   * -  This ensures that AJV retrieves the schema from the cache when it has not changed,
+   *    avoiding the performance cost of recompiling the schema.
+   *
+   * @param retrievedSchema The new retrieved schema.
+   * @returns The new retrieved schema if it has changed, else the old retrieved schema.
+   */
+  private updateRetrievedSchema(retrievedSchema: S) {
+    const isTheSame = deepEquals(retrievedSchema, this.state?.retrievedSchema);
+    return isTheSame ? this.state.retrievedSchema : retrievedSchema;
+  }
+
   /**
    * Callback function to handle reset form data.
    * - Reset all fields with default values.
@@ -774,7 +861,7 @@ export default class Form<
           if (onSubmit) {
             onSubmit({ ...this.state, formData: newFormData, status: 'submitted' }, event);
           }
-        }
+        },
       );
     }
   };
@@ -837,7 +924,7 @@ export default class Form<
     let field = this.formElement.current.elements[elementId];
     if (!field) {
       // if not an exact match, try finding an input starting with the element id (like radio buttons or checkboxes)
-      field = this.formElement.current.querySelector(`input[id^=${elementId}`);
+      field = this.formElement.current.querySelector(`input[id^="${elementId}"`);
     }
     if (field && field.length) {
       // If we got a list with length > 0
@@ -889,7 +976,7 @@ export default class Form<
           } else {
             console.error('Form validation failed', errors);
           }
-        }
+        },
       );
     } else if (prevErrors.length > 0) {
       this.setState({
@@ -934,7 +1021,6 @@ export default class Form<
       action,
       autoComplete,
       enctype,
-      acceptcharset,
       acceptCharset,
       noHtml5Validate = false,
       disabled,
@@ -948,9 +1034,9 @@ export default class Form<
     const registry = this.getRegistry();
     const { SchemaField: _SchemaField } = registry.fields;
     const { SubmitButton } = registry.templates.ButtonTemplates;
-    // The `semantic-ui` theme has an `_internalFormWrapper` that take an `as` prop that is the
+    // The `semantic-ui` and `material-ui` themes have `_internalFormWrapper`s that take an `as` prop that is the
     // PropTypes.elementType to use for the inner tag, so we'll need to pass `tagName` along if it is provided.
-    // NOTE, the `as` prop is native to `semantic-ui`
+    // NOTE, the `as` prop is native to `semantic-ui` and is emulated in the `material-ui` theme
     const as = _internalFormWrapper ? tagName : undefined;
     const FormTag = _internalFormWrapper || tagName || 'form';
 
@@ -970,7 +1056,7 @@ export default class Form<
         action={action}
         autoComplete={autoComplete}
         encType={enctype}
-        acceptCharset={acceptCharset || acceptcharset}
+        acceptCharset={acceptCharset}
         noValidate={noHtml5Validate}
         onSubmit={this.onSubmit}
         as={as}

package/src/components/fields/ArrayField.tsx

@@ -97,7 +97,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
    */
   static getDerivedStateFromProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
     nextProps: Readonly<FieldProps<T[], S, F>>,
-    prevState: Readonly<ArrayFieldState<T>>
+    prevState: Readonly<ArrayFieldState<T>>,
   ) {
     // Don't call getDerivedStateFromProps if keyed formdata was just updated.
     if (prevState.updatedKeyedFormData) {
@@ -130,7 +130,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     return get(
       schema,
       [ITEMS_KEY, 'title'],
-      get(schema, [ITEMS_KEY, 'description'], translateString(TranslatableString.ArrayItemTitle))
+      get(schema, [ITEMS_KEY, 'description'], translateString(TranslatableString.ArrayItemTitle)),
     );
   }
 
@@ -229,7 +229,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         keyedFormData: newKeyedFormData,
         updatedKeyedFormData: true,
       },
-      () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>)
+      () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
     );
   }
 
@@ -298,7 +298,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true,
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>)
+        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
       );
     };
   };
@@ -335,7 +335,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true,
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>)
+        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
       );
     };
   };
@@ -385,7 +385,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         {
           keyedFormData: newKeyedFormData,
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>)
+        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
       );
     };
   };
@@ -412,7 +412,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
             ...errorSchema,
             [index]: newErrorSchema,
           },
-        id
+        id,
       );
     };
   };
@@ -433,7 +433,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       const UnsupportedFieldTemplate = getTemplate<'UnsupportedFieldTemplate', T[], S, F>(
         'UnsupportedFieldTemplate',
         registry,
-        uiOptions
+        uiOptions,
       );
 
       return (
@@ -520,7 +520,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           totalItems: keyedFormData.length,
         });
       }),
-      className: `field field-array field-array-of-${itemsSchema.type}`,
+      className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}`,
       disabled,
       idSchema,
       uiSchema,
@@ -612,7 +612,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     } = this.props;
     const { widgets, schemaUtils, formContext, globalUiOptions } = registry;
     const itemsSchema = schemaUtils.retrieveSchema(schema.items as S, items);
-    const enumOptions = optionsList<S, T[], F>(itemsSchema, uiSchema);
+    const enumOptions = optionsList<T[], S, F>(itemsSchema, uiSchema);
     const { widget = 'select', title: uiTitle, ...options } = getUiOptions<T[], S, F>(uiSchema, globalUiOptions);
     const Widget = getWidget<T[], S, F>(schema, widget, widgets);
     const label = uiTitle ?? schema.title ?? name;
@@ -720,7 +720,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     const { schemaUtils, formContext } = registry;
     const _schemaItems: S[] = isObject(schema.items) ? (schema.items as S[]) : ([] as S[]);
     const itemSchemas = _schemaItems.map((item: S, index: number) =>
-      schemaUtils.retrieveSchema(item, formData[index] as unknown as T[])
+      schemaUtils.retrieveSchema(item, formData[index] as unknown as T[]),
     );
     const additionalSchema = isObject(schema.additionalItems)
       ? schemaUtils.retrieveSchema(schema.additionalItems as S, formData)
@@ -736,7 +736,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     const canAdd = this.canAddItem(items) && !!additionalSchema;
     const arrayProps: ArrayFieldTemplateProps<T[], S, F> = {
       canAdd,
-      className: 'field field-array field-array-fixed-items',
+      className: 'rjsf-field rjsf-field-array rjsf-field-array-fixed-items',
       disabled,
       idSchema,
       formData,
@@ -754,8 +754,8 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         const itemUiSchema = additional
           ? uiSchema.additionalItems || {}
           : Array.isArray(uiSchema.items)
-          ? uiSchema.items[index]
-          : uiSchema.items || {};
+            ? uiSchema.items[index]
+            : uiSchema.items || {};
         const itemErrorSchema = errorSchema ? (errorSchema[index] as ErrorSchema<T[]>) : undefined;
 
         return this.renderArrayFieldItem({
@@ -882,21 +882,31 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           rawErrors={rawErrors}
         />
       ),
-      className: 'array-item',
+      buttonsProps: {
+        idSchema: itemIdSchema,
+        disabled: disabled,
+        readonly: readonly,
+        canAdd,
+        hasCopy: has.copy,
+        hasMoveUp: has.moveUp,
+        hasMoveDown: has.moveDown,
+        hasRemove: has.remove,
+        index: index,
+        totalItems: totalItems,
+        onAddIndexClick: this.onAddIndexClick,
+        onCopyIndexClick: this.onCopyIndexClick,
+        onDropIndexClick: this.onDropIndexClick,
+        onReorderClick: this.onReorderClick,
+        registry: registry,
+        schema: itemSchema,
+        uiSchema: itemUiSchema,
+      },
+      className: 'rjsf-array-item',
       disabled,
-      canAdd,
-      hasCopy: has.copy,
       hasToolbar: has.toolbar,
-      hasMoveUp: has.moveUp,
-      hasMoveDown: has.moveDown,
-      hasRemove: has.remove,
       index,
       totalItems,
       key,
-      onAddIndexClick: this.onAddIndexClick,
-      onCopyIndexClick: this.onCopyIndexClick,
-      onDropIndexClick: this.onDropIndexClick,
-      onReorderClick: this.onReorderClick,
       readonly,
       registry,
       schema: itemSchema,