@rjsf/core 5.24.10 → 6.0.0-beta.1

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@rjsf/core",
-  "version": "5.24.10",
+  "version": "6.0.0-beta.1",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
-    "compileReplacer": "tsc -p tsconfig.replacer.json",
+    "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",
@@ -28,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",
@@ -35,53 +63,35 @@
   ],
   "engineStrict": false,
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "peerDependencies": {
-    "@rjsf/utils": "^5.24.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": "^5.24.10",
-    "@rjsf/utils": "^5.24.10",
-    "@rjsf/validator-ajv6": "^5.24.10",
-    "@rjsf/validator-ajv8": "^5.24.10",
-    "@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",
     "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": "ad33d7c324cb040d0f34da30a17caea0251f1e3a"
+  }
 }

package/src/components/Form.tsx

@@ -116,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
@@ -269,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
@@ -316,7 +311,7 @@ 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);
@@ -333,7 +328,7 @@ export default class Form<
         //  match one of the subSchemas, the retrieved schema must be updated.
         isSchemaChanged || isFormDataChanged ? undefined : this.state.retrievedSchema,
         isSchemaChanged,
-        formDataChangedFields
+        formDataChangedFields,
       );
       const shouldUpdate = !deepEquals(nextState, prevState);
       return { nextState, shouldUpdate };
@@ -349,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`.
@@ -359,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;
@@ -391,7 +383,7 @@ export default class Form<
     inputFormData?: T,
     retrievedSchema?: S,
     isSchemaChanged = false,
-    formDataChangedFields: string[] = []
+    formDataChangedFields: string[] = [],
   ): FormState<T, S, F> {
     const state: FormState<T, S, F> = this.state || {};
     const schema = 'schema' in props ? props.schema : this.props.schema;
@@ -415,19 +407,19 @@ export default class Form<
         props.validator,
         rootSchema,
         experimental_defaultFormStateBehavior,
-        experimental_customMergeAllOf
+        experimental_customMergeAllOf,
       )
     ) {
       schemaUtils = createSchemaUtils<T, S, F>(
         props.validator,
         rootSchema,
         experimental_defaultFormStateBehavior,
-        experimental_customMergeAllOf
+        experimental_customMergeAllOf,
       );
     }
     const formData: T = schemaUtils.getDefaultFormState(schema, inputFormData) as T;
     const _retrievedSchema = this.updateRetrievedSchema(
-      retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData)
+      retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData),
     );
 
     const getCurrentErrors = (): ValidationData<T> => {
@@ -461,7 +453,7 @@ export default class Form<
         errorSchema = mergeObjects(
           this.state?.errorSchema,
           schemaValidation.errorSchema,
-          'preventDuplicates'
+          'preventDuplicates',
         ) as ErrorSchema<T>;
       }
       schemaValidationErrors = errors;
@@ -471,14 +463,17 @@ export default class Form<
       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>);
+        const newErrorSchema = formDataChangedFields.reduce(
+          (acc, key) => {
+            acc[key] = undefined;
+            return acc;
+          },
+          {} as Record<string, undefined>,
+        );
         errorSchema = schemaValidationErrorSchema = mergeObjects(
           currentErrors.errorSchema,
           newErrorSchema,
-          'preventDuplicates'
+          'preventDuplicates',
         ) as ErrorSchema<T>;
       }
     }
@@ -493,7 +488,7 @@ export default class Form<
       uiSchema['ui:rootFieldId'],
       formData,
       props.idPrefix,
-      props.idSeparator
+      props.idSeparator,
     );
     const nextState: FormState<T, S, F> = {
       schemaUtils,
@@ -548,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;
@@ -677,8 +672,8 @@ export default class Form<
 
     // Removing undefined, null and empty errors.
     const filterNilOrEmptyErrors = (errors: any, previousCustomValidateErrors: any = {}): ErrorSchema<T> => {
-      _forEach(errors, (errorAtKey, errorKey: keyof typeof errors) => {
-        const prevCustomValidateErrorAtKey = previousCustomValidateErrors[errorKey];
+      _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 (
@@ -866,7 +861,7 @@ export default class Form<
           if (onSubmit) {
             onSubmit({ ...this.state, formData: newFormData, status: 'submitted' }, event);
           }
-        }
+        },
       );
     }
   };
@@ -981,7 +976,7 @@ export default class Form<
           } else {
             console.error('Form validation failed', errors);
           }
-        }
+        },
       );
     } else if (prevErrors.length > 0) {
       this.setState({
@@ -1026,7 +1021,6 @@ export default class Form<
       action,
       autoComplete,
       enctype,
-      acceptcharset,
       acceptCharset,
       noHtml5Validate = false,
       disabled,
@@ -1062,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,

package/src/components/fields/BooleanField.tsx

@@ -17,7 +17,7 @@ import isObject from 'lodash/isObject';
  * @param props - The `FieldProps` for this template
  */
 function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: FieldProps<T, S, F>
+  props: FieldProps<T, S, F>,
 ) {
   const {
     schema,
@@ -44,6 +44,7 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
     title: uiTitle,
     // Unlike the other fields, don't use `getDisplayLabel()` since it always returns false for the boolean type
     label: displayLabel = true,
+    enumNames,
     ...options
   } = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
   const Widget = getWidget(schema, widget, widgets);
@@ -52,7 +53,7 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
   let enumOptions: EnumOptionsType<S>[] | undefined;
   const label = uiTitle ?? schemaTitle ?? title ?? name;
   if (Array.isArray(schema.oneOf)) {
-    enumOptions = optionsList<S, T, F>(
+    enumOptions = optionsList<T, S, F>(
       {
         oneOf: schema.oneOf
           .map((option) => {
@@ -66,13 +67,11 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
           })
           .filter((o: any) => o) as S[], // cast away the error that typescript can't grok is fixed
       } as unknown as S,
-      uiSchema
+      uiSchema,
     );
   } else {
-    // We deprecated enumNames in v5. It's intentionally omitted from RSJFSchema type, so we need to cast here.
-    const schemaWithEnumNames = schema as S & { enumNames?: string[] };
     const enums = schema.enum ?? [true, false];
-    if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every((v: any) => typeof v === 'boolean')) {
+    if (!enumNames && enums.length === 2 && enums.every((v: any) => typeof v === 'boolean')) {
       enumOptions = [
         {
           value: enums[0],
@@ -84,14 +83,7 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
         },
       ];
     } else {
-      enumOptions = optionsList<S, T, F>(
-        {
-          enum: enums,
-          // NOTE: enumNames is deprecated, but still supported for now.
-          enumNames: schemaWithEnumNames.enumNames,
-        } as unknown as S,
-        uiSchema
-      );
+      enumOptions = optionsList<T, S, F>({ enum: enums } as S, uiSchema);
     }
   }