@rjsf/core 5.0.0-beta.9 → 5.0.0

package/dist/index.d.ts

@@ -1,17 +1,16 @@
-import * as json_schema from 'json-schema';
 import React, { Component } from 'react';
-import { RJSFSchema, ValidatorType, UiSchema, RegistryFieldsType, TemplatesType, RegistryWidgetsType, RJSFValidationError, CustomValidator, ErrorSchema, ErrorTransformer, IdSchema, SchemaUtilsType, ValidationData, Registry, PathSchema } from '@rjsf/utils';
+import { StrictRJSFSchema, RJSFSchema, FormContextType, ValidatorType, UiSchema, RegistryFieldsType, TemplatesType, RegistryWidgetsType, RJSFValidationError, CustomValidator, ErrorSchema, ErrorTransformer, IdSchema, SchemaUtilsType, ValidationData, Registry, PathSchema } from '@rjsf/utils';
 
 /** The properties that are passed to the `Form` */
-interface FormProps<T = any, F = any> {
+interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
     /** The JSON schema object for the form */
-    schema: RJSFSchema;
+    schema: S;
     /** An implementation of the `ValidatorType` interface that is needed for form validation to work */
-    validator: ValidatorType<T>;
+    validator: ValidatorType<T, S, F>;
     /** The optional children for the form, if provided, it will replace the default `SubmitButton` */
     children?: React.ReactNode;
     /** The uiSchema for the form */
-    uiSchema?: UiSchema<T, F>;
+    uiSchema?: UiSchema<T, S, F>;
     /** The data for the form, used to prefill a form with existing data */
     formData?: T;
     /** You can provide a `formContext` object to the form, which is passed down to all fields and widgets. Useful for
@@ -39,17 +38,18 @@ interface FormProps<T = any, F = any> {
      */
     readonly?: boolean;
     /** The dictionary of registered fields in the form */
-    fields?: RegistryFieldsType<T, F>;
+    fields?: RegistryFieldsType<T, S, F>;
     /** The dictionary of registered templates in the form; Partial allows a subset to be provided beyond the defaults */
-    templates?: Partial<Omit<TemplatesType<T, F>, "ButtonTemplates">> & {
-        ButtonTemplates?: Partial<TemplatesType<T, F>["ButtonTemplates"]>;
+    templates?: Partial<Omit<TemplatesType<T, S, F>, "ButtonTemplates">> & {
+        ButtonTemplates?: Partial<TemplatesType<T, S, F>["ButtonTemplates"]>;
     };
     /** The dictionary of registered widgets in the form */
-    widgets?: RegistryWidgetsType<T, F>;
+    widgets?: RegistryWidgetsType<T, S, F>;
     /** If you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will
-     * receive the same args as `onSubmit` any time a value is updated in the form
+     * receive the same args as `onSubmit` any time a value is updated in the form. Can also return the `id` of the field
+     * that caused the change
      */
-    onChange?: (data: IChangeEvent<T, F>) => void;
+    onChange?: (data: IChangeEvent<T, S, F>, id?: string) => void;
     /** To react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of
      * encountered errors
      */
@@ -58,7 +58,7 @@ interface FormProps<T = any, F = any> {
      * and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form
      * data you're usually after. The original event will also be passed as a second parameter
      */
-    onSubmit?: (data: IChangeEvent<T, F>, event: React.FormEvent<any>) => void;
+    onSubmit?: (data: IChangeEvent<T, S, F>, event: React.FormEvent<any>) => void;
     /** Sometimes you may want to trigger events or modify external state when a field has been touched, so you can pass
      * an `onBlur` handler, which will receive the id of the input that was blurred and the field value
      */
@@ -96,7 +96,7 @@ interface FormProps<T = any, F = any> {
     /** The value of this prop will be passed to the `target` HTML attribute on the form */
     target?: string;
     /** Formerly the `validate` prop; Takes a function that specifies custom validation rules for the form */
-    customValidate?: CustomValidator<T>;
+    customValidate?: CustomValidator<T, S, F>;
     /** This prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it
      * can be used to implement asynchronous validation
      */
@@ -120,14 +120,14 @@ interface FormProps<T = any, F = any> {
      * called. Set to `false` by default.
      */
     omitExtraData?: boolean;
-    /** When this prop is set to true, a list of errors (or the custom error list defined in the `ErrorList`) will also
-     * show. When set to false, only inline input validation errors will be shown. Set to `true` by default
+    /** When this prop is set to `top` or 'bottom', a list of errors (or the custom error list defined in the `ErrorList`) will also
+     * show. When set to false, only inline input validation errors will be shown. Set to `top` by default
      */
-    showErrorList?: boolean;
+    showErrorList?: false | "top" | "bottom";
     /** A function can be passed to this prop in order to make modifications to the default errors resulting from JSON
      * Schema validation
      */
-    transformErrors?: ErrorTransformer;
+    transformErrors?: ErrorTransformer<T, S, F>;
     /**
      * _internalFormWrapper is currently used by the semantic-ui theme to provide a custom wrapper around `<Form />`
      * that supports the proper rendering of those themes. To use this prop, one must pass a component that takes two
@@ -144,21 +144,24 @@ interface FormProps<T = any, F = any> {
      * Use at your own risk as this prop is private and may change at any time without notice.
      */
     _internalFormWrapper?: React.ElementType;
+    /** Support receiving a React ref to the Form
+     */
+    ref?: React.Ref<Form<T, S, F>>;
 }
 /** The data that is contained within the state for the `Form` */
-interface FormState<T = any, F = any> {
+interface FormState<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
     /** The JSON schema object for the form */
-    schema: RJSFSchema;
+    schema: S;
     /** The uiSchema for the form */
-    uiSchema: UiSchema<T, F>;
+    uiSchema: UiSchema<T, S, F>;
     /** The `IdSchema` for the form, computed from the `schema`, the `rootFieldId`, the `formData` and the `idPrefix` and
      * `idSeparator` props.
      */
     idSchema: IdSchema<T>;
     /** The schemaUtils implementation used by the `Form`, created from the `validator` and the `schema` */
-    schemaUtils: SchemaUtilsType<T>;
+    schemaUtils: SchemaUtilsType<T, S, F>;
     /** The current data for the form, computed from the `formData` prop and the changes made by the user */
-    formData: T;
+    formData?: T;
     /** Flag indicating whether the form is in edit mode, true when `formData` is passed to the form, otherwise false */
     edit: boolean;
     /** The current list of errors for the form, includes `extraErrors` */
@@ -175,12 +178,12 @@ interface FormState<T = any, F = any> {
 /** The event data passed when changes have been made to the form, includes everything from the `FormState` except
  * the schema validation errors. An additional `status` is added when returned from `onSubmit`
  */
-interface IChangeEvent<T = any, F = any> extends Omit<FormState<T, F>, "schemaValidationErrors" | "schemaValidationErrorSchema"> {
+interface IChangeEvent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends Omit<FormState<T, S, F>, "schemaValidationErrors" | "schemaValidationErrorSchema"> {
     /** The status of the form when submitted */
     status?: "submitted";
 }
 /** The `Form` component renders the outer form and all the fields defined in the `schema` */
-declare class Form<T = any, F = any> extends Component<FormProps<T, F>, FormState<T, F>> {
+declare class Form<T = any, S extends StrictRJSFSchema = RJSFSchema, 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
      */
@@ -191,14 +194,14 @@ declare class Form<T = any, F = any> extends Component<FormProps<T, F>, FormStat
      *
      * @param props - The initial props for the `Form`
      */
-    constructor(props: FormProps<T, F>);
+    constructor(props: FormProps<T, S, F>);
     /** React lifecycle method that gets called before new props are provided, updates the state based on new props. It
      * will also call the`onChange` handler if the `formData` is modified to add missing default values as part of the
      * state construction.
      *
      * @param nextProps - The new set of props about to be applied to the `Form`
      */
-    UNSAFE_componentWillReceiveProps(nextProps: FormProps<T, F>): void;
+    UNSAFE_componentWillReceiveProps(nextProps: FormProps<T, S, F>): void;
     /** Extracts the updated state from the given `props` and `inputFormData`. As part of this process, the
      * `inputFormData` is first processed to add any missing required defaults. After that, the data is run through the
      * validation process IF required by the `props`.
@@ -207,35 +210,36 @@ declare class Form<T = any, F = any> extends Component<FormProps<T, F>, FormStat
      * @param inputFormData - The new or current data for the `Form`
      * @returns - The new state for the `Form`
      */
-    getStateFromProps(props: FormProps<T, F>, inputFormData?: T): FormState<T, F>;
+    getStateFromProps(props: FormProps<T, S, F>, inputFormData?: T): FormState<T, S, F>;
     /** React lifecycle method that is used to determine whether component should be updated.
      *
      * @param nextProps - The next version of the props
      * @param nextState - The next version of the state
      * @returns - True if the component should be updated, false otherwise
      */
-    shouldComponentUpdate(nextProps: FormProps<T, F>, nextState: FormState<T, F>): boolean;
-    /** Validates the `formData` against the `schema` using the `schemaUtils`, returning the results.
+    shouldComponentUpdate(nextProps: FormProps<T, S, F>, nextState: FormState<T, S, F>): boolean;
+    /** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
+     * `schemaUtils` in the state), returning the results.
      *
-     * @param schemaUtils - The schemaUtils to use for validation
      * @param formData - The new form data to validate
      * @param schema - The schema used to validate against
+     * @param altSchemaUtils - The alternate schemaUtils to use for validation
      */
-    validate(schemaUtils: SchemaUtilsType<T>, formData: T, schema?: json_schema.JSONSchema7): ValidationData<T>;
+    validate(formData: T | undefined, schema?: S, altSchemaUtils?: SchemaUtilsType<T, S, F>): ValidationData<T>;
     /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */
-    renderErrors(registry: Registry<T, F>): JSX.Element | null;
+    renderErrors(registry: Registry<T, S, F>): JSX.Element | null;
     /** Returns the `formData` with only the elements specified in the `fields` list
      *
      * @param formData - The data for the `Form`
      * @param fields - The fields to keep while filtering
      */
-    getUsedFormData: (formData: T, fields: string[]) => T;
+    getUsedFormData: (formData: T | undefined, fields: string[][]) => T | undefined;
     /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
      *
      * @param pathSchema - The `PathSchema` object for the form
-     * @param formData - The form data to use while checking for empty objects/arrays
+     * @param [formData] - The form data to use while checking for empty objects/arrays
      */
-    getFieldNames: (pathSchema: PathSchema<T>, formData: T) => string[];
+    getFieldNames: (pathSchema: PathSchema<T>, formData?: T) => string[][];
     /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
      * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
      * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filterer to remove any extra data not
@@ -245,8 +249,9 @@ declare class Form<T = any, F = any> extends Component<FormProps<T, F>, FormStat
      *
      * @param formData - The new form data from a change to a field
      * @param newErrorSchema - The new `ErrorSchema` based on the field change
+     * @param id - The id of the field that caused the change
      */
-    onChange: (formData: T, newErrorSchema?: ErrorSchema<T>) => void;
+    onChange: (formData: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => void;
     /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
      * was provided.
      *
@@ -271,7 +276,7 @@ declare class Form<T = any, F = any> extends Component<FormProps<T, F>, FormStat
      */
     onSubmit: (event: React.FormEvent<any>) => void;
     /** Returns the registry for the form */
-    getRegistry(): Registry<T, F>;
+    getRegistry(): Registry<T, S, F>;
     /** Provides a function that can be used to programmatically submit the `Form` */
     submit(): void;
     /** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
@@ -289,14 +294,14 @@ declare class Form<T = any, F = any> extends Component<FormProps<T, F>, FormStat
 /** The properties for the `withTheme` function, essentially a subset of properties from the `FormProps` that can be
  * overridden while creating a theme
  */
-declare type ThemeProps<T = any, F = any> = Pick<FormProps<T, F>, "fields" | "templates" | "widgets" | "_internalFormWrapper">;
+type ThemeProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = Pick<FormProps<T, S, F>, "fields" | "templates" | "widgets" | "_internalFormWrapper">;
 /** A Higher-Order component that creates a wrapper around a `Form` with the overrides from the `WithThemeProps` */
-declare function withTheme<T = any, F = any>(themeProps: ThemeProps<T, F>): React.ForwardRefExoticComponent<FormProps<T, F> & React.RefAttributes<Form<T, F>>>;
+declare function withTheme<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(themeProps: ThemeProps<T, S, F>): React.ComponentType<FormProps<T, S, F>>;
 
 /** The default registry consists of all the fields, templates and widgets provided in the core implementation,
  * plus an empty `rootSchema` and `formContext. We omit schemaUtils here because it cannot be defaulted without a
  * rootSchema and validator. It will be added into the computed registry later in the Form.
  */
-declare function getDefaultRegistry<T = any, F = any>(): Omit<Registry<T, F>, "schemaUtils">;
+declare function getDefaultRegistry<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(): Omit<Registry<T, S, F>, "schemaUtils">;
 
 export { FormProps, FormState, IChangeEvent, ThemeProps, Form as default, getDefaultRegistry, withTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/core",
-  "version": "5.0.0-beta.9",
+  "version": "5.0.0",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "build": "rimraf dist && dts build --rollupTypes --format cjs,esm,umd",
@@ -11,6 +11,7 @@
     "publish-to-npm": "npm run build && npm publish",
     "start": "dts watch",
     "test": "dts test",
+    "test:debug": "node --inspect-brk node_modules/.bin/dts test",
     "test:watch": "dts test --watch",
     "test-coverage": "dts test --coverage"
   },
@@ -42,33 +43,33 @@
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.13",
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+    "@babel/plugin-proposal-optional-chaining": "^7.20.7",
     "@babel/plugin-transform-object-assign": "^7.18.6",
-    "@babel/plugin-transform-react-jsx": "^7.18.10",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/plugin-transform-react-jsx": "^7.20.7",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/register": "^7.18.9",
-    "@rjsf/utils": "^5.0.0-beta.9",
-    "@rjsf/validator-ajv6": "^5.0.0-beta.9",
-    "@rjsf/validator-ajv8": "^5.0.0-beta.9",
-    "@types/lodash": "^4.14.184",
+    "@rjsf/utils": "^5.0.0",
+    "@rjsf/validator-ajv6": "^5.0.0",
+    "@rjsf/validator-ajv8": "^5.0.0",
+    "@types/lodash": "^4.14.191",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
-    "ajv": "^6.7.0",
+    "ajv": "^8.12.0",
     "atob": "^2.1.2",
     "chai": "^3.3.0",
-    "dts-cli": "^1.6.0",
-    "eslint": "^8.23.0",
+    "dts-cli": "^1.6.3",
+    "eslint": "^8.31.0",
     "html": "^1.0.0",
-    "jsdom": "^20.0.0",
-    "mocha": "^10.0.0",
+    "jsdom": "^20.0.1",
+    "mocha": "^10.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-portal": "^4.2.2",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.0.4",
     "sinon": "^9.0.2"
   },
   "directories": {
@@ -92,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6a0a58190ff616344d80c558a755cda1835954f6"
+  "gitHead": "251bdbc60d2efdbab3a2b4058a2338d0d4794942"
 }