Yeah, I'm pretty dumb.
@@ -336,11 +345,11 @@ const CustomSchemaField = function(props) {
);
};
-const fields = {
+const fields: RegistryFieldsType = {
SchemaField: CustomSchemaField
};
-const schema = {
+const schema: RJSFSchema = {
type: "string"
};
@@ -359,21 +368,22 @@ Everything that was mentioned above for a `Custom SchemaField` applies, but this
By default, `ArraySchemaField` is not actually implemented in the `fields` list since `ArrayField` falls back to `SchemaField` if `ArraySchemaField` is not provided.
If you want to customize how the individual items for an array are rendered, provide your implementation of `ArraySchemaField` as a `fields` override.
-```jsx
-import validator from '@rjsf/validator-ajv6';
+```tsx
+import { RJSFSchema, UiSchema, FieldProps, RegistryFieldsType } from "@rjsf/utils";
+import validator from '@rjsf/validator-ajv8';
-const CustomArraySchemaField = function(props) {
+const CustomArraySchemaField = function(props: FieldProps) {
const { index, registry } = props;
const { SchemaField } = registry.fields;
const name = `Index ${index}`;
return
;
};
-const fields = {
+const fields: RegistryFieldsType = {
ArraySchemaField: CustomArraySchemaField
};
-const schema = {
+const schema: RJSFSchema = {
type: "string"
};
diff --git a/docs/advanced-customization/internals.md b/docs/advanced-customization/internals.md
index ff8b84f448..55e3dbe70d 100644
--- a/docs/advanced-customization/internals.md
+++ b/docs/advanced-customization/internals.md
@@ -61,13 +61,14 @@ i.glyphicon { display: none; }
You can use the reference to get your `Form` component and call the `submit` method to submit the form programmatically without a submit button.
This method will dispatch the `submit` event of the form, and the function, that is passed to `onSubmit` props, will be called.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
const onSubmit = ({formData}) => console.log("Data submitted: ", formData);
let yourForm;
-const schema = {
+const schema: RJSFSchema = {
type: "string"
};
diff --git a/docs/api-reference/form-props.md b/docs/api-reference/form-props.md
index f2da55c695..31cbf27743 100644
--- a/docs/api-reference/form-props.md
+++ b/docs/api-reference/form-props.md
@@ -26,10 +26,11 @@ The value of this prop will be passed to the `class` [HTML attribute on the form
You can provide custom buttons to your form via the `Form` component's `children`. Otherwise a default submit button will be rendered.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "string"
};
@@ -55,10 +56,11 @@ See [Validation](../usage/validation.md) for more information.
It's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down to each field of the form.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "string"
};
@@ -73,10 +75,11 @@ If you just want to disable some fields, see the `ui:disabled` parameter in `uiS
It's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then forwarded down to each field of the form.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "string"
};
@@ -120,10 +123,11 @@ The value of this prop will be passed to the `id` [HTML attribute on the form](h
To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids (the default is `root`).
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "string"
};
@@ -138,10 +142,11 @@ This will render `
` instead of `
console.log("I have", errors.length, "errors to fix");
@@ -225,10 +231,11 @@ You can pass a function as the `onSubmit` prop of your `Form` component to liste
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:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "string"
};
const onSubmit = ({formData}, e) => console.log("Data submitted: ", formData);
@@ -288,8 +295,8 @@ Form uiSchema. See [uiSchema Reference](uiSchema.md) for more information.
## validator
-**Required**! An implementation of the `ValidatorType` interface that is needed for form validation to work.
-`@rjsf/validator-ajv6` exports the implementation of this interface from RJSF version 4.
+**Required**! An implementation of the `ValidatorType` interface that is needed for form validation to work.
+`@rjsf/validator-ajv8` exports the implementation of this interface from RJSF version 4.
## widgets
diff --git a/docs/api-reference/themes/semantic-ui/uiSchema.md b/docs/api-reference/themes/semantic-ui/uiSchema.md
index 858583d04a..bac928fc00 100644
--- a/docs/api-reference/themes/semantic-ui/uiSchema.md
+++ b/docs/api-reference/themes/semantic-ui/uiSchema.md
@@ -49,8 +49,10 @@ pointing: determines the direction of the arrow on the error message dialog
```
Below are the current defaults
-```jsx
-const uiSchema = {
+```tsx
+import { UiSchema } from "@rjsf/utils";
+
+const uiSchema: UiSchema = {
"ui:options": {
"semantic" : {
"errorOptions": {
@@ -72,17 +74,18 @@ wrapItem: wrap each array item in a Segment
horizontalButtons: horizontal buttons instead of the default vertical
```
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
items: {
type: "string"
}
};
-const uiSchema = {
+const uiSchema: UiSchema = {
"ui:options": {
"semantic": {
"wrapItem": true,
diff --git a/docs/api-reference/uiSchema.md b/docs/api-reference/uiSchema.md
index 56cc9720e2..1f8d567ce8 100644
--- a/docs/api-reference/uiSchema.md
+++ b/docs/api-reference/uiSchema.md
@@ -54,8 +54,10 @@ There are 3 properties that exist in a `UiSchema` that will not be found in an i
By default, this library will generate ids unique to the form for all rendered widgets.
If you plan on using multiple instances of the `Form` component in a same page, it's wise to declare a root prefix for these, using the `ui:rootFieldId` uiSchema directive:
-```js
-const uiSchema = {
+```ts
+import { UiSchema } from "@rjsf/utils";
+
+const uiSchema: UiSchema = {
"ui:rootFieldId": "myform"
};
```
@@ -90,7 +92,9 @@ See [Custom Widgets and Fields](https://react-jsonschema-form.readthedocs.io/en/
The uiSchema object accepts a `classNames` property for each field of the schema:
-```jsx
+```tsx
+import { UiSchema } from "@rjsf/utils";
+
const uiSchema = {
title: {
"ui:classNames": "task-title foo-bar"
@@ -113,9 +117,11 @@ Will result in:
If you want to mark a text input, select or textarea input to use the HTML autocomplete feature, set the `ui:autocomplete` uiSchema directive to a valid [HTML autocomplete value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values).
-```js
-const schema = {type: "string"};
-const uiSchema = {
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+
+const schema: RJSFSchema = {type: "string"};
+const uiSchema: UiSchema = {
"ui:widget": "textarea",
"ui:autocomplete": "on"
}
@@ -125,9 +131,11 @@ const uiSchema = {
If you want to automatically focus on a text input or textarea input, set the `ui:autofocus` uiSchema directive to `true`.
-```js
-const schema = {type: "string"};
-const uiSchema = {
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+
+const schema: RJSFSchema = {type: "string"};
+const uiSchema: UiSchema = {
"ui:widget": "textarea",
"ui:autofocus": true
}
@@ -137,9 +145,11 @@ const uiSchema = {
Sometimes it's convenient to change the description of a field. This is the purpose of the `ui:description` uiSchema directive:
-```js
-const schema = {type: "string"};
-const uiSchema = {
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+
+const schema: RJSFSchema = {type: "string"};
+const uiSchema: UiSchema = {
"ui:widget": "password",
"ui:description": "The best password"
};
@@ -159,13 +169,15 @@ The `ui:emptyValue` uiSchema directive provides the default value to use when an
To disable an option, use the `enumDisabled` property in uiSchema.
-```js
-const schema = {
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+
+const schema: RJSFSchema = {
type: "string",
enum: ["one", "two", "three"],
};
-const uiSchema={
+const uiSchema: UiSchema = {
"ui:enumDisabled": ['two'],
}
```
@@ -174,9 +186,11 @@ const uiSchema={
Sometimes it's convenient to add text next to a field to guide the end user filling it. This is the purpose of the `ui:help` uiSchema directive:
-```js
-const schema = {type: "string"};
-const uiSchema = {
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+
+const schema: RJSFSchema = {type: "string"};
+const uiSchema: UiSchema = {
"ui:widget": "password",
"ui:help": "Hint: Make it strong!"
};
@@ -198,9 +212,11 @@ This is useful when you have a custom field or widget that utilizes either the `
To change the input type (for example, `tel` or `email`) you can specify the `inputType` in the `ui:options` uiSchema directive.
-```jsx
-const schema = {type: "string"};
-const uiSchema = {
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+
+const schema: RJSFSchema = {type: "string"};
+const uiSchema: UiSchema = {
"ui:options": {
inputType: 'tel'
}
@@ -211,11 +227,12 @@ const uiSchema = {
Field labels are rendered by default. Labels may be omitted by setting the `label` option to `false` in the `ui:options` uiSchema directive.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {type: "string"};
-const uiSchema = {
+const schema: RJSFSchema = {type: "string"};
+const uiSchema: UiSchema = {
"ui:options": {
label: false
}
@@ -234,11 +251,12 @@ This property allows you to reorder the properties that are shown for a particul
You can add placeholder text to an input by using the `ui:placeholder` uiSchema directive:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {type: "string", format: "uri"};
-const uiSchema = {
+const schema: RJSFSchema = {type: "string", format: "uri"};
+const uiSchema: UiSchema = {
"ui:placeholder": "http://"
};
@@ -249,11 +267,12 @@ render((
Fields using `enum` can also use `ui:placeholder`. The value will be used as the text for the empty option in the select widget.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {type: "string", enum: ["First", "Second"]};
-const uiSchema = {
+const schema: RJSFSchema = {type: "string", enum: ["First", "Second"]};
+const uiSchema: UiSchema = {
"ui:placeholder": "Choose an option"
};
@@ -272,11 +291,12 @@ The `ui:readonly` uiSchema directive will mark all child widgets from a given fi
You can set the initial height of a textarea widget by specifying `rows` option.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {type: "string"};
-const uiSchema = {
+const schema: RJSFSchema = {type: "string"};
+const uiSchema: UiSchema = {
"ui:options": {
widget: "textarea",
rows: 15
@@ -292,9 +312,11 @@ render((
Sometimes it's convenient to change a field's title. This is the purpose of the `ui:title` uiSchema directive:
-```js
-const schema = {type: "string"};
-const uiSchema = {
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+
+const schema: RJSFSchema = {type: "string"};
+const uiSchema: UiSchema = {
"ui:widget": "password",
"ui:title": "Your password"
};
@@ -326,8 +348,10 @@ You can use this option to disable the submit button.
You can use this option to specify a class name for the submit button.
-```js
-const uiSchema = {
+```tsx
+import { UiSchema } from "@rjsf/utils";
+
+const uiSchema: UiSchema = {
"ui:submitButtonOptions": {
"props": {
"disabled": false,
diff --git a/docs/api-reference/utility-functions.md b/docs/api-reference/utility-functions.md
index 44102aec8f..f4430df0e5 100644
--- a/docs/api-reference/utility-functions.md
+++ b/docs/api-reference/utility-functions.md
@@ -25,7 +25,7 @@ Checks the schema to see if it is allowing additional items, by verifying that `
The user is warned in the console if `schema.additionalItems` has the value `true`.
#### Parameters
-- schema: RJSFSchema - The schema object to check
+- schema: S - The schema object to check
#### Returns
- boolean: True if additional items is allowed, otherwise false
@@ -43,14 +43,14 @@ Otherwise, the string is wrapped by `Number()` and if that result is not `NaN`,
#### Returns
- undefined | null | string | number: The `value` converted to a number when appropriate, otherwise the `value`
-### canExpand
()
+### canExpand()
Checks whether the field described by `schema`, having the `uiSchema` and `formData` supports expanding.
The UI for the field can expand if it has additional properties, is not forced as non-expandable by the `uiSchema` and the `formData` object doesn't already have `schema.maxProperties` elements.
#### Parameters
-- schema: RJSFSchema - The schema for the field that is being checked
-- [uiSchema={}]: UiSchema - The uiSchema for the field
+- schema: S - The schema for the field that is being checked
+- [uiSchema={}]: UiSchema - The uiSchema for the field
- [formData]: T - The formData for the field
#### Returns
@@ -76,28 +76,28 @@ Implements a deep equals using the `lodash.isEqualWith` function, that provides
#### Returns
- boolean: True if the `a` and `b` are deeply equal, false otherwise
-### findSchemaDefinition()
+### findSchemaDefinition()
Given the name of a `$ref` from within a schema, using the `rootSchema`, look up and return the sub-schema using the path provided by that reference.
If `#` is not the first character of the reference, or the path does not exist in the schema, then throw an Error.
Otherwise return the sub-schema. Also deals with nested `$ref`s in the sub-schema.
#### Parameters
- $ref: string - The ref string for which the schema definition is desired
-- [rootSchema={}]: RJSFSchema - The root schema in which to search for the definition
+- [rootSchema={}]: S - The root schema in which to search for the definition
#### Returns
-- RJSFSchema: The sub-schema within the `rootSchema` which matches the `$ref` if it exists
+- S: The sub-schema within the `rootSchema` which matches the `$ref` if it exists
#### Throws
- Error indicating that no schema for that reference exists
-### getInputProps()
+### getInputProps()
Using the `schema`, `defaultType` and `options`, extract out the props for the - The UI Options for the field provided by the widget
+- [options={}]: UIOptionsType - The UI Options for the field provided by the widget
- [autoDefaultStepAny=true]: boolean - Determines whether to auto-default step=any when the type is number and no step
#### Returns
- InputPropsType: The extracted `InputPropsType` object
@@ -112,54 +112,54 @@ If the type is not explicitly defined, then an attempt is made to infer it from
- type is an array with a length of 2 and one type is 'null': Returns the other type
#### Parameters
-- schema: RJSFSchema - The schema for which to get the type
+- schema: S - The schema for which to get the type
#### Returns
- string | string[] | undefined: The type of the schema
-### getSubmitButtonOptions()
+### getSubmitButtonOptions()
Extracts any `ui:submitButtonOptions` from the `uiSchema` and merges them onto the `DEFAULT_OPTIONS`
#### Parameters
-- [uiSchema={}]: UiSchema - the UI Schema from which to extract submit button props
+- [uiSchema={}]: UiSchema - the UI Schema from which to extract submit button props
#### Returns
- UISchemaSubmitButtonOptions: The merging of the `DEFAULT_OPTIONS` with any custom ones
-### getUiOptions()
+### getUiOptions()
Get all passed options from ui:options, and ui:, returning them in an object with the `ui:` stripped off.
#### Parameters
-- [uiSchema={}]: UiSchema - The UI Schema from which to get any `ui:xxx` options
+- [uiSchema={}]: UiSchema - The UI Schema from which to get any `ui:xxx` options
#### Returns
-- UIOptionsType: An object containing all of the `ui:xxx` options with the stripped off
+- UIOptionsType An object containing all of the `ui:xxx` options with the stripped off
-### getTemplate, T = any, F = any>()
+### getTemplate, T = any, F = any>()
Returns the template with the given `name` from either the `uiSchema` if it is defined or from the `registry`
otherwise. NOTE, since `ButtonTemplates` are not overridden in `uiSchema` only those in the `registry` are returned.
#### Parameters
- name: Name - The name of the template to fetch, restricted to the keys of `TemplatesType`
-- registry: Registry - The `Registry` from which to read the template
-- [uiOptions={}]: UIOptionsType - The `UIOptionsType` from which to read an alternate template
+- registry: Registry - The `Registry` from which to read the template
+- [uiOptions={}]: UIOptionsType - The `UIOptionsType` from which to read an alternate template
#### Returns
-- TemplatesType[Name] - The template from either the `uiSchema` or `registry` for the `name`
+- TemplatesType[Name] - The template from either the `uiSchema` or `registry` for the `name`
-### getWidget()
+### getWidget()
Given a schema representing a field to render and either the name or actual `Widget` implementation, returns the
React component that is used to render the widget. If the `widget` is already a React component, then it is wrapped
with a `MergedWidget`. Otherwise an attempt is made to look up the widget inside of the `registeredWidgets` map based
on the schema type and `widget` name. If no widget component can be found an `Error` is thrown.
#### Parameters
-- schema: RJSFSchema - The schema for the field
-- widget: Widget | string - Either the name of the widget OR a `Widget` implementation to use
-- [registeredWidgets={}]: RegistryWidgetsType - A registry of widget name to `Widget` implementation
+- schema: S - The schema for the field
+- widget: Widget | string - Either the name of the widget OR a `Widget` implementation to use
+- [registeredWidgets={}]: RegistryWidgetsType - A registry of widget name to `Widget` implementation
#### Returns
-- Widget: The `Widget` component to use
+- Widget: The `Widget` component to use
#### Throws
- An error if there is no `Widget` component that can be returned
@@ -174,42 +174,42 @@ create a schema, it is useful to know what type to use based on the data we are
#### Returns
- string: The best guess for the object type
-### hasWidget()
+### hasWidget()
Detects whether the `widget` exists for the `schema` with the associated `registryWidgets` and returns true if it does, or false if it doesn't.
#### Parameters
-- schema: RJSFSchema - The schema for the field
-- widget: Widget | string - Either the name of the widget OR a `Widget` implementation to use
-- [registeredWidgets={}]: RegistryWidgetsType - A registry of widget name to `Widget` implementation
+- schema: S - The schema for the field
+- widget: Widget | string - Either the name of the widget OR a `Widget` implementation to use
+- [registeredWidgets={}]: RegistryWidgetsType - A registry of widget name to `Widget` implementation
#### Returns
- boolean: True if the widget exists, false otherwise
-### isConstant()
+### isConstant()
This function checks if the given `schema` matches a single constant value.
This happens when either the schema has an `enum` array with a single value or there is a `const` defined.
#### Parameters
-- schema: RJSFSchema - The schema for a field
+- schema: S - The schema for a field
#### Returns
- boolean: True if the `schema` has a single constant value, false otherwise
-### isCustomWidget()
+### isCustomWidget()
Checks to see if the `uiSchema` contains the `widget` field and that the widget is not `hidden`
#### Parameters
-- uiSchema: UiSchema - The UI Schema from which to detect if it is customized
+- uiSchema: UiSchema - The UI Schema from which to detect if it is customized
#### Returns
- boolean: True if the `uiSchema` describes a custom widget, false otherwise
-### isFixedItems()
+### isFixedItems()
Detects whether the given `schema` contains fixed items.
This is the case when `schema.items` is a non-empty array that only contains objects.
#### Parameters
-- schema: RJSFSchema - The schema in which to check for fixed items
+- schema: S - The schema in which to check for fixed items
#### Returns
- boolean: True if there are fixed items in the schema, false otherwise
@@ -233,7 +233,7 @@ Converts a local Date string into a UTC date string
#### Returns
- string | undefined: A UTC date string if `dateString` is truthy, otherwise undefined
-### mergeDefaultsWithFormData()
+### mergeDefaultsWithFormData()
Merges the `defaults` object of type `T` into the `formData` of type `T`
When merging defaults and form data, we want to merge in this specific way:
@@ -272,7 +272,7 @@ The difference between mergeSchemas and mergeObjects is that mergeSchemas only c
#### Returns
- GenericObjectType: The merged schema object
-### optionsList()
+### optionsList()
Gets the list of options from the schema. If the schema has an enum list, then those enum values are returned.
The labels for the options will be extracted from the non-standard `enumNames` if it exists otherwise will be the same as the `value`.
If the schema has a `oneOf` or `anyOf`, then the value is the list of `const` values from the schema and the label is either the `schema.title` or the value.
@@ -280,10 +280,10 @@ If the schema has a `oneOf` or `anyOf`, then the value is the list of `const` va
NOTE: `enumNames` is deprecated and may be removed in a future major version of RJSF.
#### Parameters
-- schema: RJSFSchema - The schema from which to extract the options list
+- schema: S - The schema from which to extract the options list
#### Returns
-- { schema?: RJSFSchema, label: string, value: any }: The list of options from the schema
+- { schema?: S, label: string, value: any }: The list of options from the schema
### orderProperties()
Given a list of `properties` and an `order` list, returns a list that contains the `properties` ordered correctly.
@@ -324,24 +324,24 @@ Parses the `dateString` into a `DateObject`, including the time information when
#### Throws
- Error when the date cannot be parsed from the string
-### processSelectValue()
+### processSelectValue()
Returns the real value for a select widget due to a silly limitation in the DOM which causes option change event values to always be retrieved as strings.
Uses the `schema` to help determine the value's true type.
If the value is an empty string, then the `emptyValue` from the `options` is returned, falling back to undefined.
#### Parameters
-- schema: RJSFSchema - The schema to used to determine the value's true type
+- schema: S - The schema to used to determine the value's true type
- [value]: any - The value to convert
-- [options]: UIOptionsType - The UIOptionsType from which to potentially extract the `emptyValue`
+- [options]: UIOptionsType - The UIOptionsType from which to potentially extract the `emptyValue`
#### Returns
- string | boolean | number | string[] | boolean[] | number[] | undefined: The `value` converted to the proper type
-### rangeSpec()
+### rangeSpec()
Extracts the range spec information `{ step?: number, min?: number, max?: number }` that can be spread onto an HTML input from the range analog in the schema `{ multipleOf?: number, minimum?: number, maximum?: number }`.
#### Parameters
-- schema: RJSFSchema - The schema from which to extract the range spec
+- schema: S - The schema from which to extract the range spec
#### Returns
- RangeSpecType: A range specification from the schema
@@ -354,7 +354,7 @@ Check to see if a `schema` specifies that a value must be true. This happens whe
- `schema.allOf` has at least one value which recursively returns true
#### Parameters
-- schema: RJSFSchema - The schema to check
+- schema: S - The schema to check
#### Returns
- boolean: True if the schema specifies a value that must be true, false otherwise
@@ -371,12 +371,12 @@ If either of those two sets are not the same, then the component should be reren
#### Returns
- True if boolean: the component should be re-rendered, false otherwise
-### toConstant()
+### toConstant()
Returns the constant value from the schema when it is either a single value enum or has a const key.
Otherwise throws an error.
#### Parameters
-- schema: RJSFSchema - The schema from which to obtain the constant value
+- schema: S - The schema from which to obtain the constant value
#### Returns
- string | number | boolean: The constant value for the schema
@@ -406,111 +406,111 @@ Converts a UTC date string into a local Date format
## Validator-based utility functions
-### getDefaultFormState()
+### getDefaultFormState()
Returns the superset of `formData` that includes the given set updated to include any missing fields that have computed to have defaults provided in the `schema`.
#### Parameters
-- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
-- theSchema: RJSFSchema - The schema for which the default state is desired
+- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
+- theSchema: S - The schema for which the default state is desired
- [formData]: T - The current formData, if any, onto which to provide any missing defaults
-- [rootSchema]: RJSFSchema - The root schema, used to primarily to look up `$ref`s
+- [rootSchema]: S - The root schema, used to primarily to look up `$ref`s
- [includeUndefinedValues=false]: boolean - Optional flag, if true, cause undefined values to be added as defaults
#### Returns
- T: The resulting `formData` with all the defaults provided
-### getDisplayLabel()
+### getDisplayLabel()
Determines whether the combination of `schema` and `uiSchema` properties indicates that the label for the `schema` should be displayed in a UI.
#### Parameters
-- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
-- schema: RJSFSchema - The schema for which the display label flag is desired
-- [uiSchema={}]: UiSchema - The UI schema from which to derive potentially displayable information
-- [rootSchema]: RJSFSchema - The root schema, used to primarily to look up `$ref`s
+- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
+- schema: S - The schema for which the display label flag is desired
+- [uiSchema={}]: UiSchema - The UI schema from which to derive potentially displayable information
+- [rootSchema]: S - The root schema, used to primarily to look up `$ref`s
#### Returns
- boolean: True if the label should be displayed or false if it should not
-### getMatchingOption()
+### getMatchingOption()
Given the `formData` and list of `options`, attempts to find the index of the option that best matches the data.
#### Parameters
-- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
+- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
- formData: T | undefined - The current formData, if any, used to figure out a match
-- options: RJSFSchema[] - The list of options to find a matching options from
-- rootSchema: RJSFSchema - The root schema, used to primarily to look up `$ref`s
+- options: S[] - The list of options to find a matching options from
+- rootSchema: S - The root schema, used to primarily to look up `$ref`s
#### Returns
- number: The index of the matched option or 0 if none is available
-### isFilesArray()
+### isFilesArray()
Checks to see if the `schema` and `uiSchema` combination represents an array of files
#### Parameters
-- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
-- schema: RJSFSchema - The schema for which check for array of files flag is desired
-- [uiSchema={}]: UiSchema - The UI schema from which to check the widget
-- [rootSchema]: RJSFSchema - The root schema, used to primarily to look up `$ref`s
+- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
+- schema: S - The schema for which check for array of files flag is desired
+- [uiSchema={}]: UiSchema - The UI schema from which to check the widget
+- [rootSchema]: S - The root schema, used to primarily to look up `$ref`s
#### Returns
- boolean: True if schema/uiSchema contains an array of files, otherwise false
-### isMultiSelect()
+### isMultiSelect()
Checks to see if the `schema` combination represents a multi-select
#### Parameters
-- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
-- schema: RJSFSchema - The schema for which check for a multi-select flag is desired
-- [rootSchema]: RJSFSchema - The root schema, used to primarily to look up `$ref`s
+- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
+- schema: S - The schema for which check for a multi-select flag is desired
+- [rootSchema]: S - The root schema, used to primarily to look up `$ref`s
#### Returns
- boolean: True if schema contains a multi-select, otherwise false
-### isSelect()
+### isSelect()
Checks to see if the `schema` combination represents a select
#### Parameters
-- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
-- theSchema: RJSFSchema - The schema for which check for a select flag is desired
-- [rootSchema]: RJSFSchema - The root schema, used to primarily to look up `$ref`s
+- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
+- theSchema: S - The schema for which check for a select flag is desired
+- [rootSchema]: S - The root schema, used to primarily to look up `$ref`s
#### Returns
- boolean: True if schema contains a select, otherwise false
-### mergeValidationData()
+### mergeValidationData()
Merges the errors in `additionalErrorSchema` into the existing `validationData` by combining the hierarchies in the two `ErrorSchema`s and then appending the error list from the `additionalErrorSchema` obtained by calling `validator.toErrorList()` onto the `errors` in the `validationData`.
If no `additionalErrorSchema` is passed, then `validationData` is returned.
#### Parameters
-- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used to convert an ErrorSchema to a list of errors
+- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used to convert an ErrorSchema to a list of errors
- validationData: ValidationData - The current `ValidationData` into which to merge the additional errors
- [additionalErrorSchema]: ErrorSchema - The additional set of errors in an `ErrorSchema`
#### Returns
- ValidationData: The `validationData` with the additional errors from `additionalErrorSchema` merged into it, if provided.
-### retrieveSchema()
+### retrieveSchema()
Retrieves an expanded schema that has had all of its conditions, additional properties, references and dependencies
resolved and merged into the `schema` given a `validator`, `rootSchema` and `rawFormData` that is used to do the
potentially recursive resolution.
#### Parameters
-- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be forwarded to all the APIs
-- schema: RJSFSchema - The schema for which retrieving a schema is desired
-- [rootSchema={}]: RJSFSchema - The root schema that will be forwarded to all the APIs
+- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be forwarded to all the APIs
+- schema: S - The schema for which retrieving a schema is desired
+- [rootSchema={}]: S - The root schema that will be forwarded to all the APIs
- [rawFormData]: T - The current formData, if any, to assist retrieving a schema
#### Returns
- RJSFSchema: The schema having its conditions, additional properties, references and dependencies resolved
-### toIdSchema()
+### toIdSchema()
Generates an `IdSchema` object for the `schema`, recursively
#### Parameters
-- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
-- schema: RJSFSchema - The schema for which the `IdSchema` is desired
+- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
+- schema: S - The schema for which the `IdSchema` is desired
- [id]: string | null - The base id for the schema
-- [rootSchema]: RJSFSchema - The root schema, used to primarily to look up `$ref`s
+- [rootSchema]: S - The root schema, used to primarily to look up `$ref`s
- [formData]: T - The current formData, if any, to assist retrieving a schema
- [idPrefix='root']: string - The prefix to use for the id
- [idSeparator='_']: string - The separator to use for the path segments in the id
@@ -518,14 +518,14 @@ Generates an `IdSchema` object for the `schema`, recursively
#### Returns
- IDSchema: The `IdSchema` object for the `schema`
-### toPathSchema()
+### toPathSchema()
Generates an `PathSchema` object for the `schema`, recursively
#### Parameters
-- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
-- schema: RJSFSchema - The schema for which the `PathSchema` is desired
+- validator: ValidatorType - An implementation of the `ValidatorType` interface that will be used when necessary
+- schema: S - The schema for which the `PathSchema` is desired
- [name='']: string - The base name for the schema
-- [rootSchema]: RJSFSchema - The root schema, used to primarily to look up `$ref`s
+- [rootSchema]: S - The root schema, used to primarily to look up `$ref`s
- [formData]: T - The current formData, if any, to assist retrieving a schema
#### Returns
@@ -533,13 +533,13 @@ Generates an `PathSchema` object for the `schema`, recursively
## Schema utils creation function
-### createSchemaUtils()
+### createSchemaUtils()
Creates a `SchemaUtilsType` interface that is based around the given `validator` and `rootSchema` parameters.
The resulting interface implementation will forward the `validator` and `rootSchema` to all the wrapped APIs.
#### Parameters
-- validator: ValidatorType - an implementation of the `ValidatorType` interface that will be forwarded to all the APIs
-- rootSchema: RJSFSchema - The root schema that will be forwarded to all the APIs
+- validator: ValidatorType - an implementation of the `ValidatorType` interface that will be forwarded to all the APIs
+- rootSchema: S - The root schema that will be forwarded to all the APIs
#### Returns
-- SchemaUtilsType - An implementation of a `SchemaUtilsType` interface
+- SchemaUtilsType - An implementation of a `SchemaUtilsType` interface
diff --git a/docs/contributing.md b/docs/contributing.md
index 4d4e508301..e561782472 100644
--- a/docs/contributing.md
+++ b/docs/contributing.md
@@ -56,7 +56,7 @@ The full report can be seen by opening `./coverage/lcov-report/index.html`.
#### Utils and validator-ajvX code coverage
-100% code coverage is required by the `@rjsf/utils` and `@rjsf/validator-ajv6` and `@rjsf/validator-ajv8` tests.
+100% code coverage is required by the `@rjsf/utils` and `@rjsf/validator-ajv8` and `@rjsf/validator-ajv8` tests.
If you make changes to those libraries, you will have to maintain that coverage, otherwise the tests will fail.
## Releasing
diff --git a/docs/index.md b/docs/index.md
index 47982c9e3f..e5022f1d41 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -22,16 +22,16 @@ First install the dependencies from npm:
$ npm install @rjsf/core @rjsf/utils --save
```
-As of version 5, you will also need to select and install a validator implementation (such as `@rjsf/validator-ajv6`):
+As of version 5, you will also need to select and install a validator implementation (such as `@rjsf/validator-ajv8`):
```bash
-$ npm install @rjsf/validator-ajv6 --save
+$ npm install @rjsf/validator-ajv8 --save
````
Then import the dependency as follows:
```js
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import Form from "@rjsf/core";
```
@@ -57,10 +57,11 @@ const {default: Form} = JSONSchemaForm;
## Usage
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
title: "Todo",
type: "object",
required: ["title"],
diff --git a/docs/quickstart.md b/docs/quickstart.md
index fec068831c..0f03d62e80 100644
--- a/docs/quickstart.md
+++ b/docs/quickstart.md
@@ -1,16 +1,17 @@
# Quickstart
Let's walk through setup of a form after installing the dependency properly.
-NOTE: As of version 5, the `Form` now requires you to provide a `validator` implementation. We recommend the one from `@rjsf/validator-ajv6`.
+NOTE: As of version 5, the `Form` now requires you to provide a `validator` implementation. We recommend the one from `@rjsf/validator-ajv8`.
## Form schema
First, specify a schema using the [JSON Schema specification](https://json-schema.org/). The below schema renders a single string field:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
title: "Test form",
type: "string"
};
@@ -22,10 +23,11 @@ render((
You can also render an object with multiple fields with the below schema:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
title: "Test form",
type: "object",
properties: {
@@ -51,15 +53,16 @@ The uiSchema is used to add more customization to the form's look and feel. Use
attribute of the uiSchema to add a custom CSS class name to the form:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
title: "Test form",
type: "string"
};
-const uiSchema = {
+const uiSchema: UiSchema = {
classNames: "custom-css-class"
};
@@ -72,10 +75,11 @@ To customize object fields in the uiSchema, the structure of the
uiSchema should be `{key: value}`, where `key` is the property key and `value` is an
object with the uiSchema configuration for that particular property. For example:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
title: "Test form",
type: "object",
properties: {
@@ -88,7 +92,7 @@ const schema = {
}
};
-const uiSchema = {
+const uiSchema: UiSchema = {
name: {
classNames: "custom-class-name"
},
@@ -106,10 +110,11 @@ render((
Often you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "object",
properties: {
title: {
@@ -144,8 +149,8 @@ You can use event handlers such as `onChange`, `onError`, `onSubmit`, `onFocus`,
By default, `` is an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html). To make it a controlled component, use the
`onChange` and `formData` props as in the below example:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import validator from "@rjsf/validator-ajv8";
const App = () => {
const [formData, setFormData] = React.useState(null);
diff --git a/docs/usage/arrays.md b/docs/usage/arrays.md
index 761f03abaf..1ef6d628b7 100644
--- a/docs/usage/arrays.md
+++ b/docs/usage/arrays.md
@@ -6,10 +6,11 @@ Arrays are defined with a type equal to `array`, and array items' schemas are sp
Arrays of a single field type can be specified as follows:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
items: {
type: "string"
@@ -25,10 +26,11 @@ render((
Arrays of objects can be specified as follows:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
items: {
type: "object",
@@ -49,10 +51,11 @@ render((
To specify a uiSchema that applies to array items, specify the uiSchema value within the `items` property:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
items: {
type: "string"
@@ -74,10 +77,11 @@ render((
The `additionalItems` keyword allows the user to add additional items of a given schema. For example:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
items: {
type: "string"
@@ -98,17 +102,18 @@ render((
Array items are orderable by default, and react-jsonschema-form renders move up/down buttons alongside them. The uiSchema `orderable` options allows you to disable ordering:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
items: {
type: "string"
}
};
-const uiSchema = {
+const uiSchema: UiSchema = {
"ui:options": {
orderable: false
}
@@ -123,17 +128,18 @@ render((
If either `items` or `additionalItems` contains a schema object, an add button for new items is shown by default. You can turn this off with the `addable` option in `uiSchema`:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
items: {
type: "string"
}
};
-const uiSchema = {
+const uiSchema: UiSchema = {
"ui:options": {
addable: false
}
@@ -148,17 +154,18 @@ render((
A remove button is shown by default for an item if `items` contains a schema object, or the item is an `additionalItems` instance. You can turn this off with the `removable` option in `uiSchema`:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
items: {
type: "string"
}
};
-const uiSchema = {
+const uiSchema: UiSchema = {
"ui:options": {
removable: false
}
@@ -177,9 +184,10 @@ The default behavior for array fields is a list of text inputs with add/remove b
Example:
```jsx
-import validator from "@rjsf/validator-ajv6";
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
title: "A multiple-choice list",
items: {
@@ -196,10 +204,11 @@ render((
By default, this will render a multiple select box. If you prefer a list of checkboxes, just set the uiSchema `ui:widget` directive to `checkboxes` for that field:
-```js
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
title: "A multiple-choice list",
items: {
@@ -209,7 +218,7 @@ const schema = {
uniqueItems: true
};
-const uiSchema = {
+const uiSchema: UiSchema = {
"ui:widget": "checkboxes"
};
@@ -224,8 +233,9 @@ In addition to [ArrayFieldTemplate](../advanced-customization/custom-templates.m
Example:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
const CustomSelectComponent = props => {
return (
@@ -239,7 +249,7 @@ const CustomSelectComponent = props => {
);
};
-const schema = {
+const schema: RJSFSchema = {
type: "array",
title: "A multiple-choice list",
items: {
@@ -247,7 +257,7 @@ const schema = {
},
};
-const uiSchema = {
+const uiSchema: UiSchema = {
"ui:widget": "CustomSelect"
};
@@ -266,10 +276,11 @@ Note that when an array property is marked as `required`, an empty array is cons
Example:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
minItems: 2,
title: "A multiple-choice list",
@@ -292,10 +303,11 @@ You can also specify the maximum number of items in an array using the `maxItems
By default, checkboxes are stacked. If you prefer them inline, set the `inline` property to `true`:
-```js
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "array",
minItems: 2,
title: "A multiple-choice list",
@@ -306,7 +318,7 @@ const schema = {
uniqueItems: true
};
-const uiSchema = {
+const uiSchema: UiSchema = {
"ui:widget": "checkboxes",
"ui:options": {
inline: true
diff --git a/docs/usage/definitions.md b/docs/usage/definitions.md
index b5369f8ac4..502df2cca5 100644
--- a/docs/usage/definitions.md
+++ b/docs/usage/definitions.md
@@ -2,10 +2,11 @@
This library partially supports [inline schema definition dereferencing](http://json-schema.org/draft/2019-09/json-schema-core.html#ref), which is Barbarian for *avoiding to copy and paste commonly used field schemas*:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
"definitions": {
"address": {
"type": "object",
diff --git a/docs/usage/dependencies.md b/docs/usage/dependencies.md
index feeaa75f1b..c4e359d34f 100644
--- a/docs/usage/dependencies.md
+++ b/docs/usage/dependencies.md
@@ -10,10 +10,11 @@ This library supports conditionally making fields required based on the presence
In the following example the `billing_address` field will be required if `credit_card` is defined.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
"type": "object",
"properties": {
@@ -39,10 +40,11 @@ render((
In the following example the `billing_address` field will be required if `credit_card` is defined and the `credit_card`
field will be required if `billing_address` is defined, making them both required if either is defined.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
"type": "object",
"properties": {
@@ -72,10 +74,11 @@ This library also supports modifying portions of a schema based on form data.
### Conditional
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
"type": "object",
"properties": {
@@ -108,10 +111,11 @@ In this example the `billing_address` field will be displayed in the form if `cr
The JSON Schema standard says that the dependency is triggered if the property is present. However, sometimes it's useful to have more sophisticated rules guiding the application of the dependency. For example, maybe you have three possible values for a field, and each one should lead to adding a different question. For this, we support a very restricted use of the `oneOf` keyword.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
"title": "Person",
"type": "object",
"properties": {
diff --git a/docs/usage/objects.md b/docs/usage/objects.md
index dc0ad9e353..f1a4e4a5f6 100644
--- a/docs/usage/objects.md
+++ b/docs/usage/objects.md
@@ -4,10 +4,11 @@
Objects are defined with a type equal to `object` and properties specified in the `properties` keyword.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
"title": "My title",
"description": "My description",
"type": "object",
@@ -30,10 +31,11 @@ render((
You can specify which properties are required using the `required` attribute:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
"title": "My title",
"description": "My description",
"type": "object",
@@ -57,10 +59,11 @@ render((
Since the order of object properties in Javascript and JSON is not guaranteed, the `uiSchema` object spec allows you to define the order in which properties are rendered using the `ui:order` property:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "object",
properties: {
foo: {type: "string"},
@@ -68,7 +71,7 @@ const schema = {
}
};
-const uiSchema = {
+const uiSchema: UiSchema = {
"ui:order": ["bar", "foo"]
};
@@ -79,8 +82,10 @@ render((
If a guaranteed fixed order is only important for some fields, you can insert a wildcard `"*"` item in your `ui:order` definition. All fields that are not referenced explicitly anywhere in the list will be rendered at that point:
-```js
-const uiSchema = {
+```ts
+import { UiSchema } from "@rjsf/utils";
+
+const uiSchema: UiSchema = {
"ui:order": ["bar", "*"]
};
```
@@ -89,10 +94,11 @@ const uiSchema = {
The `additionalProperties` keyword allows the user to add properties with arbitrary key names. Set this keyword equal to a schema object:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
"type": "object",
"properties": {
"name": {
@@ -118,8 +124,10 @@ You can also define `uiSchema` options for `additionalProperties` by setting the
You can turn support for `additionalProperties` off with the `expandable` option in `uiSchema`:
-```js
-const uiSchema = {
+```ts
+import { UiSchema } from "@rjsf/utils";
+
+const uiSchema: UiSchema = {
"ui:options": {
expandable: false
}
diff --git a/docs/usage/oneof.md b/docs/usage/oneof.md
index 46d4a8a5dc..094c094a79 100644
--- a/docs/usage/oneof.md
+++ b/docs/usage/oneof.md
@@ -8,10 +8,11 @@ react-jsonschema-form supports custom widgets for oneOf, anyOf, and allOf.
## oneOf
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "object",
oneOf: [
{
@@ -40,10 +41,11 @@ render((
## anyOf
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "object",
anyOf: [
{
@@ -76,10 +78,11 @@ render((
When `allOf` is specified in a schema, react-jsonschema-form uses the [json-schema-merge-allof](https://github.com/mokkabonna/json-schema-merge-allof) library to merge the specified subschemas to create a combined subschema that is valid. For example, the below schema evaluates to a combined subschema of `{type: "boolean"}`:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
title: "Field",
allOf: [
{
diff --git a/docs/usage/single.md b/docs/usage/single.md
index 22b2fae7de..462becf3fb 100644
--- a/docs/usage/single.md
+++ b/docs/usage/single.md
@@ -14,10 +14,11 @@ The base field types in JSON Schema include:
Here is an example of a string field:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "string"
};
@@ -30,10 +31,11 @@ render((
Fields can have titles and descriptions specified by the `title` keyword in the schema and `description` keyword in the schema, respectively. These two can also be overriden by the `ui:title` and `ui:description` keywords in the uiSchema.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
title: "My form",
description: "My description",
type: "string"
@@ -48,10 +50,11 @@ render((
All base schema types support the `enum` attribute, which restricts the user to select among a list of options. For example:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "string",
enum: ["one", "two", "three"]
};
@@ -65,10 +68,11 @@ render((
JSON Schema supports the following approaches to enumerations using `oneOf`/`anyOf`; react-jsonschema-form supports it as well.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
"type": "number",
"anyOf": [
{
@@ -100,8 +104,10 @@ render((
), document.getElementById("app"));
```
-```jsx
-const schema = {
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+
+const schema: RJSFSchema = {
"type": "number",
"oneOf": [
{"const": 1, "title": "one"},
@@ -117,9 +123,11 @@ render((
In your JSON Schema, you may also specify `enumNames`, a non-standard field which RJSF can use to label an enumeration. **This behavior is deprecated and may be removed in a future major release of RJSF.**
-```jsx
-import validator from "@rjsf/validator-ajv6";
-const schema = {
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
+
+const schema: RJSFSchema = {
type: "number",
enum: [1, 2, 3],
enumNames: ["one", "two", "three"]
@@ -133,15 +141,16 @@ render((
To disable an option, use the `ui:enumDisabled` property in the uiSchema.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "boolean",
enum: [true, false]
};
-const uiSchema={
+const uiSchema: UiSchema = {
"ui:enumDisabled": [true],
};
@@ -155,10 +164,11 @@ render((
JSON Schema supports specifying multiple types in an array; however, react-jsonschema-form only supports a restricted subset of this -- nullable types, in which an element is either a given type or equal to null.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: ["string", "null"]
};
diff --git a/docs/usage/validation.md b/docs/usage/validation.md
index f04b87960b..12cfe4efbb 100644
--- a/docs/usage/validation.md
+++ b/docs/usage/validation.md
@@ -5,6 +5,8 @@ When the form is submitted, the form data is validated to conform to the given J
As of version 5, as a result of decoupling the validation implementation from the `Form`, a `validator` implementation is required to be passed to all `Form`s.
React Json Schema Form provides a default `@rjsf/validator-ajv6` implementation that uses version 6 of the [ajv](https://github.com/ajv-validator/ajv) validator.
+> NOTE: The ajv6 validator has been deprecated from the outset in favor of the `@rjsf/validator-ajv8` and is provided primarily to assist in code migrations
+
It also provides a new `@rjsf/validator-ajv8` implementation that uses version 8 of the [ajv](https://github.com/ajv-validator/ajv) validator.
The error messages generated by this new validator differ from those provided by the original validator due to it using a newer version.
If you depend on having specifically formatted messages, then using this validator would constitute a breaking change for you.
@@ -21,9 +23,9 @@ Be warned that this is an expensive strategy, with possibly strong impact on per
```tsx
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
-const schema: StrictRJSFSchema = {
+const schema: RJSFSchema = {
type: ["string"],
const: "test"
};
@@ -45,7 +47,7 @@ If you have provided an `onError` callback it will be called with the list of er
```tsx
import { createRef } from "react"
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
const formRef = createRef();
const onError = (errors) => alert(errors);
@@ -69,7 +71,7 @@ By default, the form uses HTML5 validation. This may cause unintuitive results b
```tsx
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
const schema: RJSFSchema = {
type: "object",
@@ -95,7 +97,7 @@ This is especially useful when the validation depends on several interdependent
```tsx
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
function customValidate(formData, errors) {
if (formData.pass1 !== formData.pass2) {
@@ -129,7 +131,7 @@ If you need to change these messages or make any other modifications to the erro
```tsx
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
function transformErrors(errors) {
return errors.map(error => {
@@ -174,7 +176,7 @@ An error list template is basically a React stateless component being passed err
```tsx
import { RJSFSchema, ErrorListProps } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
function ErrorListTemplate(props: ErrorListProps) {
const { errors } = props;
@@ -240,8 +242,8 @@ For example:
}
```
-Note that react-jsonschema-form only supports the latest version of JSON Schema, draft-07, by default.
-To support additional meta schemas, you can create and pass to the `Form` component a customized `@rjsf/validator-ajv6`:
+Note that react-jsonschema-form supports the latest version of JSON Schema, draft-07, by default.
+To support additional meta schemas, you can create and pass to the `Form` component a customized `@rjsf/validator-ajv8`:
### additionalMetaSchemas
@@ -268,15 +270,32 @@ const schema: RJSFSchema = {
return ();
```
+NOTE: This syntax works only for the `@rjsf/validator-ajv6` validator; if you only use the `draft-04` schema and you want to use the `@rjsf/validator-ajv8` you can do the following:
+
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import { customizeValidator } from '@rjsf/validator-ajv8';
+import AjvDraft04 from "ajv-draft-04";
+
+const validator = customizeValidator({ AjvClass: AjvDraft04 });
+
+const schema: RJSFSchema = {
+ "$schema": "http://json-schema.org/draft-04/schema#",
+ type: "string"
+};
+
+return ();
+```
+
### customFormats
[Pre-defined semantic formats](https://json-schema.org/draft/2019-09/json-schema-validation.html#rfc.section.7) are limited.
react-jsonschema-form adds two formats, `color` and `data-url`, to support certain [alternative widgets](../usage/widgets.md).
-To add formats of your own, you can create and pass to the `Form` component a customized `@rjsf/validator-ajv6`:
+To add formats of your own, you can create and pass to the `Form` component a customized `@rjsf/validator-ajv8`:
```tsx
import { RJSFSchema } from "@rjsf/utils";
-import { customizeValidator } from '@rjsf/validator-ajv6';
+import { customizeValidator } from '@rjsf/validator-ajv8';
const schema: RJSFSchema = {
type: 'string',
@@ -304,7 +323,7 @@ For example, a request could be made to some backend when the user submits the f
```tsx
import { RJSFSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
const schema: RJSFSchema = {
type: "object",
@@ -343,12 +362,12 @@ An important note is that these errors are "display only" and will not block the
### ajvOptionsOverrides
-In version 5, with the advent of the decoupling of the validation implementation from the `Form`, it is now possible to provide additional options to the `ajv6` instance used within `@rjsf/validator-ajv6`.
+In version 5, with the advent of the decoupling of the validation implementation from the `Form`, it is now possible to provide additional options to the `ajv6` instance used within `@rjsf/validator-ajv8`.
For instance, if you need more information from `ajv` about errors via the `verbose` option, now you can turn it on!
```tsx
import { RJSFSchema } from "@rjsf/utils";
-import { customizeValidator } from '@rjsf/validator-ajv6';
+import { customizeValidator } from '@rjsf/validator-ajv8';
const schema: RJSFSchema = {
type: 'string',
diff --git a/docs/usage/widgets.md b/docs/usage/widgets.md
index 01c4cdead9..aaf39c1e49 100644
--- a/docs/usage/widgets.md
+++ b/docs/usage/widgets.md
@@ -4,10 +4,11 @@ The uiSchema `ui:widget` property tells the form which UI widget should be used
Example:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "object",
properties: {
done: {
@@ -16,7 +17,7 @@ const schema = {
}
};
-const uiSchema = {
+const uiSchema: UiSchema = {
done: {
"ui:widget": "radio" // could also be "select"
}
@@ -92,14 +93,15 @@ Please note that, even though they are standardized, `datetime-local` and `date`
You can customize the list of years displayed in the `year` dropdown by providing a ``yearsRange`` property to ``ui:options`` in your uiSchema. Its also possible to remove the `Now` and `Clear` buttons with the `hideNowButton` and `hideClearButton` options.
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "string"
};
-const uiSchema = {
+const uiSchema: UiSchema = {
"ui:widget": "alt-datetime",
"ui:options": {
yearsRange: [1980, 2030],
@@ -127,17 +129,18 @@ render((
It's possible to use a hidden widget for a field by setting its `ui:widget` uiSchema directive to `hidden`:
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "object",
properties: {
foo: {type: "boolean"}
}
};
-const uiSchema = {
+const uiSchema: UiSchema = {
foo: {"ui:widget": "hidden"}
};
@@ -158,10 +161,11 @@ This library supports a limited form of `input[type=file]` widgets, in the sense
There are two ways to use file widgets.
1. By declaring a `string` json schema type along a `data-url` [format](#string-formats):
-```jsx
-import validator from "@rjsf/validator-ajv6";
+```tsx
+import { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
-const schema = {
+const schema: RJSFSchema = {
type: "string",
format: "data-url",
};
@@ -172,12 +176,14 @@ render((
```
2. By specifying a `ui:widget` field uiSchema directive as `file`:
-```js
-const schema = {
+```ts
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+
+const schema: RJSFSchema = {
type: "string",
};
-const uiSchema = {
+const uiSchema: UiSchema = {
"ui:widget": "file",
};
```
@@ -186,8 +192,10 @@ const uiSchema = {
Multiple files selectors are supported by defining an array of strings having `data-url` as a format:
-```js
-const schema = {
+```ts
+import { RJSFSchema } from "@rjsf/utils";
+
+const schema: RJSFSchema = {
type: "array",
items: {
type: "string",
@@ -208,13 +216,15 @@ This allows you to programmatically trigger the browser's file selector, which c
You can use the accept attribute to specify a filter for what file types the user can upload:
-```jsx
-const schema = {
+```ts
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+
+const schema: RJSFSchema = {
type: "string",
format: "data-url"
};
-const uiSchema = {
+const uiSchema: UiSchema = {
"ui:options": { accept: ".pdf" }
};
```
diff --git a/packages/antd/package.json b/packages/antd/package.json
index 92309ee010..e6f2e4ee3c 100644
--- a/packages/antd/package.json
+++ b/packages/antd/package.json
@@ -48,6 +48,7 @@
"@babel/register": "^7.18.9",
"@rjsf/core": "^5.0.0-beta.11",
"@rjsf/utils": "^5.0.0-beta.11",
+ "@rjsf/validator-ajv8": "^5.0.0-beta.11",
"@rjsf/validator-ajv6": "^5.0.0-beta.11",
"@rollup/plugin-replace": "^5.0.1",
"@types/lodash": "^4.14.186",
diff --git a/packages/antd/test/Array.test.tsx b/packages/antd/test/Array.test.tsx
index 64c1920f74..77f0b3379c 100644
--- a/packages/antd/test/Array.test.tsx
+++ b/packages/antd/test/Array.test.tsx
@@ -1,7 +1,7 @@
import React from "react";
import renderer from "react-test-renderer";
import { RJSFSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import "../__mocks__/matchMedia.mock";
import Form from "../src";
diff --git a/packages/antd/test/Form.test.tsx b/packages/antd/test/Form.test.tsx
index d59558faf0..da30a2d38f 100644
--- a/packages/antd/test/Form.test.tsx
+++ b/packages/antd/test/Form.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import renderer from "react-test-renderer";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import { RJSFSchema, ErrorSchema } from "@rjsf/utils";
import "../__mocks__/matchMedia.mock";
diff --git a/packages/antd/test/Object.test.tsx b/packages/antd/test/Object.test.tsx
index 73f58c0cb9..8fff9481e4 100644
--- a/packages/antd/test/Object.test.tsx
+++ b/packages/antd/test/Object.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import renderer from "react-test-renderer";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import { RJSFSchema } from "@rjsf/utils";
import "../__mocks__/matchMedia.mock";
diff --git a/packages/bootstrap-4/package.json b/packages/bootstrap-4/package.json
index 36b225d62d..a6b702aac4 100644
--- a/packages/bootstrap-4/package.json
+++ b/packages/bootstrap-4/package.json
@@ -46,7 +46,7 @@
"@babel/preset-react": "^7.18.6",
"@rjsf/core": "^5.0.0-beta.11",
"@rjsf/utils": "^5.0.0-beta.11",
- "@rjsf/validator-ajv6": "^5.0.0-beta.11",
+ "@rjsf/validator-ajv8": "^5.0.0-beta.11",
"@types/react": "^17.0.48",
"@types/react-dom": "^17.0.17",
"@types/react-test-renderer": "^17.0.2",
diff --git a/packages/bootstrap-4/test/AdditionalProperties.test.tsx b/packages/bootstrap-4/test/AdditionalProperties.test.tsx
index cbb03e8858..9ebeed4bb7 100644
--- a/packages/bootstrap-4/test/AdditionalProperties.test.tsx
+++ b/packages/bootstrap-4/test/AdditionalProperties.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src/index";
diff --git a/packages/bootstrap-4/test/Array.test.tsx b/packages/bootstrap-4/test/Array.test.tsx
index e8f4a5fec6..80d8eb7334 100644
--- a/packages/bootstrap-4/test/Array.test.tsx
+++ b/packages/bootstrap-4/test/Array.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src/index";
diff --git a/packages/bootstrap-4/test/Form.test.tsx b/packages/bootstrap-4/test/Form.test.tsx
index 710bd0f57b..f87dd7d222 100644
--- a/packages/bootstrap-4/test/Form.test.tsx
+++ b/packages/bootstrap-4/test/Form.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema, UiSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src/index";
diff --git a/packages/bootstrap-4/test/Object.test.tsx b/packages/bootstrap-4/test/Object.test.tsx
index 838684ac06..1952b2bcc0 100644
--- a/packages/bootstrap-4/test/Object.test.tsx
+++ b/packages/bootstrap-4/test/Object.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src/index";
diff --git a/packages/chakra-ui/package.json b/packages/chakra-ui/package.json
index 660acf7fc9..4b7a78baf6 100644
--- a/packages/chakra-ui/package.json
+++ b/packages/chakra-ui/package.json
@@ -62,7 +62,7 @@
"@emotion/styled": "^11.10.4",
"@rjsf/core": "^5.0.0-beta.11",
"@rjsf/utils": "^5.0.0-beta.11",
- "@rjsf/validator-ajv6": "^5.0.0-beta.11",
+ "@rjsf/validator-ajv8": "^5.0.0-beta.11",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@types/react-test-renderer": "^17.0.1",
diff --git a/packages/chakra-ui/test/Array.test.tsx b/packages/chakra-ui/test/Array.test.tsx
index b809d3424a..0b4f89a807 100644
--- a/packages/chakra-ui/test/Array.test.tsx
+++ b/packages/chakra-ui/test/Array.test.tsx
@@ -1,7 +1,7 @@
/** @jsx jsx */
import { jsx } from "@emotion/react";
import { RJSFSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src/index";
diff --git a/packages/chakra-ui/test/Form.test.tsx b/packages/chakra-ui/test/Form.test.tsx
index 82bf967e44..abad779764 100644
--- a/packages/chakra-ui/test/Form.test.tsx
+++ b/packages/chakra-ui/test/Form.test.tsx
@@ -2,7 +2,7 @@
import { jsx } from "@emotion/react";
import renderer from "react-test-renderer";
import { UiSchema, RJSFSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import Form from "../src/index";
diff --git a/packages/chakra-ui/test/Object.test.tsx b/packages/chakra-ui/test/Object.test.tsx
index 4f45cadd19..237bcf5a84 100644
--- a/packages/chakra-ui/test/Object.test.tsx
+++ b/packages/chakra-ui/test/Object.test.tsx
@@ -1,7 +1,7 @@
/** @jsx jsx */
import { jsx } from "@emotion/react";
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src/index";
diff --git a/packages/core/package.json b/packages/core/package.json
index f2d6c891ea..42257dda4f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -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"
},
diff --git a/packages/core/test/ArrayField_test.js b/packages/core/test/ArrayField_test.js
index efdb1c6d12..3bab538173 100644
--- a/packages/core/test/ArrayField_test.js
+++ b/packages/core/test/ArrayField_test.js
@@ -317,9 +317,7 @@ describe("ArrayField", () => {
const matches = node.querySelectorAll("#custom");
expect(matches).to.have.length.of(1);
- expect(matches[0].textContent).to.eql(
- "should NOT have fewer than 2 items"
- );
+ expect(matches[0].textContent).to.eql("must NOT have fewer than 2 items");
});
it("should contain no field in the list by default", () => {
@@ -883,15 +881,15 @@ describe("ArrayField", () => {
sinon.assert.calledWithMatch(
onChange.lastCall,
{
- errorSchema: { 1: { __errors: ["should be integer"] } },
+ errorSchema: { 1: { __errors: ["must be integer"] } },
errors: [
{
- message: "should be integer",
+ message: "must be integer",
name: "type",
params: { type: "integer" },
- property: "[1]",
+ property: ".1",
schemaPath: "#/items/type",
- stack: "[1] should be integer",
+ stack: ".1 must be integer",
},
],
formData: [1, null, 3],
@@ -902,12 +900,12 @@ describe("ArrayField", () => {
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "should be integer",
+ message: "must be integer",
name: "type",
params: { type: "integer" },
- property: "[1]",
+ property: ".1",
schemaPath: "#/items/type",
- stack: "[1] should be integer",
+ stack: ".1 must be integer",
},
]);
});
@@ -1103,12 +1101,12 @@ describe("ArrayField", () => {
sinon.assert.calledWithMatch(form.onError.lastCall, [
{
- message: "should NOT have fewer than 3 items",
+ message: "must NOT have fewer than 3 items",
name: "minItems",
params: { limit: 3 },
property: ".multipleChoicesList",
schemaPath: "#/properties/multipleChoicesList/minItems",
- stack: ".multipleChoicesList should NOT have fewer than 3 items",
+ stack: ".multipleChoicesList must NOT have fewer than 3 items",
},
]);
});
@@ -1273,7 +1271,7 @@ describe("ArrayField", () => {
const matches = node.querySelectorAll("#custom");
expect(matches).to.have.length.of(1);
expect(matches[0].textContent).to.eql(
- "should NOT have duplicate items (items ## 1 and 0 are identical)"
+ "must NOT have duplicate items (items ## 1 and 0 are identical)"
);
});
@@ -1405,7 +1403,7 @@ describe("ArrayField", () => {
const matches = node.querySelectorAll("#custom");
expect(matches).to.have.length.of(1);
expect(matches[0].textContent).to.eql(
- "should NOT have fewer than 3 items"
+ "must NOT have fewer than 3 items"
);
});
@@ -1562,9 +1560,7 @@ describe("ArrayField", () => {
const matches = node.querySelectorAll("#custom");
expect(matches).to.have.length.of(1);
- expect(matches[0].textContent).to.eql(
- "should NOT have fewer than 5 items"
- );
+ expect(matches[0].textContent).to.eql("must NOT have fewer than 5 items");
});
});
@@ -1640,12 +1636,8 @@ describe("ArrayField", () => {
const matches = node.querySelectorAll("#custom-error");
expect(matches).to.have.length.of(2);
- expect(matches[0].textContent).to.eql(
- "should NOT have fewer than 3 items"
- );
- expect(matches[1].textContent).to.eql(
- "should NOT have fewer than 2 items"
- );
+ expect(matches[0].textContent).to.eql("must NOT have fewer than 3 items");
+ expect(matches[1].textContent).to.eql("must NOT have fewer than 2 items");
});
});
@@ -2223,7 +2215,7 @@ describe("ArrayField", () => {
expect(inputs[0].id).eql("root_foo_0_bar");
expect(inputs[1].id).eql("root_foo_1_bar");
});
- it("should NOT render nested error decorated input widgets", () => {
+ it("must NOT render nested error decorated input widgets", () => {
const { node } = createFormComponent({
schema: complexSchema,
uiSchema: {
diff --git a/packages/core/test/Form_test.js b/packages/core/test/Form_test.js
index 26dd4e6c47..120df8afbc 100644
--- a/packages/core/test/Form_test.js
+++ b/packages/core/test/Form_test.js
@@ -4,7 +4,7 @@ import React, { createRef } from "react";
import { renderIntoDocument, act, Simulate } from "react-dom/test-utils";
import { render, findDOMNode } from "react-dom";
import { Portal } from "react-portal";
-import validator, { customizeValidator } from "@rjsf/validator-ajv6";
+import validator, { customizeValidator } from "@rjsf/validator-ajv8";
import Form from "../src";
import {
@@ -1332,12 +1332,12 @@ describeRepeated("Form common", (createFormComponent) => {
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "should be number",
+ message: "must be number",
name: "type",
params: { type: "number" },
property: "",
schemaPath: "#/type",
- stack: "should be number",
+ stack: "must be number",
},
]);
});
@@ -1621,7 +1621,7 @@ describeRepeated("Form common", (createFormComponent) => {
onChange.lastCall,
{
errorSchema: {
- __errors: ["should NOT be shorter than 8 characters"],
+ __errors: ["must NOT have fewer than 8 characters"],
},
},
"root"
@@ -1641,7 +1641,7 @@ describeRepeated("Form common", (createFormComponent) => {
expect(node.querySelectorAll(".field-error")).to.have.length.of(1);
expect(
node.querySelector(".field-string .error-detail").textContent
- ).eql("should NOT be shorter than 8 characters");
+ ).eql("must NOT have fewer than 8 characters");
});
});
@@ -1706,7 +1706,7 @@ describeRepeated("Form common", (createFormComponent) => {
sinon.match((value) => {
return (
value.length === 1 &&
- value[0].message === "should NOT be shorter than 8 characters"
+ value[0].message === "must NOT have fewer than 8 characters"
);
})
);
@@ -1724,12 +1724,12 @@ describeRepeated("Form common", (createFormComponent) => {
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "should NOT be shorter than 8 characters",
+ message: "must NOT have fewer than 8 characters",
name: "minLength",
params: { limit: 8 },
property: "",
schemaPath: "#/minLength",
- stack: "should NOT be shorter than 8 characters",
+ stack: "must NOT have fewer than 8 characters",
},
]);
sinon.assert.calledOnce(onError);
@@ -1757,7 +1757,7 @@ describeRepeated("Form common", (createFormComponent) => {
Simulate.submit(node);
const errorListHTML =
- 'should NOT be shorter than 8 characters ';
+ 'must NOT have fewer than 8 characters ';
const errors = node.querySelectorAll(".error-detail");
// Check for errors attached to the field
expect(errors).to.have.lengthOf(1);
@@ -1787,12 +1787,12 @@ describeRepeated("Form common", (createFormComponent) => {
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "should NOT be shorter than 8 characters",
+ message: "must NOT have fewer than 8 characters",
name: "minLength",
params: { limit: 8 },
property: "",
schemaPath: "#/minLength",
- stack: "should NOT be shorter than 8 characters",
+ stack: "must NOT have fewer than 8 characters",
},
]);
});
@@ -1803,7 +1803,7 @@ describeRepeated("Form common", (createFormComponent) => {
expect(node.querySelectorAll(".field-error")).to.have.length.of(1);
expect(
node.querySelector(".field-string .error-detail").textContent
- ).eql("should NOT be shorter than 8 characters");
+ ).eql("must NOT have fewer than 8 characters");
});
});
@@ -1823,20 +1823,20 @@ describeRepeated("Form common", (createFormComponent) => {
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "should NOT be shorter than 8 characters",
+ message: "must NOT have fewer than 8 characters",
name: "minLength",
params: { limit: 8 },
property: "",
schemaPath: "#/minLength",
- stack: "should NOT be shorter than 8 characters",
+ stack: "must NOT have fewer than 8 characters",
},
{
- message: 'should match pattern "d+"',
+ message: 'must match pattern "d+"',
name: "pattern",
params: { pattern: "d+" },
property: "",
schemaPath: "#/pattern",
- stack: 'should match pattern "d+"',
+ stack: 'must match pattern "d+"',
},
]);
});
@@ -1848,8 +1848,8 @@ describeRepeated("Form common", (createFormComponent) => {
const errors = [].map.call(liNodes, (li) => li.textContent);
expect(errors).eql([
- "should NOT be shorter than 8 characters",
- 'should match pattern "d+"',
+ "must NOT have fewer than 8 characters",
+ 'must match pattern "d+"',
]);
});
});
@@ -1886,12 +1886,12 @@ describeRepeated("Form common", (createFormComponent) => {
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "should NOT be shorter than 8 characters",
+ message: "must NOT have fewer than 8 characters",
name: "minLength",
params: { limit: 8 },
property: ".level1.level2",
schemaPath: "#/properties/level1/properties/level2/minLength",
- stack: ".level1.level2 should NOT be shorter than 8 characters",
+ stack: ".level1.level2 must NOT have fewer than 8 characters",
},
]);
});
@@ -1904,7 +1904,7 @@ describeRepeated("Form common", (createFormComponent) => {
expect(node.querySelectorAll(".field-error")).to.have.length.of(1);
expect(errorDetail.textContent).eql(
- "should NOT be shorter than 8 characters"
+ "must NOT have fewer than 8 characters"
);
});
});
@@ -1930,12 +1930,12 @@ describeRepeated("Form common", (createFormComponent) => {
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "should NOT be shorter than 4 characters",
+ message: "must NOT have fewer than 4 characters",
name: "minLength",
params: { limit: 4 },
- property: "[1]",
+ property: ".1",
schemaPath: "#/items/minLength",
- stack: "[1] should NOT be shorter than 4 characters",
+ stack: ".1 must NOT have fewer than 4 characters",
},
]);
});
@@ -1950,7 +1950,7 @@ describeRepeated("Form common", (createFormComponent) => {
const errors = [].map.call(liNodes, (li) => li.textContent);
expect(fieldNodes[1].classList.contains("field-error")).eql(true);
- expect(errors).eql(["should NOT be shorter than 4 characters"]);
+ expect(errors).eql(["must NOT have fewer than 4 characters"]);
});
it("should not denote errors on non impacted fields", () => {
@@ -1988,20 +1988,20 @@ describeRepeated("Form common", (createFormComponent) => {
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "should NOT be shorter than 4 characters",
+ message: "must NOT have fewer than 4 characters",
name: "minLength",
params: { limit: 4 },
- property: ".level1[1]",
+ property: ".level1.1",
schemaPath: "#/properties/level1/items/minLength",
- stack: ".level1[1] should NOT be shorter than 4 characters",
+ stack: ".level1.1 must NOT have fewer than 4 characters",
},
{
- message: "should NOT be shorter than 4 characters",
+ message: "must NOT have fewer than 4 characters",
name: "minLength",
params: { limit: 4 },
- property: ".level1[3]",
+ property: ".level1.3",
schemaPath: "#/properties/level1/items/minLength",
- stack: ".level1[3] should NOT be shorter than 4 characters",
+ stack: ".level1.3 must NOT have fewer than 4 characters",
},
]);
});
@@ -2017,7 +2017,7 @@ describeRepeated("Form common", (createFormComponent) => {
const liNodes = node.querySelectorAll(".field-string .error-detail li");
const errors = [].map.call(liNodes, (li) => li.textContent);
- expect(errors).eql(["should NOT be shorter than 4 characters"]);
+ expect(errors).eql(["must NOT have fewer than 4 characters"]);
});
});
@@ -2053,20 +2053,20 @@ describeRepeated("Form common", (createFormComponent) => {
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "should NOT be shorter than 4 characters",
+ message: "must NOT have fewer than 4 characters",
name: "minLength",
params: { limit: 4 },
- property: ".outer[0][1]",
+ property: ".outer.0.1",
schemaPath: "#/properties/outer/items/items/minLength",
- stack: ".outer[0][1] should NOT be shorter than 4 characters",
+ stack: ".outer.0.1 must NOT have fewer than 4 characters",
},
{
- message: "should NOT be shorter than 4 characters",
+ message: "must NOT have fewer than 4 characters",
name: "minLength",
params: { limit: 4 },
- property: ".outer[1][0]",
+ property: ".outer.1.0",
schemaPath: "#/properties/outer/items/items/minLength",
- stack: ".outer[1][0] should NOT be shorter than 4 characters",
+ stack: ".outer.1.0 must NOT have fewer than 4 characters",
},
]);
});
@@ -2081,8 +2081,8 @@ describeRepeated("Form common", (createFormComponent) => {
expect(errors).eql([
null,
- "should NOT be shorter than 4 characters",
- "should NOT be shorter than 4 characters",
+ "must NOT have fewer than 4 characters",
+ "must NOT have fewer than 4 characters",
null,
]);
});
@@ -2112,14 +2112,15 @@ describeRepeated("Form common", (createFormComponent) => {
const { node, onError } = createFormComponent(formProps);
submitForm(node);
+ console.log(onError.lastCall);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "should NOT be shorter than 4 characters",
+ message: "must NOT have fewer than 4 characters",
name: "minLength",
params: { limit: 4 },
- property: "[1].foo",
+ property: ".1.foo",
schemaPath: "#/items/properties/foo/minLength",
- stack: "[1].foo should NOT be shorter than 4 characters",
+ stack: ".1.foo must NOT have fewer than 4 characters",
},
]);
});
@@ -2134,7 +2135,7 @@ describeRepeated("Form common", (createFormComponent) => {
const errors = [].map.call(liNodes, (li) => li.textContent);
expect(fieldNodes[1].classList.contains("field-error")).eql(true);
- expect(errors).eql(["should NOT be shorter than 4 characters"]);
+ expect(errors).eql(["must NOT have fewer than 4 characters"]);
});
});
@@ -2195,7 +2196,7 @@ describeRepeated("Form common", (createFormComponent) => {
sinon.assert.calledWithMatch(
onChange.lastCall,
{
- errorSchema: { field1: { __errors: ["should be number"] } },
+ errorSchema: { field1: { __errors: ["must be number"] } },
},
"root"
);
@@ -2217,11 +2218,9 @@ describeRepeated("Form common", (createFormComponent) => {
{
errorSchema: {
field1: {
- __errors: ["should be number"],
- },
- field2: {
- __errors: ["is a required property"],
+ __errors: ["must be number"],
},
+ __errors: ["must have required property 'field2'"],
},
},
"root_field1"
@@ -2593,12 +2592,12 @@ describeRepeated("Form common", (createFormComponent) => {
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: 'should match format "area-code"',
+ message: 'must match format "area-code"',
name: "format",
params: { format: "area-code" },
property: ".areaCode",
schemaPath: "#/properties/areaCode/format",
- stack: '.areaCode should match format "area-code"',
+ stack: '.areaCode must match format "area-code"',
},
]);
});
@@ -2607,9 +2606,8 @@ describeRepeated("Form common", (createFormComponent) => {
describe("Meta schema updates", () => {
it("Should update allowed meta schemas when additionalMetaSchemas is changed", () => {
const formProps = {
- liveValidate: true,
schema: {
- $schema: "http://json-schema.org/draft-04/schema#",
+ $schema: "http://json-schema.org/draft-06/schema#",
type: "string",
minLength: 8,
pattern: "d+",
@@ -2622,13 +2620,13 @@ describeRepeated("Form common", (createFormComponent) => {
sinon.assert.calledWithMatch(onError.lastCall, [
{
stack:
- 'no schema with key or ref "http://json-schema.org/draft-04/schema#"',
+ 'no schema with key or ref "http://json-schema.org/draft-06/schema#"',
},
]);
const customValidator = customizeValidator({
additionalMetaSchemas: [
- require("ajv/lib/refs/json-schema-draft-04.json"),
+ require("ajv/lib/refs/json-schema-draft-06.json"),
],
});
@@ -2641,20 +2639,20 @@ describeRepeated("Form common", (createFormComponent) => {
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "should NOT be shorter than 8 characters",
+ message: "must NOT have fewer than 8 characters",
name: "minLength",
params: { limit: 8 },
property: "",
schemaPath: "#/minLength",
- stack: "should NOT be shorter than 8 characters",
+ stack: "must NOT have fewer than 8 characters",
},
{
- message: 'should match pattern "d+"',
+ message: 'must match pattern "d+"',
name: "pattern",
params: { pattern: "d+" },
property: "",
schemaPath: "#/pattern",
- stack: 'should match pattern "d+"',
+ stack: 'must match pattern "d+"',
},
]);
});
diff --git a/packages/core/test/ObjectField_test.js b/packages/core/test/ObjectField_test.js
index fa15c4079a..27dc05700d 100644
--- a/packages/core/test/ObjectField_test.js
+++ b/packages/core/test/ObjectField_test.js
@@ -547,12 +547,12 @@ describe("ObjectField", () => {
sinon.assert.notCalled(onSubmit);
sinon.assert.calledWithMatch(onError.lastCall, [
{
- message: "is an invalid additional property",
+ message: "must NOT have additional properties",
name: "additionalProperties",
params: { additionalProperty: "nonschema" },
- property: "['nonschema']",
+ property: "",
schemaPath: "#/additionalProperties",
- stack: "['nonschema'] is an invalid additional property",
+ stack: "must NOT have additional properties",
},
]);
});
diff --git a/packages/core/test/SchemaField_test.js b/packages/core/test/SchemaField_test.js
index 6f95258207..98cdebf765 100644
--- a/packages/core/test/SchemaField_test.js
+++ b/packages/core/test/SchemaField_test.js
@@ -2,7 +2,7 @@ import React from "react";
import { expect } from "chai";
import { Simulate } from "react-dom/test-utils";
import { createSchemaUtils } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import SchemaField from "../src/components/fields/SchemaField";
diff --git a/packages/core/test/StringField_test.js b/packages/core/test/StringField_test.js
index bef54684f6..5cad5d1def 100644
--- a/packages/core/test/StringField_test.js
+++ b/packages/core/test/StringField_test.js
@@ -689,15 +689,15 @@ describe("StringField", () => {
});
sinon.assert.calledWithMatch(onChange.lastCall, {
- errorSchema: { __errors: ["should be string"] },
+ errorSchema: { __errors: ["must be string"] },
errors: [
{
- message: "should be string",
+ message: "must be string",
name: "type",
params: { type: "string" },
property: "",
schemaPath: "#/type",
- stack: "should be string",
+ stack: "must be string",
},
],
});
@@ -848,15 +848,15 @@ describe("StringField", () => {
});
sinon.assert.calledWithMatch(onChange.lastCall, {
- errorSchema: { __errors: ['should match format "date"'] },
+ errorSchema: { __errors: ['must match format "date"'] },
errors: [
{
- message: 'should match format "date"',
+ message: 'must match format "date"',
name: "format",
params: { format: "date" },
property: "",
schemaPath: "#/format",
- stack: 'should match format "date"',
+ stack: 'must match format "date"',
},
],
});
@@ -1580,15 +1580,15 @@ describe("StringField", () => {
});
sinon.assert.calledWithMatch(onChange.lastCall, {
- errorSchema: { __errors: ['should match format "email"'] },
+ errorSchema: { __errors: ['must match format "email"'] },
errors: [
{
- message: 'should match format "email"',
+ message: 'must match format "email"',
name: "format",
params: { format: "email" },
property: "",
schemaPath: "#/format",
- stack: 'should match format "email"',
+ stack: 'must match format "email"',
},
],
});
@@ -1720,15 +1720,15 @@ describe("StringField", () => {
});
sinon.assert.calledWithMatch(onChange.lastCall, {
- errorSchema: { __errors: ['should match format "uri"'] },
+ errorSchema: { __errors: ['must match format "uri"'] },
errors: [
{
- message: 'should match format "uri"',
+ message: 'must match format "uri"',
name: "format",
params: { format: "uri" },
property: "",
schemaPath: "#/format",
- stack: 'should match format "uri"',
+ stack: 'must match format "uri"',
},
],
});
@@ -1837,15 +1837,15 @@ describe("StringField", () => {
});
sinon.assert.calledWithMatch(onChange.lastCall, {
- errorSchema: { __errors: ['should match format "color"'] },
+ errorSchema: { __errors: ['must match format "color"'] },
errors: [
{
- message: 'should match format "color"',
+ message: 'must match format "color"',
name: "format",
params: { format: "color" },
property: "",
schemaPath: "#/format",
- stack: 'should match format "color"',
+ stack: 'must match format "color"',
},
],
});
diff --git a/packages/core/test/anyOf_test.js b/packages/core/test/anyOf_test.js
index 499330523c..eb11c49efa 100644
--- a/packages/core/test/anyOf_test.js
+++ b/packages/core/test/anyOf_test.js
@@ -1049,8 +1049,8 @@ describe("anyOf", () => {
it("should correctly infer the selected option based on value", () => {
const schema = {
- $ref: "#/defs/any",
- defs: {
+ $ref: "#/definitions/any",
+ definitions: {
chain: {
type: "object",
title: "Chain",
@@ -1060,7 +1060,7 @@ describe("anyOf", () => {
},
components: {
type: "array",
- items: { $ref: "#/defs/any" },
+ items: { $ref: "#/definitions/any" },
},
},
},
@@ -1070,7 +1070,7 @@ describe("anyOf", () => {
title: "Map",
properties: {
id: { enum: ["map"] },
- fn: { $ref: "#/defs/any" },
+ fn: { $ref: "#/definitions/any" },
},
},
@@ -1089,15 +1089,15 @@ describe("anyOf", () => {
properties: {
id: { enum: ["transform"] },
property_key: { type: "string" },
- transformer: { $ref: "#/defs/any" },
+ transformer: { $ref: "#/definitions/any" },
},
},
any: {
anyOf: [
- { $ref: "#/defs/chain" },
- { $ref: "#/defs/map" },
- { $ref: "#/defs/to_absolute" },
- { $ref: "#/defs/transform" },
+ { $ref: "#/definitions/chain" },
+ { $ref: "#/definitions/map" },
+ { $ref: "#/definitions/to_absolute" },
+ { $ref: "#/definitions/transform" },
],
},
},
diff --git a/packages/core/test/oneOf_test.js b/packages/core/test/oneOf_test.js
index 236a8a5b1e..cdee271ea3 100644
--- a/packages/core/test/oneOf_test.js
+++ b/packages/core/test/oneOf_test.js
@@ -821,8 +821,8 @@ describe("oneOf", () => {
it("should correctly infer the selected option based on value", () => {
const schema = {
- $ref: "#/defs/any",
- defs: {
+ $ref: "#/definitions/any",
+ definitions: {
chain: {
type: "object",
title: "Chain",
@@ -832,7 +832,7 @@ describe("oneOf", () => {
},
components: {
type: "array",
- items: { $ref: "#/defs/any" },
+ items: { $ref: "#/definitions/any" },
},
},
},
@@ -842,7 +842,7 @@ describe("oneOf", () => {
title: "Map",
properties: {
id: { enum: ["map"] },
- fn: { $ref: "#/defs/any" },
+ fn: { $ref: "#/definitions/any" },
},
},
@@ -861,15 +861,15 @@ describe("oneOf", () => {
properties: {
id: { enum: ["transform"] },
property_key: { type: "string" },
- transformer: { $ref: "#/defs/any" },
+ transformer: { $ref: "#/definitions/any" },
},
},
any: {
oneOf: [
- { $ref: "#/defs/chain" },
- { $ref: "#/defs/map" },
- { $ref: "#/defs/to_absolute" },
- { $ref: "#/defs/transform" },
+ { $ref: "#/definitions/chain" },
+ { $ref: "#/definitions/map" },
+ { $ref: "#/definitions/to_absolute" },
+ { $ref: "#/definitions/transform" },
],
},
},
diff --git a/packages/core/test/test_utils.js b/packages/core/test/test_utils.js
index e565868014..f5485acfb4 100644
--- a/packages/core/test/test_utils.js
+++ b/packages/core/test/test_utils.js
@@ -4,7 +4,7 @@ import React from "react";
import sinon from "sinon";
import { renderIntoDocument, act, Simulate } from "react-dom/test-utils";
import { findDOMNode, render } from "react-dom";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import Form from "../src";
diff --git a/packages/core/test/uiSchema_test.js b/packages/core/test/uiSchema_test.js
index 762a82a2dd..2d0ca37565 100644
--- a/packages/core/test/uiSchema_test.js
+++ b/packages/core/test/uiSchema_test.js
@@ -3,7 +3,7 @@ import React from "react";
import sinon from "sinon";
import { render } from "react-dom";
import { Simulate } from "react-dom/test-utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import SelectWidget from "../src/components/widgets/SelectWidget";
import RadioWidget from "../src/components/widgets/RadioWidget";
diff --git a/packages/core/test/validate_test.js b/packages/core/test/validate_test.js
index 8407bc9239..affc1c183a 100644
--- a/packages/core/test/validate_test.js
+++ b/packages/core/test/validate_test.js
@@ -4,10 +4,10 @@ import sinon from "sinon";
import { Simulate } from "react-dom/test-utils";
import { createFormComponent, submitForm } from "./test_utils";
-import { customizeValidator as customizeV6Validator } from "@rjsf/validator-ajv6";
-import v8Validator, {
- customizeValidator as customizeV8Validator,
-} from "@rjsf/validator-ajv8";
+import v6Validator, {
+ customizeValidator as customizeV6Validator,
+} from "@rjsf/validator-ajv6";
+import { customizeValidator as customizeV8Validator } from "@rjsf/validator-ajv8";
describe("Validation", () => {
describe("Form integration, v6 validator", () => {
@@ -45,7 +45,7 @@ describe("Validation", () => {
it("should render errors at the top", () => {
expect(node.querySelectorAll(".errors li")).to.have.length.of(1);
expect(node.querySelector(".errors li").textContent).eql(
- ".foo is a required property"
+ "must have required property 'foo'"
);
expect(node.childNodes[0].className).to.eql(
"panel panel-danger errors"
@@ -77,7 +77,7 @@ describe("Validation", () => {
it("should render errors at the bottom", () => {
expect(node.querySelectorAll(".errors li")).to.have.length.of(1);
expect(node.querySelector(".errors li").textContent).eql(
- ".foo is a required property"
+ "must have required property 'foo'git sta"
);
// The last child node is the submit button so the one before it will be the error list
@@ -104,6 +104,7 @@ describe("Validation", () => {
formData: {
foo: undefined,
},
+ validator: v6Validator,
});
onError = compInfo.onError;
node = compInfo.node;
@@ -156,6 +157,7 @@ describe("Validation", () => {
foo: "123456789",
},
onError,
+ validator: v6Validator,
});
node = compInfo.node;
@@ -200,6 +202,7 @@ describe("Validation", () => {
schema,
customValidate,
formData,
+ validator: v6Validator,
});
submitForm(node);
@@ -224,6 +227,7 @@ describe("Validation", () => {
customValidate,
formData,
liveValidate: true,
+ validator: v6Validator,
});
Simulate.change(node.querySelector("input"), {
target: { value: "1234" },
@@ -257,6 +261,7 @@ describe("Validation", () => {
formData,
customValidate,
onSubmit,
+ validator: v6Validator,
});
submitForm(node);
@@ -283,6 +288,7 @@ describe("Validation", () => {
customValidate,
onSubmit,
onError,
+ validator: v6Validator,
});
submitForm(node);
@@ -314,6 +320,7 @@ describe("Validation", () => {
schema,
customValidate,
formData,
+ validator: v6Validator,
});
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
@@ -363,6 +370,7 @@ describe("Validation", () => {
schema,
customValidate,
formData,
+ validator: v6Validator,
});
submitForm(node);
@@ -396,6 +404,7 @@ describe("Validation", () => {
schema,
customValidate,
formData,
+ validator: v6Validator,
});
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
@@ -427,6 +436,7 @@ describe("Validation", () => {
foo: undefined,
},
showErrorList: false,
+ validator: v6Validator,
});
node = compInfo.node;
onError = compInfo.onError;
@@ -489,6 +499,7 @@ describe("Validation", () => {
formData,
templates: { ErrorListTemplate: CustomErrorList },
formContext: { className: "foo" },
+ validator: v6Validator,
});
expect(node.querySelectorAll(".CustomErrorList")).to.have.length.of(1);
expect(node.querySelector(".CustomErrorList").textContent).eql(
@@ -595,7 +606,6 @@ describe("Validation", () => {
formData: {
foo: undefined,
},
- validator: v8Validator,
});
onError = compInfo.onError;
node = compInfo.node;
@@ -644,7 +654,6 @@ describe("Validation", () => {
formData: {
foo: "123456789",
},
- validator: v8Validator,
onError,
});
node = compInfo.node;
@@ -689,7 +698,6 @@ describe("Validation", () => {
const { onError, node } = createFormComponent({
schema,
customValidate,
- validator: v8Validator,
formData,
});
@@ -714,7 +722,6 @@ describe("Validation", () => {
schema,
customValidate,
formData,
- validator: v8Validator,
liveValidate: true,
});
Simulate.change(node.querySelector("input"), {
@@ -748,7 +755,6 @@ describe("Validation", () => {
schema,
formData,
customValidate,
- validator: v8Validator,
onSubmit,
});
@@ -773,7 +779,6 @@ describe("Validation", () => {
const { node } = createFormComponent({
schema,
formData,
- validator: v8Validator,
customValidate,
onSubmit,
onError,
@@ -806,7 +811,6 @@ describe("Validation", () => {
const { node, onError } = createFormComponent({
schema,
- validator: v8Validator,
customValidate,
formData,
});
@@ -856,7 +860,6 @@ describe("Validation", () => {
const { node, onError } = createFormComponent({
schema,
- validator: v8Validator,
customValidate,
formData,
});
@@ -890,7 +893,6 @@ describe("Validation", () => {
const { node, onError } = createFormComponent({
schema,
- validator: v8Validator,
customValidate,
formData,
});
@@ -923,7 +925,6 @@ describe("Validation", () => {
formData: {
foo: undefined,
},
- validator: v8Validator,
showErrorList: false,
});
node = compInfo.node;
@@ -983,7 +984,6 @@ describe("Validation", () => {
const { node } = createFormComponent({
schema,
uiSchema,
- validator: v8Validator,
liveValidate: true,
formData,
templates: { ErrorListTemplate: CustomErrorList },
diff --git a/packages/core/test/withTheme_test.js b/packages/core/test/withTheme_test.js
index b3d1b13307..cbb6f0b2b5 100644
--- a/packages/core/test/withTheme_test.js
+++ b/packages/core/test/withTheme_test.js
@@ -1,6 +1,6 @@
import { expect } from "chai";
import React, { Component, createRef } from "react";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import { withTheme } from "../src";
import { createComponent, createSandbox } from "./test_utils";
diff --git a/packages/fluent-ui/package.json b/packages/fluent-ui/package.json
index 2736f98308..34e0c6ddf1 100644
--- a/packages/fluent-ui/package.json
+++ b/packages/fluent-ui/package.json
@@ -43,7 +43,7 @@
"@fluentui/react": "^7.190.3",
"@rjsf/core": "^5.0.0-beta.11",
"@rjsf/utils": "^5.0.0-beta.11",
- "@rjsf/validator-ajv6": "^5.0.0-beta.11",
+ "@rjsf/validator-ajv8": "^5.0.0-beta.11",
"@types/lodash": "^4.14.186",
"@types/react": "^17.0.48",
"@types/react-dom": "^17.0.17",
diff --git a/packages/fluent-ui/test/Array.test.tsx b/packages/fluent-ui/test/Array.test.tsx
index e8f4a5fec6..80d8eb7334 100644
--- a/packages/fluent-ui/test/Array.test.tsx
+++ b/packages/fluent-ui/test/Array.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src/index";
diff --git a/packages/fluent-ui/test/Form.test.tsx b/packages/fluent-ui/test/Form.test.tsx
index 710bd0f57b..f87dd7d222 100644
--- a/packages/fluent-ui/test/Form.test.tsx
+++ b/packages/fluent-ui/test/Form.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema, UiSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src/index";
diff --git a/packages/fluent-ui/test/Object.test.tsx b/packages/fluent-ui/test/Object.test.tsx
index 838684ac06..1952b2bcc0 100644
--- a/packages/fluent-ui/test/Object.test.tsx
+++ b/packages/fluent-ui/test/Object.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src/index";
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
index b9a9b1fa0a..afaf3dc28a 100644
--- a/packages/material-ui/package.json
+++ b/packages/material-ui/package.json
@@ -45,7 +45,7 @@
"@material-ui/icons": "^4.11.3",
"@rjsf/core": "^5.0.0-beta.11",
"@rjsf/utils": "^5.0.0-beta.11",
- "@rjsf/validator-ajv6": "^5.0.0-beta.11",
+ "@rjsf/validator-ajv8": "^5.0.0-beta.11",
"@types/material-ui": "^0.21.12",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
diff --git a/packages/material-ui/test/Array.test.tsx b/packages/material-ui/test/Array.test.tsx
index fecf4da9ad..ebf4decb90 100644
--- a/packages/material-ui/test/Array.test.tsx
+++ b/packages/material-ui/test/Array.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src";
diff --git a/packages/material-ui/test/Form.test.tsx b/packages/material-ui/test/Form.test.tsx
index d0bb78691c..a1a548a2c7 100644
--- a/packages/material-ui/test/Form.test.tsx
+++ b/packages/material-ui/test/Form.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema, UiSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
// The material-ui Slider is trying to call `findDOMNode()` within a useEffect() hook. Since the hook deals with
diff --git a/packages/material-ui/test/Object.test.tsx b/packages/material-ui/test/Object.test.tsx
index b01a00dc7d..647ec39b49 100644
--- a/packages/material-ui/test/Object.test.tsx
+++ b/packages/material-ui/test/Object.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src";
diff --git a/packages/mui/package.json b/packages/mui/package.json
index 27745b8e30..ff0347c440 100644
--- a/packages/mui/package.json
+++ b/packages/mui/package.json
@@ -50,7 +50,7 @@
"@mui/material": "^5.10.2",
"@rjsf/core": "^5.0.0-beta.11",
"@rjsf/utils": "^5.0.0-beta.11",
- "@rjsf/validator-ajv6": "^5.0.0-beta.11",
+ "@rjsf/validator-ajv8": "^5.0.0-beta.11",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@types/react-test-renderer": "^17.0.1",
diff --git a/packages/mui/test/Array.test.tsx b/packages/mui/test/Array.test.tsx
index fecf4da9ad..ebf4decb90 100644
--- a/packages/mui/test/Array.test.tsx
+++ b/packages/mui/test/Array.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src";
diff --git a/packages/mui/test/Form.test.tsx b/packages/mui/test/Form.test.tsx
index 11f44a2306..af18613f75 100644
--- a/packages/mui/test/Form.test.tsx
+++ b/packages/mui/test/Form.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema, UiSchema, ErrorSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src";
diff --git a/packages/mui/test/Object.test.tsx b/packages/mui/test/Object.test.tsx
index b01a00dc7d..647ec39b49 100644
--- a/packages/mui/test/Object.test.tsx
+++ b/packages/mui/test/Object.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src";
diff --git a/packages/playground/src/app.jsx b/packages/playground/src/app.jsx
index d1fe5e34e6..ad49d19f3a 100644
--- a/packages/playground/src/app.jsx
+++ b/packages/playground/src/app.jsx
@@ -291,7 +291,7 @@ class Playground extends Component {
// set default theme
const theme = "default";
- const validator = "AJV6";
+ const validator = "AJV8";
// initialize state with Simple data sample
const { schema, uiSchema, formData, validate } = samples.Simple;
this.playGroundForm = React.createRef();
diff --git a/packages/playground/src/index.jsx b/packages/playground/src/index.jsx
index 27aa5430c7..9fe68e8bd3 100644
--- a/packages/playground/src/index.jsx
+++ b/packages/playground/src/index.jsx
@@ -24,7 +24,7 @@ const validators = {
AJV8_es: esV8Validator,
AJV8_2019,
AJV8_2020,
- AJV6: v6Validator,
+ 'AJV6 (deprecated)': v6Validator,
};
const themes = {
diff --git a/packages/semantic-ui/package.json b/packages/semantic-ui/package.json
index 3add5dafaa..b5ebe48370 100644
--- a/packages/semantic-ui/package.json
+++ b/packages/semantic-ui/package.json
@@ -43,7 +43,7 @@
"@babel/register": "^7.18.9",
"@rjsf/core": "^5.0.0-beta.11",
"@rjsf/utils": "^5.0.0-beta.11",
- "@rjsf/validator-ajv6": "^5.0.0-beta.11",
+ "@rjsf/validator-ajv8": "^5.0.0-beta.11",
"@types/lodash": "^4.14.186",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.17",
diff --git a/packages/semantic-ui/test/Array.test.tsx b/packages/semantic-ui/test/Array.test.tsx
index 91ff79076e..130f19be9b 100644
--- a/packages/semantic-ui/test/Array.test.tsx
+++ b/packages/semantic-ui/test/Array.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { ErrorSchema, RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src";
diff --git a/packages/semantic-ui/test/Form.test.tsx b/packages/semantic-ui/test/Form.test.tsx
index fec3dff2a2..9fab306524 100644
--- a/packages/semantic-ui/test/Form.test.tsx
+++ b/packages/semantic-ui/test/Form.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { ErrorSchema, RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src";
diff --git a/packages/semantic-ui/test/Object.test.tsx b/packages/semantic-ui/test/Object.test.tsx
index 810e8f07b4..f27595b6f8 100644
--- a/packages/semantic-ui/test/Object.test.tsx
+++ b/packages/semantic-ui/test/Object.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { RJSFSchema } from "@rjsf/utils";
-import validator from "@rjsf/validator-ajv6";
+import validator from "@rjsf/validator-ajv8";
import renderer from "react-test-renderer";
import Form from "../src";
diff --git a/packages/validator-ajv6/README.md b/packages/validator-ajv6/README.md
index 3a33da39ca..12e9c421c0 100644
--- a/packages/validator-ajv6/README.md
+++ b/packages/validator-ajv6/README.md
@@ -58,6 +58,8 @@ Exports `validator-ajv6` plugin for `react-jsonschema-form`.
## Getting Started
+> NOTE: This package is deprecated in favor of the `@rjsf/validator-ajv8` and is provided primarily for people upgrading to version 5 who initially want to minimize the validator differences.
+
### Prerequisites
#### React JsonSchema Form Utils
diff --git a/packages/validator-ajv6/src/createAjvInstance.ts b/packages/validator-ajv6/src/createAjvInstance.ts
index 725f5e7d46..14b0f20277 100644
--- a/packages/validator-ajv6/src/createAjvInstance.ts
+++ b/packages/validator-ajv6/src/createAjvInstance.ts
@@ -24,6 +24,7 @@ export const DATA_URL_FORMAT_REGEX =
* @param [additionalMetaSchemas] - The list of additional meta schemas that the validator can access
* @param [customFormats] - The set of additional custom formats that the validator will support
* @param [ajvOptionsOverrides={}] - The set of validator config override options
+ * @deprecated in favor of the `@rjsf/validator-ajv8
*/
export default function createAjvInstance(
additionalMetaSchemas?: CustomValidatorOptionsType["additionalMetaSchemas"],
diff --git a/packages/validator-ajv6/src/customizeValidator.ts b/packages/validator-ajv6/src/customizeValidator.ts
index cd62ae93e9..01e2a828cb 100644
--- a/packages/validator-ajv6/src/customizeValidator.ts
+++ b/packages/validator-ajv6/src/customizeValidator.ts
@@ -7,6 +7,7 @@ import AJV6Validator from "./validator";
* provided.
*
* @param [options={}] - The `CustomValidatorOptionsType` options that are used to create the `ValidatorType` instance
+ * @deprecated in favor of the `@rjsf/validator-ajv8
*/
export default function customizeValidator(
options: CustomValidatorOptionsType = {}
diff --git a/packages/validator-ajv6/src/index.ts b/packages/validator-ajv6/src/index.ts
index 975828ece1..e32ca634d0 100644
--- a/packages/validator-ajv6/src/index.ts
+++ b/packages/validator-ajv6/src/index.ts
@@ -3,4 +3,6 @@ import customizeValidator from "./customizeValidator";
export { customizeValidator };
export * from "./types";
+/** @deprecated in favor of the `@rjsf/validator-ajv8
+ */
export default customizeValidator();
diff --git a/packages/validator-ajv6/src/validator.ts b/packages/validator-ajv6/src/validator.ts
index 1fa97fe132..dc031804c7 100644
--- a/packages/validator-ajv6/src/validator.ts
+++ b/packages/validator-ajv6/src/validator.ts
@@ -24,6 +24,8 @@ import createAjvInstance from "./createAjvInstance";
const ROOT_SCHEMA_PREFIX = "__rjsf_rootSchema";
/** `ValidatorType` implementation that uses the AJV 6 validation mechanism.
+ *
+ * @deprecated in favor of the `@rjsf/validator-ajv8
*/
export default class AJV6Validator implements ValidatorType {
/** The AJV instance to use for all validations