diff --git a/CHANGELOG.md b/CHANGELOG.md index 89f72c5790..423a8e6634 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ should change the heading of the (upcoming) version to include a major version b - Added the new generic, `S extends StrictRJSFSchema = RJSFSchema`, for `schema`/`rootSchema` to every component that needed it. - Fix omitExtraData with field names with dots #2643 - Updated the tests to use the `@rjsf/validator-ajv8` fixing [#3110](https://github.com/rjsf-team/react-jsonschema-form/issues/3110) +- Changed the `F = any` generic to be `F extends FormContextType = any` to better support how `formContext` is defined and used, partially fixing [#3072](https://github.com/rjsf-team/react-jsonschema-form/issues/3072) ## @rjsf/fluent-ui - Updated the tests to use the `@rjsf/validator-ajv8` fixing [#3110](https://github.com/rjsf-team/react-jsonschema-form/issues/3110) @@ -51,6 +52,7 @@ should change the heading of the (upcoming) version to include a major version b - This new generic was added BEFORE the newly added `F = any` generic because it is assumed that more people will want to change the schema than the formContext types - This provides future support for the newer draft versions of the schema - Updated the `ValidatorType` interface to add a new `rawValidation()` method for use by the playground +- Added the `FormContextType` alias to `GenericObjectType` and changing the `F = any` generic to be `F extends FormContextType = any` to better support how `formContext` is defined and used, partially fixing [#3072](https://github.com/rjsf-team/react-jsonschema-form/issues/3072) ## @rjsf/validator-ajv6 - Fixed a few type casts given the new expanded definition of the `RJSFSchema` type change @@ -63,7 +65,7 @@ should change the heading of the (upcoming) version to include a major version b - Refactored out the `rawValidation()` function for use by the playground ## Dev / docs / playground -- Updated the `5.x upgrade guide` and `utility-functions.md` to document the new `StrictRJSFSchema` and `S` generic +- Updated the `5.x upgrade guide` and `utility-functions.md` to document the new `StrictRJSFSchema`, the `S` generic and changing the `F` generic extend - Updated the `validation` guide to document the new `AjvClass` prop on `CustomValidatorOptionsType` and mentioning the deprecation of `@rjsf/validator-ajv6` - Updated the playground to add support for using the AJV 8 validator with the `draft-2019-09` and `draft-2020-12` schemas and to make the `AJV8` validator the default validator, marking `AJV6` as deprecated - Updated all the documentation to switch to Typescript notation where missing along with switching to using the `@rjsf/validator-ajv8` validator as the default diff --git a/docs/5.x upgrade guide.md b/docs/5.x upgrade guide.md index 93e72a47ee..47f3365997 100644 --- a/docs/5.x upgrade guide.md +++ b/docs/5.x upgrade guide.md @@ -52,7 +52,7 @@ Some of the most notable changes are: - `RJSFSchema` is `StrictRJSFSchema` joined with the `GenericObjectType` (i.e. `{ [key: string]: any }`) to allow for additional syntax related to newer draft versions - All definitions of `schema` and `rootSchema` elements have been replaced with a generic that is defined as `S extends StrictRJSFSchema = RJSFSchema` - It is highly recommended to update your use of `JSON7Schema` with `RJSFSchema` since that is the default for the new generic used for `schema` and `rootSchema` -- A new generic `F` (defaulting to `any`) was added for the `formContext` type, and all types in the hierarchy that use `formContext` have had that generic added to them. +- A new generic `F` (extending `FormContextType` defaulting to `any`) was added for the `formContext` type, and all types in the hierarchy that use `formContext` have had that generic added to them. - The new `CustomValidator`, `ErrorTransformer`, `ValidationData`, `ValidatorType` and `SchemaUtilsType` types were added to support the decoupling of the validation implementation. - The new `TemplatesType`, `ArrayFieldDescriptionProps`, `ArrayFieldTitleProps`, `UnsupportedFieldProps`, `IconButtonProps`, `SubmitButtonProps` and `UIOptionsBaseType` were added to support the consolidation (and expansion) of `templates` in the `Registry` and `Form`. - **BREAKING CHANGE** The `DescriptionField` and `TitleField` props were removed from the `ArrayFieldTemplateProps` and `ObjectFieldTemplateProps` as they can now be derived from the `templates` or `uiSchema` via the new `getTemplate()` utility function. diff --git a/docs/api-reference/utility-functions.md b/docs/api-reference/utility-functions.md index f4430df0e5..6813844936 100644 --- a/docs/api-reference/utility-functions.md +++ b/docs/api-reference/utility-functions.md @@ -43,7 +43,7 @@ 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. @@ -76,7 +76,8 @@ 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. @@ -91,8 +92,8 @@ Otherwise return the sub-schema. Also deals with nested `$ref`s in the sub-schem #### Throws - Error indicating that no schema for that reference exists -### getInputProps() -Using the `schema`, `defaultType` and `options`, extract out the props for the element that make sense. +### getInputProps() +Using the `schema`, `defaultType` and `options`, extract out the props for the `` element that make sense. #### Parameters - schema: S - The schema for the field provided by the widget @@ -117,7 +118,7 @@ If the type is not explicitly defined, then an attempt is made to infer it from #### 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 @@ -126,7 +127,7 @@ Extracts any `ui:submitButtonOptions` from the `uiSchema` and merges them onto t #### 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 @@ -147,7 +148,7 @@ otherwise. NOTE, since `ButtonTemplates` are not overridden in `uiSchema` only t #### Returns - 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 @@ -174,7 +175,7 @@ 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 @@ -185,7 +186,7 @@ Detects whether the `widget` exists for the `schema` with the associated `regist #### 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. @@ -195,7 +196,7 @@ This happens when either the schema has an `enum` array with a single value or t #### 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 @@ -204,7 +205,7 @@ Checks to see if the `uiSchema` contains the `widget` field and that the widget #### 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. @@ -272,7 +273,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. @@ -324,7 +325,7 @@ 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. @@ -337,7 +338,7 @@ If the value is an empty string, then the `emptyValue` from the `options` is ret #### 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 @@ -371,7 +372,7 @@ 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. @@ -419,7 +420,7 @@ Returns the superset of `formData` that includes the given set updated to includ #### 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 @@ -443,7 +444,7 @@ Given the `formData` and list of `options`, attempts to find the index of the op #### 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 diff --git a/packages/core/src/components/Form.tsx b/packages/core/src/components/Form.tsx index 3627764515..b4b916201f 100644 --- a/packages/core/src/components/Form.tsx +++ b/packages/core/src/components/Form.tsx @@ -5,6 +5,7 @@ import { deepEquals, ErrorSchema, ErrorTransformer, + FormContextType, GenericObjectType, getTemplate, getUiOptions, @@ -37,7 +38,7 @@ import getDefaultRegistry from "../getDefaultRegistry"; export interface FormProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > { /** The JSON schema object for the form */ schema: S; @@ -192,7 +193,7 @@ export interface FormProps< export interface FormState< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > { /** The JSON schema object for the form */ schema: S; @@ -226,7 +227,7 @@ export interface FormState< export interface IChangeEvent< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > extends Omit< FormState, "schemaValidationErrors" | "schemaValidationErrorSchema" @@ -239,7 +240,7 @@ export interface IChangeEvent< export default class Form< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > extends Component, FormState> { /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can * provide any possible type here diff --git a/packages/core/src/components/fields/ArrayField.tsx b/packages/core/src/components/fields/ArrayField.tsx index 2211b1ae12..432accc730 100644 --- a/packages/core/src/components/fields/ArrayField.tsx +++ b/packages/core/src/components/fields/ArrayField.tsx @@ -10,6 +10,7 @@ import { ArrayFieldTemplateProps, ErrorSchema, FieldProps, + FormContextType, IdSchema, RJSFSchema, StrictRJSFSchema, @@ -73,7 +74,7 @@ function keyedToPlainFormData( class ArrayField< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > extends Component, ArrayFieldState> { /** Constructs an `ArrayField` from the `props`, generating the initial keyed data from the `formData` * @@ -98,7 +99,7 @@ class ArrayField< static getDerivedStateFromProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >( nextProps: Readonly>, prevState: Readonly> diff --git a/packages/core/src/components/fields/BooleanField.tsx b/packages/core/src/components/fields/BooleanField.tsx index 789a61a02a..071cea376e 100644 --- a/packages/core/src/components/fields/BooleanField.tsx +++ b/packages/core/src/components/fields/BooleanField.tsx @@ -4,6 +4,7 @@ import { getUiOptions, optionsList, FieldProps, + FormContextType, EnumOptionsType, RJSFSchema, StrictRJSFSchema, @@ -18,7 +19,7 @@ import isObject from "lodash/isObject"; function BooleanField< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: FieldProps) { const { schema, diff --git a/packages/core/src/components/fields/MultiSchemaField.tsx b/packages/core/src/components/fields/MultiSchemaField.tsx index 8b91eee520..99b986029d 100644 --- a/packages/core/src/components/fields/MultiSchemaField.tsx +++ b/packages/core/src/components/fields/MultiSchemaField.tsx @@ -5,6 +5,7 @@ import { guessType, deepEquals, FieldProps, + FormContextType, RJSFSchema, StrictRJSFSchema, } from "@rjsf/utils"; @@ -24,7 +25,7 @@ type AnyOfFieldState = { class AnyOfField< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > extends Component, AnyOfFieldState> { /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state * diff --git a/packages/core/src/components/fields/NullField.tsx b/packages/core/src/components/fields/NullField.tsx index b4a4cb3cf7..5298e949a8 100644 --- a/packages/core/src/components/fields/NullField.tsx +++ b/packages/core/src/components/fields/NullField.tsx @@ -1,14 +1,21 @@ import { useEffect } from "react"; -import { FieldProps, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; +import { + FieldProps, + FormContextType, + RJSFSchema, + StrictRJSFSchema, +} from "@rjsf/utils"; /** The `NullField` component is used to render a field in the schema is null. It also ensures that the `formData` is * also set to null if it has no value. * * @param props - The `FieldProps` for this template */ -function NullField( - props: FieldProps -) { +function NullField< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any +>(props: FieldProps) { const { formData, onChange } = props; useEffect(() => { if (formData === undefined) { diff --git a/packages/core/src/components/fields/NumberField.tsx b/packages/core/src/components/fields/NumberField.tsx index cfbaa4a1d4..47b6010d8b 100644 --- a/packages/core/src/components/fields/NumberField.tsx +++ b/packages/core/src/components/fields/NumberField.tsx @@ -2,6 +2,7 @@ import React, { useState, useCallback } from "react"; import { asNumber, FieldProps, + FormContextType, RJSFSchema, StrictRJSFSchema, } from "@rjsf/utils"; @@ -35,9 +36,11 @@ const trailingCharMatcher = /[0.]0*$/; * value cached in the state. If it matches the cached value, the cached * value is passed to the input instead of the formData value */ -function NumberField( - props: FieldProps -) { +function NumberField< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any +>(props: FieldProps) { const { registry, onChange, formData, value: initialValue } = props; const [lastValue, setLastValue] = useState(initialValue); const { StringField } = registry.fields; diff --git a/packages/core/src/components/fields/ObjectField.tsx b/packages/core/src/components/fields/ObjectField.tsx index 633ccc9cdb..5611ccbc74 100644 --- a/packages/core/src/components/fields/ObjectField.tsx +++ b/packages/core/src/components/fields/ObjectField.tsx @@ -5,6 +5,7 @@ import { orderProperties, ErrorSchema, FieldProps, + FormContextType, GenericObjectType, IdSchema, RJSFSchema, @@ -35,7 +36,7 @@ type ObjectFieldState = { class ObjectField< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > extends Component, ObjectFieldState> { /** Set up the initial state */ state = { diff --git a/packages/core/src/components/fields/SchemaField.tsx b/packages/core/src/components/fields/SchemaField.tsx index 4298d72bf6..efbb7bf823 100644 --- a/packages/core/src/components/fields/SchemaField.tsx +++ b/packages/core/src/components/fields/SchemaField.tsx @@ -8,6 +8,7 @@ import { ErrorSchema, FieldProps, FieldTemplateProps, + FormContextType, IdSchema, Registry, RJSFSchema, @@ -43,7 +44,7 @@ const COMPONENT_TYPES: { [key: string]: string } = { function getFieldComponent< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >( schema: S, uiOptions: UIOptionsType, @@ -101,7 +102,7 @@ function getFieldComponent< function SchemaFieldRender< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: FieldProps) { const { schema: _schema, @@ -384,7 +385,7 @@ function SchemaFieldRender< class SchemaField< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > extends React.Component> { shouldComponentUpdate(nextProps: Readonly>) { return !deepEquals(this.props, nextProps); diff --git a/packages/core/src/components/fields/StringField.tsx b/packages/core/src/components/fields/StringField.tsx index 3aaea89e88..3cbdd19270 100644 --- a/packages/core/src/components/fields/StringField.tsx +++ b/packages/core/src/components/fields/StringField.tsx @@ -5,6 +5,7 @@ import { optionsList, hasWidget, FieldProps, + FormContextType, RJSFSchema, StrictRJSFSchema, } from "@rjsf/utils"; @@ -13,9 +14,11 @@ import { * * @param props - The `FieldProps` for this template */ -function StringField( - props: FieldProps -) { +function StringField< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any +>(props: FieldProps) { const { schema, name, diff --git a/packages/core/src/components/fields/index.ts b/packages/core/src/components/fields/index.ts index 2a87120b4f..2f292ba140 100644 --- a/packages/core/src/components/fields/index.ts +++ b/packages/core/src/components/fields/index.ts @@ -1,5 +1,6 @@ import { Field, + FormContextType, RegistryFieldsType, RJSFSchema, StrictRJSFSchema, @@ -17,7 +18,7 @@ import NullField from "./NullField"; function fields< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(): RegistryFieldsType { return { AnyOfField: MultiSchemaField, diff --git a/packages/core/src/components/templates/ArrayFieldDescriptionTemplate.tsx b/packages/core/src/components/templates/ArrayFieldDescriptionTemplate.tsx index db54c0b1f2..b32f97e518 100644 --- a/packages/core/src/components/templates/ArrayFieldDescriptionTemplate.tsx +++ b/packages/core/src/components/templates/ArrayFieldDescriptionTemplate.tsx @@ -3,6 +3,7 @@ import { getTemplate, getUiOptions, ArrayFieldDescriptionProps, + FormContextType, RJSFSchema, StrictRJSFSchema, } from "@rjsf/utils"; @@ -15,7 +16,7 @@ import { export default function ArrayFieldDescriptionTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: ArrayFieldDescriptionProps) { const { idSchema, description, registry, schema, uiSchema } = props; const options = getUiOptions(uiSchema); diff --git a/packages/core/src/components/templates/ArrayFieldItemTemplate.tsx b/packages/core/src/components/templates/ArrayFieldItemTemplate.tsx index 076a8b98d3..5da0254d36 100644 --- a/packages/core/src/components/templates/ArrayFieldItemTemplate.tsx +++ b/packages/core/src/components/templates/ArrayFieldItemTemplate.tsx @@ -1,6 +1,7 @@ import React, { CSSProperties } from "react"; import { ArrayFieldTemplateItemType, + FormContextType, RJSFSchema, StrictRJSFSchema, } from "@rjsf/utils"; @@ -12,7 +13,7 @@ import { export default function ArrayFieldItemTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: ArrayFieldTemplateItemType) { const { children, diff --git a/packages/core/src/components/templates/ArrayFieldTemplate.tsx b/packages/core/src/components/templates/ArrayFieldTemplate.tsx index 710c1865d6..5b129e5e5d 100644 --- a/packages/core/src/components/templates/ArrayFieldTemplate.tsx +++ b/packages/core/src/components/templates/ArrayFieldTemplate.tsx @@ -4,6 +4,7 @@ import { getUiOptions, ArrayFieldTemplateProps, ArrayFieldTemplateItemType, + FormContextType, RJSFSchema, StrictRJSFSchema, } from "@rjsf/utils"; @@ -15,7 +16,7 @@ import { export default function ArrayFieldTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: ArrayFieldTemplateProps) { const { canAdd, diff --git a/packages/core/src/components/templates/ArrayFieldTitleTemplate.tsx b/packages/core/src/components/templates/ArrayFieldTitleTemplate.tsx index 275f108b2e..f57850b524 100644 --- a/packages/core/src/components/templates/ArrayFieldTitleTemplate.tsx +++ b/packages/core/src/components/templates/ArrayFieldTitleTemplate.tsx @@ -3,9 +3,10 @@ import { getTemplate, getUiOptions, ArrayFieldTitleProps, - TemplatesType, + FormContextType, RJSFSchema, StrictRJSFSchema, + TemplatesType, } from "@rjsf/utils"; /** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from @@ -16,7 +17,7 @@ import { export default function ArrayFieldTitleTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: ArrayFieldTitleProps) { const { idSchema, title, schema, uiSchema, required, registry } = props; const options = getUiOptions(uiSchema); diff --git a/packages/core/src/components/templates/BaseInputTemplate.tsx b/packages/core/src/components/templates/BaseInputTemplate.tsx index 5094b41391..642a113136 100644 --- a/packages/core/src/components/templates/BaseInputTemplate.tsx +++ b/packages/core/src/components/templates/BaseInputTemplate.tsx @@ -1,6 +1,7 @@ import React, { useCallback } from "react"; import { getInputProps, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -15,7 +16,7 @@ import { export default function BaseInputTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: WidgetProps) { const { id, diff --git a/packages/core/src/components/templates/ButtonTemplates/AddButton.tsx b/packages/core/src/components/templates/ButtonTemplates/AddButton.tsx index 7f8ca7367f..c8e3306be2 100644 --- a/packages/core/src/components/templates/ButtonTemplates/AddButton.tsx +++ b/packages/core/src/components/templates/ButtonTemplates/AddButton.tsx @@ -1,5 +1,10 @@ import React from "react"; -import { IconButtonProps, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; +import { + FormContextType, + IconButtonProps, + RJSFSchema, + StrictRJSFSchema, +} from "@rjsf/utils"; import IconButton from "./IconButton"; @@ -8,7 +13,7 @@ import IconButton from "./IconButton"; export default function AddButton< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >({ className, onClick, disabled }: IconButtonProps) { return (
diff --git a/packages/core/src/components/templates/ButtonTemplates/IconButton.tsx b/packages/core/src/components/templates/ButtonTemplates/IconButton.tsx index 5d9e3a8788..ac86b1cbf9 100644 --- a/packages/core/src/components/templates/ButtonTemplates/IconButton.tsx +++ b/packages/core/src/components/templates/ButtonTemplates/IconButton.tsx @@ -1,10 +1,15 @@ import React from "react"; -import { IconButtonProps, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; +import { + FormContextType, + IconButtonProps, + RJSFSchema, + StrictRJSFSchema, +} from "@rjsf/utils"; export default function IconButton< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: IconButtonProps) { const { iconType = "default", @@ -27,7 +32,7 @@ export default function IconButton< export function MoveDownButton< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: IconButtonProps) { return ( (props: IconButtonProps) { return ( (props: IconButtonProps) { return ( ({ uiSchema }: SubmitButtonProps) { const { submitText, diff --git a/packages/core/src/components/templates/ButtonTemplates/index.ts b/packages/core/src/components/templates/ButtonTemplates/index.ts index 5d22d8e5c9..0d1f73cd95 100644 --- a/packages/core/src/components/templates/ButtonTemplates/index.ts +++ b/packages/core/src/components/templates/ButtonTemplates/index.ts @@ -1,4 +1,9 @@ -import { RJSFSchema, StrictRJSFSchema, TemplatesType } from "@rjsf/utils"; +import { + FormContextType, + RJSFSchema, + StrictRJSFSchema, + TemplatesType, +} from "@rjsf/utils"; import SubmitButton from "./SubmitButton"; import AddButton from "./AddButton"; @@ -7,7 +12,7 @@ import { RemoveButton, MoveDownButton, MoveUpButton } from "./IconButton"; function buttonTemplates< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(): TemplatesType["ButtonTemplates"] { return { SubmitButton, diff --git a/packages/core/src/components/templates/DescriptionField.tsx b/packages/core/src/components/templates/DescriptionField.tsx index 61a0afa379..b6b2cad6c6 100644 --- a/packages/core/src/components/templates/DescriptionField.tsx +++ b/packages/core/src/components/templates/DescriptionField.tsx @@ -1,6 +1,7 @@ import React from "react"; import { DescriptionFieldProps, + FormContextType, RJSFSchema, StrictRJSFSchema, } from "@rjsf/utils"; @@ -12,7 +13,7 @@ import { export default function DescriptionField< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: DescriptionFieldProps) { const { id, description } = props; if (!description) { diff --git a/packages/core/src/components/templates/ErrorList.tsx b/packages/core/src/components/templates/ErrorList.tsx index 93b9ebe42b..c153c44303 100644 --- a/packages/core/src/components/templates/ErrorList.tsx +++ b/packages/core/src/components/templates/ErrorList.tsx @@ -1,6 +1,7 @@ import React from "react"; import { ErrorListProps, + FormContextType, RJSFValidationError, RJSFSchema, StrictRJSFSchema, @@ -13,7 +14,7 @@ import { export default function ErrorList< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >({ errors }: ErrorListProps) { return (
diff --git a/packages/core/src/components/templates/FieldErrorTemplate.tsx b/packages/core/src/components/templates/FieldErrorTemplate.tsx index 8889f8f8ce..e343389fcb 100644 --- a/packages/core/src/components/templates/FieldErrorTemplate.tsx +++ b/packages/core/src/components/templates/FieldErrorTemplate.tsx @@ -1,5 +1,10 @@ import React from "react"; -import { FieldErrorProps, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; +import { + FieldErrorProps, + FormContextType, + RJSFSchema, + StrictRJSFSchema, +} from "@rjsf/utils"; /** The `FieldErrorTemplate` component renders the errors local to the particular field * @@ -8,7 +13,7 @@ import { FieldErrorProps, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; export default function FieldErrorTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: FieldErrorProps) { const { errors = [], idSchema } = props; if (errors.length === 0) { diff --git a/packages/core/src/components/templates/FieldHelpTemplate.tsx b/packages/core/src/components/templates/FieldHelpTemplate.tsx index 5cf711d651..9601cb815b 100644 --- a/packages/core/src/components/templates/FieldHelpTemplate.tsx +++ b/packages/core/src/components/templates/FieldHelpTemplate.tsx @@ -1,5 +1,10 @@ import React from "react"; -import { FieldHelpProps, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; +import { + FieldHelpProps, + FormContextType, + RJSFSchema, + StrictRJSFSchema, +} from "@rjsf/utils"; /** The `FieldHelpTemplate` component renders any help desired for a field * @@ -8,7 +13,7 @@ import { FieldHelpProps, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; export default function FieldHelpTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: FieldHelpProps) { const { idSchema, help } = props; if (!help) { diff --git a/packages/core/src/components/templates/FieldTemplate/FieldTemplate.tsx b/packages/core/src/components/templates/FieldTemplate/FieldTemplate.tsx index 464fc29d0d..8016890289 100644 --- a/packages/core/src/components/templates/FieldTemplate/FieldTemplate.tsx +++ b/packages/core/src/components/templates/FieldTemplate/FieldTemplate.tsx @@ -1,6 +1,7 @@ import React from "react"; import { FieldTemplateProps, + FormContextType, RJSFSchema, StrictRJSFSchema, getTemplate, @@ -17,7 +18,7 @@ import Label from "./Label"; export default function FieldTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: FieldTemplateProps) { const { id, diff --git a/packages/core/src/components/templates/ObjectFieldTemplate.tsx b/packages/core/src/components/templates/ObjectFieldTemplate.tsx index 0ecdaf9d3c..37c371ca68 100644 --- a/packages/core/src/components/templates/ObjectFieldTemplate.tsx +++ b/packages/core/src/components/templates/ObjectFieldTemplate.tsx @@ -1,5 +1,6 @@ import React from "react"; import { + FormContextType, ObjectFieldTemplatePropertyType, ObjectFieldTemplateProps, RJSFSchema, @@ -18,7 +19,7 @@ import { export default function ObjectFieldTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: ObjectFieldTemplateProps) { const { description, diff --git a/packages/core/src/components/templates/TitleField.tsx b/packages/core/src/components/templates/TitleField.tsx index 2eec0ef8be..71a810b89b 100644 --- a/packages/core/src/components/templates/TitleField.tsx +++ b/packages/core/src/components/templates/TitleField.tsx @@ -1,5 +1,10 @@ import React from "react"; -import { TitleFieldProps, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; +import { + FormContextType, + TitleFieldProps, + RJSFSchema, + StrictRJSFSchema, +} from "@rjsf/utils"; const REQUIRED_FIELD_SYMBOL = "*"; @@ -10,7 +15,7 @@ const REQUIRED_FIELD_SYMBOL = "*"; export default function TitleField< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: TitleFieldProps) { const { id, title, required } = props; return ( diff --git a/packages/core/src/components/templates/UnsupportedField.tsx b/packages/core/src/components/templates/UnsupportedField.tsx index cfd5797512..be9fba48bb 100644 --- a/packages/core/src/components/templates/UnsupportedField.tsx +++ b/packages/core/src/components/templates/UnsupportedField.tsx @@ -1,5 +1,6 @@ import React from "react"; import { + FormContextType, UnsupportedFieldProps, RJSFSchema, StrictRJSFSchema, @@ -13,7 +14,7 @@ import { function UnsupportedField< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: UnsupportedFieldProps) { const { schema, idSchema, reason } = props; return ( diff --git a/packages/core/src/components/templates/WrapIfAdditionalTemplate.tsx b/packages/core/src/components/templates/WrapIfAdditionalTemplate.tsx index 4041416dab..35b6cb8bc0 100644 --- a/packages/core/src/components/templates/WrapIfAdditionalTemplate.tsx +++ b/packages/core/src/components/templates/WrapIfAdditionalTemplate.tsx @@ -1,6 +1,7 @@ import React from "react"; import { ADDITIONAL_PROPERTY_FLAG, + FormContextType, RJSFSchema, StrictRJSFSchema, WrapIfAdditionalTemplateProps, @@ -16,7 +17,7 @@ import Label from "./FieldTemplate/Label"; export default function WrapIfAdditionalTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: WrapIfAdditionalTemplateProps) { const { id, diff --git a/packages/core/src/components/templates/index.ts b/packages/core/src/components/templates/index.ts index ab929e01ea..5a7e8c7cc4 100644 --- a/packages/core/src/components/templates/index.ts +++ b/packages/core/src/components/templates/index.ts @@ -1,4 +1,9 @@ -import { RJSFSchema, StrictRJSFSchema, TemplatesType } from "@rjsf/utils"; +import { + FormContextType, + RJSFSchema, + StrictRJSFSchema, + TemplatesType, +} from "@rjsf/utils"; import ArrayFieldDescriptionTemplate from "./ArrayFieldDescriptionTemplate"; import ArrayFieldItemTemplate from "./ArrayFieldItemTemplate"; @@ -19,7 +24,7 @@ import WrapIfAdditionalTemplate from "./WrapIfAdditionalTemplate"; function templates< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(): TemplatesType { return { ArrayFieldDescriptionTemplate, diff --git a/packages/core/src/components/widgets/AltDateTimeWidget.tsx b/packages/core/src/components/widgets/AltDateTimeWidget.tsx index de53994b49..95feb18bee 100644 --- a/packages/core/src/components/widgets/AltDateTimeWidget.tsx +++ b/packages/core/src/components/widgets/AltDateTimeWidget.tsx @@ -1,4 +1,9 @@ -import { RJSFSchema, StrictRJSFSchema, WidgetProps } from "@rjsf/utils"; +import { + FormContextType, + RJSFSchema, + StrictRJSFSchema, + WidgetProps, +} from "@rjsf/utils"; import React from "react"; /** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties. @@ -9,7 +14,7 @@ import React from "react"; function AltDateTimeWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >({ time = true, ...props }: WidgetProps) { const { AltDateWidget } = props.registry.widgets; return ; diff --git a/packages/core/src/components/widgets/AltDateWidget.tsx b/packages/core/src/components/widgets/AltDateWidget.tsx index 022eae0cfb..4f4f4f5545 100644 --- a/packages/core/src/components/widgets/AltDateWidget.tsx +++ b/packages/core/src/components/widgets/AltDateWidget.tsx @@ -5,6 +5,7 @@ import { toDateString, pad, DateObject, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -50,7 +51,7 @@ function dateElementProps( type DateElementProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = Pick< WidgetProps, | "value" @@ -70,7 +71,7 @@ type DateElementProps< function DateElement< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >({ type, range, @@ -112,7 +113,7 @@ function DateElement< function AltDateWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >({ time = false, disabled = false, diff --git a/packages/core/src/components/widgets/CheckboxWidget.tsx b/packages/core/src/components/widgets/CheckboxWidget.tsx index 5cd2b74a09..c180c3ddb7 100644 --- a/packages/core/src/components/widgets/CheckboxWidget.tsx +++ b/packages/core/src/components/widgets/CheckboxWidget.tsx @@ -2,6 +2,7 @@ import React, { useCallback } from "react"; import { getTemplate, schemaRequiresTrueValue, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -15,7 +16,7 @@ import { function CheckboxWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >({ schema, uiSchema, diff --git a/packages/core/src/components/widgets/CheckboxesWidget.tsx b/packages/core/src/components/widgets/CheckboxesWidget.tsx index a941677035..2040e1aa69 100644 --- a/packages/core/src/components/widgets/CheckboxesWidget.tsx +++ b/packages/core/src/components/widgets/CheckboxesWidget.tsx @@ -1,5 +1,10 @@ import React, { ChangeEvent } from "react"; -import { WidgetProps, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; +import { + FormContextType, + WidgetProps, + RJSFSchema, + StrictRJSFSchema, +} from "@rjsf/utils"; function selectValue(value: any, selected: any[], all: any[]) { const at = all.indexOf(value); @@ -21,7 +26,7 @@ function deselectValue(value: any, selected: any[]) { function CheckboxesWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >({ id, disabled, diff --git a/packages/core/src/components/widgets/ColorWidget.tsx b/packages/core/src/components/widgets/ColorWidget.tsx index 473425c8e1..f7d23afd0b 100644 --- a/packages/core/src/components/widgets/ColorWidget.tsx +++ b/packages/core/src/components/widgets/ColorWidget.tsx @@ -1,6 +1,7 @@ import React from "react"; import { getTemplate, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -14,7 +15,7 @@ import { export default function ColorWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: WidgetProps) { const { disabled, readonly, options, registry } = props; const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>( diff --git a/packages/core/src/components/widgets/DateTimeWidget.tsx b/packages/core/src/components/widgets/DateTimeWidget.tsx index 7fc260b50d..855d308dda 100644 --- a/packages/core/src/components/widgets/DateTimeWidget.tsx +++ b/packages/core/src/components/widgets/DateTimeWidget.tsx @@ -3,6 +3,7 @@ import { getTemplate, localToUTC, utcToLocal, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -16,7 +17,7 @@ import { export default function DateTimeWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: WidgetProps) { const { onChange, value, options, registry } = props; const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>( diff --git a/packages/core/src/components/widgets/DateWidget.tsx b/packages/core/src/components/widgets/DateWidget.tsx index 87291d8b10..3b717be5e0 100644 --- a/packages/core/src/components/widgets/DateWidget.tsx +++ b/packages/core/src/components/widgets/DateWidget.tsx @@ -1,6 +1,7 @@ import React, { useCallback } from "react"; import { getTemplate, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -14,7 +15,7 @@ import { export default function DateWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: WidgetProps) { const { onChange, options, registry } = props; const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>( diff --git a/packages/core/src/components/widgets/EmailWidget.tsx b/packages/core/src/components/widgets/EmailWidget.tsx index c0fd138395..078f0e5c08 100644 --- a/packages/core/src/components/widgets/EmailWidget.tsx +++ b/packages/core/src/components/widgets/EmailWidget.tsx @@ -1,6 +1,7 @@ import React from "react"; import { getTemplate, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -13,7 +14,7 @@ import { export default function EmailWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: WidgetProps) { const { options, registry } = props; const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>( diff --git a/packages/core/src/components/widgets/FileWidget.tsx b/packages/core/src/components/widgets/FileWidget.tsx index 87095c0df9..d83ac150a0 100644 --- a/packages/core/src/components/widgets/FileWidget.tsx +++ b/packages/core/src/components/widgets/FileWidget.tsx @@ -2,6 +2,7 @@ import React, { ChangeEvent, useCallback, useMemo, useState } from "react"; import { dataURItoBlob, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -90,7 +91,11 @@ function extractFileInfo(dataURLs: string[]) { * The `FileWidget` is a widget for rendering file upload fields. * It is typically used with a string property with data-url format. */ -function FileWidget({ +function FileWidget< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any +>({ multiple, id, readonly, diff --git a/packages/core/src/components/widgets/HiddenWidget.tsx b/packages/core/src/components/widgets/HiddenWidget.tsx index d2a64d4cdd..390c3cebb1 100644 --- a/packages/core/src/components/widgets/HiddenWidget.tsx +++ b/packages/core/src/components/widgets/HiddenWidget.tsx @@ -1,5 +1,10 @@ import React from "react"; -import { RJSFSchema, StrictRJSFSchema, WidgetProps } from "@rjsf/utils"; +import { + FormContextType, + RJSFSchema, + StrictRJSFSchema, + WidgetProps, +} from "@rjsf/utils"; /** The `HiddenWidget` is a widget for rendering a hidden input field. * It is typically used by setting type to "hidden". @@ -9,7 +14,7 @@ import { RJSFSchema, StrictRJSFSchema, WidgetProps } from "@rjsf/utils"; function HiddenWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >({ id, value }: WidgetProps) { return ( (props: WidgetProps) { const { options, registry } = props; const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>( diff --git a/packages/core/src/components/widgets/RadioWidget.tsx b/packages/core/src/components/widgets/RadioWidget.tsx index 4bdac401a8..7bd6fd201c 100644 --- a/packages/core/src/components/widgets/RadioWidget.tsx +++ b/packages/core/src/components/widgets/RadioWidget.tsx @@ -1,5 +1,10 @@ import React, { FocusEvent, useCallback } from "react"; -import { RJSFSchema, StrictRJSFSchema, WidgetProps } from "@rjsf/utils"; +import { + FormContextType, + RJSFSchema, + StrictRJSFSchema, + WidgetProps, +} from "@rjsf/utils"; /** The `RadioWidget` is a widget for rendering a radio group. * It is typically used with a string property constrained with enum options. @@ -9,7 +14,7 @@ import { RJSFSchema, StrictRJSFSchema, WidgetProps } from "@rjsf/utils"; function RadioWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >({ options, value, diff --git a/packages/core/src/components/widgets/RangeWidget.tsx b/packages/core/src/components/widgets/RangeWidget.tsx index ab9107b0d2..e28eee41a4 100644 --- a/packages/core/src/components/widgets/RangeWidget.tsx +++ b/packages/core/src/components/widgets/RangeWidget.tsx @@ -1,5 +1,10 @@ import React from "react"; -import { RJSFSchema, StrictRJSFSchema, WidgetProps } from "@rjsf/utils"; +import { + FormContextType, + RJSFSchema, + StrictRJSFSchema, + WidgetProps, +} from "@rjsf/utils"; /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result * in a div, with the value along side it. @@ -9,7 +14,7 @@ import { RJSFSchema, StrictRJSFSchema, WidgetProps } from "@rjsf/utils"; export default function RangeWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: WidgetProps) { const { value, diff --git a/packages/core/src/components/widgets/SelectWidget.tsx b/packages/core/src/components/widgets/SelectWidget.tsx index b5fb460a7b..3cbb8374f1 100644 --- a/packages/core/src/components/widgets/SelectWidget.tsx +++ b/packages/core/src/components/widgets/SelectWidget.tsx @@ -1,6 +1,7 @@ import React, { ChangeEvent, FocusEvent, useCallback } from "react"; import { processSelectValue, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -27,7 +28,7 @@ function getValue( function SelectWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >({ schema, id, diff --git a/packages/core/src/components/widgets/TextWidget.tsx b/packages/core/src/components/widgets/TextWidget.tsx index 28e5ff86db..33df6394ea 100644 --- a/packages/core/src/components/widgets/TextWidget.tsx +++ b/packages/core/src/components/widgets/TextWidget.tsx @@ -1,6 +1,7 @@ import React from "react"; import { getTemplate, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -13,7 +14,7 @@ import { export default function TextWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: WidgetProps) { const { options, registry } = props; const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>( diff --git a/packages/core/src/components/widgets/TextareaWidget.tsx b/packages/core/src/components/widgets/TextareaWidget.tsx index f76ec91663..d34df50b30 100644 --- a/packages/core/src/components/widgets/TextareaWidget.tsx +++ b/packages/core/src/components/widgets/TextareaWidget.tsx @@ -1,5 +1,10 @@ import React, { FocusEvent, useCallback } from "react"; -import { RJSFSchema, StrictRJSFSchema, WidgetProps } from "@rjsf/utils"; +import { + FormContextType, + RJSFSchema, + StrictRJSFSchema, + WidgetProps, +} from "@rjsf/utils"; /** The `TextareaWidget` is a widget for rendering input fields as textarea. * @@ -8,7 +13,7 @@ import { RJSFSchema, StrictRJSFSchema, WidgetProps } from "@rjsf/utils"; function TextareaWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >({ id, options = {}, diff --git a/packages/core/src/components/widgets/URLWidget.tsx b/packages/core/src/components/widgets/URLWidget.tsx index d51fadefba..d4a6bab12b 100644 --- a/packages/core/src/components/widgets/URLWidget.tsx +++ b/packages/core/src/components/widgets/URLWidget.tsx @@ -1,6 +1,7 @@ import React from "react"; import { getTemplate, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -13,7 +14,7 @@ import { export default function URLWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: WidgetProps) { const { options, registry } = props; const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>( diff --git a/packages/core/src/components/widgets/UpDownWidget.tsx b/packages/core/src/components/widgets/UpDownWidget.tsx index f136e62361..90dcb16f3f 100644 --- a/packages/core/src/components/widgets/UpDownWidget.tsx +++ b/packages/core/src/components/widgets/UpDownWidget.tsx @@ -1,6 +1,7 @@ import React from "react"; import { getTemplate, + FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, @@ -13,7 +14,7 @@ import { export default function UpDownWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(props: WidgetProps) { const { options, registry } = props; const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>( diff --git a/packages/core/src/components/widgets/index.ts b/packages/core/src/components/widgets/index.ts index f3703d73b4..bcb85b1aba 100644 --- a/packages/core/src/components/widgets/index.ts +++ b/packages/core/src/components/widgets/index.ts @@ -1,4 +1,9 @@ -import { RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; +import { + FormContextType, + RegistryWidgetsType, + RJSFSchema, + StrictRJSFSchema, +} from "@rjsf/utils"; import AltDateWidget from "./AltDateWidget"; import AltDateTimeWidget from "./AltDateTimeWidget"; @@ -22,7 +27,7 @@ import UpDownWidget from "./UpDownWidget"; function widgets< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(): RegistryWidgetsType { return { PasswordWidget, diff --git a/packages/core/src/getDefaultRegistry.ts b/packages/core/src/getDefaultRegistry.ts index 9ed699e263..3d91fdd2c5 100644 --- a/packages/core/src/getDefaultRegistry.ts +++ b/packages/core/src/getDefaultRegistry.ts @@ -1,4 +1,9 @@ -import { Registry, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; +import { + FormContextType, + Registry, + RJSFSchema, + StrictRJSFSchema, +} from "@rjsf/utils"; import fields from "./components/fields"; import templates from "./components/templates"; @@ -11,7 +16,7 @@ import widgets from "./components/widgets"; export default function getDefaultRegistry< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(): Omit, "schemaUtils"> { return { fields: fields(), diff --git a/packages/core/src/withTheme.tsx b/packages/core/src/withTheme.tsx index 4a0e500a96..b3c03bdac5 100644 --- a/packages/core/src/withTheme.tsx +++ b/packages/core/src/withTheme.tsx @@ -1,7 +1,7 @@ import React, { ForwardedRef, forwardRef } from "react"; import Form, { FormProps } from "./components/Form"; -import { RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; +import { FormContextType, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; /** The properties for the `withTheme` function, essentially a subset of properties from the `FormProps` that can be * overridden while creating a theme @@ -9,7 +9,7 @@ import { RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"; export type ThemeProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = Pick< FormProps, "fields" | "templates" | "widgets" | "_internalFormWrapper" @@ -19,7 +19,7 @@ export type ThemeProps< export default function withTheme< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(themeProps: ThemeProps) { return forwardRef( ( diff --git a/packages/utils/src/canExpand.ts b/packages/utils/src/canExpand.ts index 841854ad2b..ce3aa43d5a 100644 --- a/packages/utils/src/canExpand.ts +++ b/packages/utils/src/canExpand.ts @@ -1,4 +1,9 @@ -import { RJSFSchema, StrictRJSFSchema, UiSchema } from "./types"; +import { + FormContextType, + RJSFSchema, + StrictRJSFSchema, + UiSchema, +} from "./types"; import getUiOptions from "./getUiOptions"; /** Checks whether the field described by `schema`, having the `uiSchema` and `formData` supports expanding. The UI for @@ -13,7 +18,7 @@ import getUiOptions from "./getUiOptions"; export default function canExpand< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(schema: RJSFSchema, uiSchema: UiSchema = {}, formData?: T) { if (!schema.additionalProperties) { return false; diff --git a/packages/utils/src/createSchemaUtils.ts b/packages/utils/src/createSchemaUtils.ts index fb71bb01d9..ef269b191b 100644 --- a/packages/utils/src/createSchemaUtils.ts +++ b/packages/utils/src/createSchemaUtils.ts @@ -1,6 +1,7 @@ import deepEquals from "./deepEquals"; import { ErrorSchema, + FormContextType, IdSchema, PathSchema, RJSFSchema, @@ -28,8 +29,11 @@ import { * and `rootSchema` generally does not change across a `Form`, this allows for providing a simplified set of APIs to the * `@rjsf/core` components and the various themes as well. This class implements the `SchemaUtilsType` interface. */ -class SchemaUtils - implements SchemaUtilsType +class SchemaUtils< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any +> implements SchemaUtilsType { rootSchema: S; validator: ValidatorType; @@ -250,7 +254,7 @@ class SchemaUtils export default function createSchemaUtils< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(validator: ValidatorType, rootSchema: S): SchemaUtilsType { return new SchemaUtils(validator, rootSchema); } diff --git a/packages/utils/src/getInputProps.ts b/packages/utils/src/getInputProps.ts index 847807ea81..95b669333e 100644 --- a/packages/utils/src/getInputProps.ts +++ b/packages/utils/src/getInputProps.ts @@ -1,5 +1,6 @@ import rangeSpec from "./rangeSpec"; import { + FormContextType, InputPropsType, RJSFSchema, StrictRJSFSchema, @@ -17,7 +18,7 @@ import { export default function getInputProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >( schema: RJSFSchema, defaultType?: string, diff --git a/packages/utils/src/getSubmitButtonOptions.ts b/packages/utils/src/getSubmitButtonOptions.ts index 451abbcc48..9fbd4289b4 100644 --- a/packages/utils/src/getSubmitButtonOptions.ts +++ b/packages/utils/src/getSubmitButtonOptions.ts @@ -1,6 +1,7 @@ import { SUBMIT_BTN_OPTIONS_KEY } from "./constants"; import getUiOptions from "./getUiOptions"; import { + FormContextType, RJSFSchema, StrictRJSFSchema, UiSchema, @@ -25,7 +26,7 @@ export const DEFAULT_OPTIONS: UISchemaSubmitButtonOptions = { export default function getSubmitButtonOptions< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(uiSchema: UiSchema = {}): UISchemaSubmitButtonOptions { const uiOptions = getUiOptions(uiSchema); if (uiOptions && uiOptions[SUBMIT_BTN_OPTIONS_KEY]) { diff --git a/packages/utils/src/getTemplate.ts b/packages/utils/src/getTemplate.ts index a7ec9ed8f1..b64d20f7e8 100644 --- a/packages/utils/src/getTemplate.ts +++ b/packages/utils/src/getTemplate.ts @@ -1,4 +1,5 @@ import { + FormContextType, TemplatesType, Registry, UIOptionsType, @@ -18,7 +19,7 @@ export default function getTemplate< Name extends keyof TemplatesType, T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >( name: Name, registry: Registry, diff --git a/packages/utils/src/getUiOptions.ts b/packages/utils/src/getUiOptions.ts index d7655b4cb1..13f0a135b6 100644 --- a/packages/utils/src/getUiOptions.ts +++ b/packages/utils/src/getUiOptions.ts @@ -1,6 +1,12 @@ import { UI_OPTIONS_KEY, UI_WIDGET_KEY } from "./constants"; import isObject from "./isObject"; -import { RJSFSchema, StrictRJSFSchema, UIOptionsType, UiSchema } from "./types"; +import { + FormContextType, + RJSFSchema, + StrictRJSFSchema, + UIOptionsType, + UiSchema, +} from "./types"; /** Get all passed options from ui:options, and ui:, returning them in an object with the `ui:` * stripped off. @@ -11,7 +17,7 @@ import { RJSFSchema, StrictRJSFSchema, UIOptionsType, UiSchema } from "./types"; export default function getUiOptions< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(uiSchema: UiSchema = {}): UIOptionsType { return Object.keys(uiSchema) .filter((key) => key.indexOf("ui:") === 0) diff --git a/packages/utils/src/getWidget.tsx b/packages/utils/src/getWidget.tsx index f825b64aa6..3cf8bb8439 100644 --- a/packages/utils/src/getWidget.tsx +++ b/packages/utils/src/getWidget.tsx @@ -4,6 +4,7 @@ import get from "lodash/get"; import set from "lodash/set"; import { + FormContextType, RJSFSchema, Widget, RegistryWidgetsType, @@ -75,7 +76,7 @@ const widgetMap: { [k: string]: { [j: string]: string } } = { function mergeWidgetOptions< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(AWidget: Widget) { let MergedWidget: Widget = get(AWidget, "MergedWidget"); // cache return value as property of widget for proper react reconciliation @@ -104,7 +105,7 @@ function mergeWidgetOptions< export default function getWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >( schema: RJSFSchema, widget?: Widget | string, diff --git a/packages/utils/src/hasWidget.ts b/packages/utils/src/hasWidget.ts index 2e5816fbce..b83f31a145 100644 --- a/packages/utils/src/hasWidget.ts +++ b/packages/utils/src/hasWidget.ts @@ -1,5 +1,6 @@ import getWidget from "./getWidget"; import { + FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema, @@ -17,7 +18,7 @@ import { export default function hasWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >( schema: RJSFSchema, widget: Widget | string, diff --git a/packages/utils/src/isCustomWidget.ts b/packages/utils/src/isCustomWidget.ts index d3c291c74c..e0982ea1db 100644 --- a/packages/utils/src/isCustomWidget.ts +++ b/packages/utils/src/isCustomWidget.ts @@ -1,5 +1,10 @@ import getUiOptions from "./getUiOptions"; -import { RJSFSchema, StrictRJSFSchema, UiSchema } from "./types"; +import { + FormContextType, + RJSFSchema, + StrictRJSFSchema, + UiSchema, +} from "./types"; /** Checks to see if the `uiSchema` contains the `widget` field and that the widget is not `hidden` * @@ -9,7 +14,7 @@ import { RJSFSchema, StrictRJSFSchema, UiSchema } from "./types"; export default function isCustomWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(uiSchema: UiSchema = {}) { return ( // TODO: Remove the `&& uiSchema['ui:widget'] !== 'hidden'` once we support hidden widgets for arrays. diff --git a/packages/utils/src/processSelectValue.ts b/packages/utils/src/processSelectValue.ts index 522ac4226e..37ed340ed9 100644 --- a/packages/utils/src/processSelectValue.ts +++ b/packages/utils/src/processSelectValue.ts @@ -1,6 +1,11 @@ import get from "lodash/get"; -import { RJSFSchema, StrictRJSFSchema, UIOptionsType } from "./types"; +import { + FormContextType, + RJSFSchema, + StrictRJSFSchema, + UIOptionsType, +} from "./types"; import asNumber from "./asNumber"; import guessType from "./guessType"; @@ -18,7 +23,7 @@ const nums = new Set(["number", "integer"]); export default function processSelectValue< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >(schema: S, value?: any, options?: UIOptionsType) { const { enum: schemaEnum, type, items } = schema; if (value === "") { diff --git a/packages/utils/src/schema/getDisplayLabel.ts b/packages/utils/src/schema/getDisplayLabel.ts index 856565ab4b..ca9bfc6cc2 100644 --- a/packages/utils/src/schema/getDisplayLabel.ts +++ b/packages/utils/src/schema/getDisplayLabel.ts @@ -3,6 +3,7 @@ import getSchemaType from "../getSchemaType"; import getUiOptions from "../getUiOptions"; import isCustomWidget from "../isCustomWidget"; import { + FormContextType, RJSFSchema, StrictRJSFSchema, UiSchema, @@ -23,7 +24,7 @@ import isMultiSelect from "./isMultiSelect"; export default function getDisplayLabel< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >( validator: ValidatorType, schema: S, diff --git a/packages/utils/src/schema/isFilesArray.ts b/packages/utils/src/schema/isFilesArray.ts index 079728dbe8..1fa06130ad 100644 --- a/packages/utils/src/schema/isFilesArray.ts +++ b/packages/utils/src/schema/isFilesArray.ts @@ -1,5 +1,6 @@ import { UI_WIDGET_KEY } from "../constants"; import { + FormContextType, RJSFSchema, StrictRJSFSchema, UiSchema, @@ -18,7 +19,7 @@ import retrieveSchema from "./retrieveSchema"; export default function isFilesArray< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any >( validator: ValidatorType, schema: S, diff --git a/packages/utils/src/types.ts b/packages/utils/src/types.ts index 398cb80492..6e08850770 100644 --- a/packages/utils/src/types.ts +++ b/packages/utils/src/types.ts @@ -8,8 +8,8 @@ export type GenericObjectType = { [name: string]: any; }; -/** Map the JSONSchema7 to our own type so that we can easily bump to JSONSchema8 at some future date and only have to - * update this one type. +/** Map the JSONSchema7 to our own type so that we can easily bump to a more recent version at some future date and only + * have to update this one type. */ export type StrictRJSFSchema = JSONSchema7; @@ -17,6 +17,10 @@ export type StrictRJSFSchema = JSONSchema7; */ export type RJSFSchema = StrictRJSFSchema & GenericObjectType; +/** Alias GenericObjectType as FormContextType to allow us to remap this at some future date + */ +export type FormContextType = GenericObjectType; + /** The interface representing a Date object that contains an optional time */ export interface DateObject { /** The year of the Date */ @@ -131,7 +135,7 @@ export type FormValidation = FieldValidation & { export type ErrorListProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** The errorSchema constructed by `Form` */ errorSchema: ErrorSchema; @@ -149,7 +153,7 @@ export type ErrorListProps< export type FieldErrorProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** The errorSchema constructed by `Form` */ errorSchema?: ErrorSchema; @@ -169,7 +173,7 @@ export type FieldErrorProps< export type FieldHelpProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** The help information to be rendered */ help?: string | React.ReactElement; @@ -189,7 +193,7 @@ export type FieldHelpProps< export type RegistryFieldsType< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** A `Field` indexed by `name` */ [name: string]: Field; @@ -199,7 +203,7 @@ export type RegistryFieldsType< export type RegistryWidgetsType< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** A `Widget` indexed by `name` */ [name: string]: Widget; @@ -209,7 +213,7 @@ export type RegistryWidgetsType< export interface TemplatesType< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > { /** The template to use while rendering normal or fixed array fields */ ArrayFieldTemplate: React.ComponentType>; @@ -266,7 +270,7 @@ export interface TemplatesType< export interface Registry< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > { /** The set of all fields used by the `Form`. Includes fields from `core`, theme-specific fields and any custom * registered fields @@ -294,7 +298,7 @@ export interface Registry< export interface FieldProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > extends GenericObjectType, Pick< React.HTMLAttributes, @@ -341,14 +345,14 @@ export interface FieldProps< export type Field< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = React.ComponentType>; /** The properties that are passed to a FieldTemplate implementation */ export type FieldTemplateProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget */ id: string; @@ -410,7 +414,7 @@ export type FieldTemplateProps< export type UnsupportedFieldProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** The schema object for this field */ schema: S; @@ -426,7 +430,7 @@ export type UnsupportedFieldProps< export type TitleFieldProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** The id of the field title in the hierarchy */ id: string; @@ -446,7 +450,7 @@ export type TitleFieldProps< export type DescriptionFieldProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** The id of the field description in the hierarchy */ id: string; @@ -464,7 +468,7 @@ export type DescriptionFieldProps< export type ArrayFieldTitleProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = Omit, "id" | "title"> & { /** The title for the field being rendered */ title?: string; @@ -476,7 +480,7 @@ export type ArrayFieldTitleProps< export type ArrayFieldDescriptionProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = Omit, "id" | "description"> & { /** The description of the field being rendered */ description?: string | React.ReactElement; @@ -488,7 +492,7 @@ export type ArrayFieldDescriptionProps< export type ArrayFieldTemplateItemType< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** The html for the item's content */ children: React.ReactElement; @@ -526,7 +530,7 @@ export type ArrayFieldTemplateItemType< export type ArrayFieldTemplateProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** A boolean value stating whether new elements can be added to the array */ canAdd?: boolean; @@ -580,7 +584,7 @@ export type ObjectFieldTemplatePropertyType = { export type ObjectFieldTemplateProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** A string value containing the title for the object */ title: string; @@ -616,7 +620,7 @@ export type ObjectFieldTemplateProps< export type WrapIfAdditionalTemplateProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** The field or widget component instance for this field row */ children: React.ReactNode; @@ -639,7 +643,7 @@ export type WrapIfAdditionalTemplateProps< export interface WidgetProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > extends GenericObjectType, Pick< React.HTMLAttributes, @@ -694,14 +698,14 @@ export interface WidgetProps< export type Widget< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = React.ComponentType>; /** The type that defines the props used by the Submit button */ export type SubmitButtonProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = { /** The uiSchema for this widget */ uiSchema?: UiSchema; @@ -711,7 +715,7 @@ export type SubmitButtonProps< export type IconButtonProps< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = React.ButtonHTMLAttributes & { /** An alternative specification for the type of the icon button */ iconType?: string; @@ -757,7 +761,7 @@ type MakeUIType = { type UIOptionsBaseType< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = Partial, "ButtonTemplates">> & { /** Any classnames that the user wants to be applied to a field in the ui */ classNames?: string; @@ -817,7 +821,7 @@ type UIOptionsBaseType< export type UIOptionsType< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = UIOptionsBaseType & { /** Anything else will be one of these types */ [key: string]: boolean | number | string | object | any[] | null | undefined; @@ -829,7 +833,7 @@ export type UIOptionsType< export type UiSchema< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > = GenericObjectType & MakeUIType> & { /** Allows the form to generate a unique prefix for the `Form`'s root prefix */ @@ -926,7 +930,7 @@ export interface ValidatorType< export interface SchemaUtilsType< T = any, S extends StrictRJSFSchema = RJSFSchema, - F = any + F extends FormContextType = any > { /** Returns the `ValidatorType` in the `SchemaUtilsType` *