diff --git a/CHANGELOG.md b/CHANGELOG.md index b9a9e62ab2..9498a73675 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,9 +17,30 @@ should change the heading of the (upcoming) version to include a major version b --> # 6.0.0-beta.22 +## @rjsf/antd + +- Updated most of the widgets to get `formContext` from the `registry` instead of the `props` since it will no longer be passed + ## @rjsf/core - Updated `MultiSchemaField` and `SchemaField` to properly display `anyOf`/`oneOf` optional data fields by hiding the label and selector control when it is an optional field AND there is no form data +- Updated `ArrayField`, `BooleanField`, `LayoutMultiSchemaField`, `MultiSchemaField`, `ObjectField`, `SchemaField`, `StringField` and `BaseInputTemplate` to remove `formContext` from the props + +## @rjsf/daisyui + +- Updated the test mocks to remove `formContext` for the widget mock + +## @rjsf/mui + +- Updated `BaseInputTemplate` and `SelectWidget` to remove `formContext` from the props + +## @rjsf/primereact + +- Updated `SelectWidget` to remove `formContext` from the props + +## @rjsf/shadcn + +- Updated the test mocks to remove `formContext` for the widget mock and added `globalFormOptions` in the registry mock ## Dev / docs / playground - Updated the `formTests.tsx` snapshots to add an `anyOf` of all arrays with different item types and removed the disabling of the optional data controls feature for the optional object with oneOfs @@ -27,6 +48,7 @@ should change the heading of the (upcoming) version to include a major version b - Updated the playground to make the same changes as `formTests.tsx` in the `optionalDataControls.ts` sample, moving the `experimental_defaultFormStateBehavior` inside of a `liveSettings` block - Updated the `Sample` and `LiveSettings` types to support the `liveSettings` inside of a sample - Updated the `Playground`'s `onSampleSelected` callback to merge any `liveSettings` in the sample on top of those already used in the playground +- Updated the `customFieldAnyOf` sample to switch `IdSchema` to `FieldPathId` # 6.0.0-beta.21 diff --git a/packages/antd/src/templates/BaseInputTemplate/index.tsx b/packages/antd/src/templates/BaseInputTemplate/index.tsx index 6267f1084b..b7f0da42c7 100644 --- a/packages/antd/src/templates/BaseInputTemplate/index.tsx +++ b/packages/antd/src/templates/BaseInputTemplate/index.tsx @@ -28,7 +28,7 @@ export default function BaseInputTemplate< >(props: BaseInputTemplateProps) { const { disabled, - formContext, + registry, id, onBlur, onChange, @@ -41,6 +41,7 @@ export default function BaseInputTemplate< value, type, } = props; + const { formContext } = registry; const inputProps = getInputProps(schema, type, options, false); const { readonlyAsDisabled = true } = formContext as GenericObjectType; diff --git a/packages/antd/src/widgets/AltDateWidget/index.tsx b/packages/antd/src/widgets/AltDateWidget/index.tsx index e9e71d38fd..d284d0aa3e 100644 --- a/packages/antd/src/widgets/AltDateWidget/index.tsx +++ b/packages/antd/src/widgets/AltDateWidget/index.tsx @@ -34,21 +34,8 @@ export default function AltDateWidget< S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, >(props: WidgetProps) { - const { - autofocus, - disabled, - formContext, - id, - onBlur, - onChange, - onFocus, - options, - readonly, - registry, - showTime, - value, - } = props; - const { translateString, widgets } = registry; + const { autofocus, disabled, id, onBlur, onChange, onFocus, options, readonly, registry, showTime, value } = props; + const { formContext, translateString, widgets } = registry; const { SelectWidget } = widgets; const { rowGutter = 24 } = formContext as GenericObjectType; diff --git a/packages/antd/src/widgets/CheckboxWidget/index.tsx b/packages/antd/src/widgets/CheckboxWidget/index.tsx index 9325706461..03d328bafe 100644 --- a/packages/antd/src/widgets/CheckboxWidget/index.tsx +++ b/packages/antd/src/widgets/CheckboxWidget/index.tsx @@ -20,7 +20,8 @@ export default function CheckboxWidget< S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, >(props: WidgetProps) { - const { autofocus, disabled, formContext, id, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props; + const { autofocus, disabled, registry, id, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props; + const { formContext } = registry; const { readonlyAsDisabled = true } = formContext as GenericObjectType; const handleChange: NonNullable = ({ target }) => onChange(target.checked); diff --git a/packages/antd/src/widgets/CheckboxesWidget/index.tsx b/packages/antd/src/widgets/CheckboxesWidget/index.tsx index c60bf658ec..66d3b2e51d 100644 --- a/packages/antd/src/widgets/CheckboxesWidget/index.tsx +++ b/packages/antd/src/widgets/CheckboxesWidget/index.tsx @@ -21,7 +21,8 @@ export default function CheckboxesWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, ->({ autofocus, disabled, formContext, id, onBlur, onChange, onFocus, options, readonly, value }: WidgetProps) { +>({ autofocus, disabled, registry, id, onBlur, onChange, onFocus, options, readonly, value }: WidgetProps) { + const { formContext } = registry; const { readonlyAsDisabled = true } = formContext as GenericObjectType; const { enumOptions, enumDisabled, inline, emptyValue } = options; diff --git a/packages/antd/src/widgets/DateTimeWidget/index.tsx b/packages/antd/src/widgets/DateTimeWidget/index.tsx index caa84f5694..45205757b6 100644 --- a/packages/antd/src/widgets/DateTimeWidget/index.tsx +++ b/packages/antd/src/widgets/DateTimeWidget/index.tsx @@ -24,7 +24,8 @@ export default function DateTimeWidget< S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, >(props: WidgetProps) { - const { disabled, formContext, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props; + const { disabled, registry, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props; + const { formContext } = registry; const { readonlyAsDisabled = true } = formContext as GenericObjectType; const handleChange = (nextValue: any) => onChange(nextValue && nextValue.toISOString()); diff --git a/packages/antd/src/widgets/DateWidget/index.tsx b/packages/antd/src/widgets/DateWidget/index.tsx index 0d8f4f7fd6..cba5668cd7 100644 --- a/packages/antd/src/widgets/DateWidget/index.tsx +++ b/packages/antd/src/widgets/DateWidget/index.tsx @@ -22,7 +22,8 @@ const DATE_PICKER_STYLE = { export default function DateWidget( props: WidgetProps, ) { - const { disabled, formContext, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props; + const { disabled, registry, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props; + const { formContext } = registry; const { readonlyAsDisabled = true } = formContext as GenericObjectType; const handleChange = (nextValue: any) => onChange(nextValue && nextValue.format('YYYY-MM-DD')); diff --git a/packages/antd/src/widgets/PasswordWidget/index.tsx b/packages/antd/src/widgets/PasswordWidget/index.tsx index 1448541992..a13be63491 100644 --- a/packages/antd/src/widgets/PasswordWidget/index.tsx +++ b/packages/antd/src/widgets/PasswordWidget/index.tsx @@ -18,7 +18,8 @@ export default function PasswordWidget< S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, >(props: WidgetProps) { - const { disabled, formContext, id, onBlur, onChange, onFocus, options, placeholder, readonly, value } = props; + const { disabled, registry, id, onBlur, onChange, onFocus, options, placeholder, readonly, value } = props; + const { formContext } = registry; const { readonlyAsDisabled = true } = formContext as GenericObjectType; const emptyValue = options.emptyValue || ''; diff --git a/packages/antd/src/widgets/RadioWidget/index.tsx b/packages/antd/src/widgets/RadioWidget/index.tsx index e50a96c21a..0aa7e56a72 100644 --- a/packages/antd/src/widgets/RadioWidget/index.tsx +++ b/packages/antd/src/widgets/RadioWidget/index.tsx @@ -20,7 +20,7 @@ import { export default function RadioWidget({ autofocus, disabled, - formContext, + registry, id, onBlur, onChange, @@ -29,6 +29,7 @@ export default function RadioWidget) { + const { formContext } = registry; const { readonlyAsDisabled = true } = formContext as GenericObjectType; const { enumOptions, enumDisabled, emptyValue } = options; diff --git a/packages/antd/src/widgets/RangeWidget/index.tsx b/packages/antd/src/widgets/RangeWidget/index.tsx index 6a18b44699..49dc2ab27d 100644 --- a/packages/antd/src/widgets/RangeWidget/index.tsx +++ b/packages/antd/src/widgets/RangeWidget/index.tsx @@ -20,7 +20,7 @@ export default function RangeWidget({ autofocus, disabled, - formContext = {} as F, + registry, id, multiple, onBlur, @@ -41,6 +41,7 @@ export default function SelectWidget< value, schema, }: WidgetProps) { + const { formContext } = registry; const { readonlyAsDisabled = true } = formContext as GenericObjectType; const { enumOptions, enumDisabled, emptyValue } = options; diff --git a/packages/antd/src/widgets/TextareaWidget/index.tsx b/packages/antd/src/widgets/TextareaWidget/index.tsx index e50ba5c2bd..7ba8607c5c 100644 --- a/packages/antd/src/widgets/TextareaWidget/index.tsx +++ b/packages/antd/src/widgets/TextareaWidget/index.tsx @@ -21,18 +21,8 @@ export default function TextareaWidget< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, ->({ - disabled, - formContext, - id, - onBlur, - onChange, - onFocus, - options, - placeholder, - readonly, - value, -}: WidgetProps) { +>({ disabled, registry, id, onBlur, onChange, onFocus, options, placeholder, readonly, value }: WidgetProps) { + const { formContext } = registry; const { readonlyAsDisabled = true } = formContext as GenericObjectType; const handleChange = ({ target }: ChangeEvent) => diff --git a/packages/core/src/components/fields/ArrayField.tsx b/packages/core/src/components/fields/ArrayField.tsx index 9a025a4d2a..e508476293 100644 --- a/packages/core/src/components/fields/ArrayField.tsx +++ b/packages/core/src/components/fields/ArrayField.tsx @@ -597,7 +597,7 @@ class ArrayField(uiSchema, globalUiOptions); const Widget = getWidget(schema, widget, widgets); const label = uiTitle ?? schema.title ?? name; @@ -622,7 +622,6 @@ class ArrayField @@ -648,7 +647,7 @@ class ArrayField(itemsSchema, uiSchema); const { widget = 'select', title: uiTitle, ...options } = getUiOptions(uiSchema, globalUiOptions); @@ -674,7 +673,6 @@ class ArrayField @@ -699,7 +697,7 @@ class ArrayField(uiSchema, globalUiOptions); const Widget = getWidget(schema, widget, widgets); const label = uiTitle ?? schema.title ?? name; @@ -720,7 +718,6 @@ class ArrayField diff --git a/packages/core/src/components/fields/LayoutMultiSchemaField.tsx b/packages/core/src/components/fields/LayoutMultiSchemaField.tsx index b38ebf2bb1..b0e4b5c54e 100644 --- a/packages/core/src/components/fields/LayoutMultiSchemaField.tsx +++ b/packages/core/src/components/fields/LayoutMultiSchemaField.tsx @@ -104,7 +104,6 @@ export default function LayoutMultiSchemaField< registry, uiSchema, schema, - formContext, autofocus, readonly, required, @@ -206,7 +205,6 @@ export default function LayoutMultiSchemaField< label={(title || schema.title) ?? ''} disabled={disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions))} uiSchema={uiSchema} - formContext={formContext} autofocus={autofocus} readonly={readonly} required={required} diff --git a/packages/core/src/components/fields/MultiSchemaField.tsx b/packages/core/src/components/fields/MultiSchemaField.tsx index 8ca2917c00..1ffc55e959 100644 --- a/packages/core/src/components/fields/MultiSchemaField.tsx +++ b/packages/core/src/components/fields/MultiSchemaField.tsx @@ -149,7 +149,6 @@ class AnyOfField= 0 ? selectedOption : undefined} options={{ enumOptions, ...uiOptions }} registry={registry} - formContext={formContext} placeholder={placeholder} autocomplete={autocomplete} autofocus={autofocus} diff --git a/packages/core/src/components/fields/ObjectField.tsx b/packages/core/src/components/fields/ObjectField.tsx index e27f163abf..547e2e6c95 100644 --- a/packages/core/src/components/fields/ObjectField.tsx +++ b/packages/core/src/components/fields/ObjectField.tsx @@ -242,7 +242,7 @@ class ObjectField(uiSchema, globalUiOptions); @@ -297,7 +297,6 @@ class ObjectField(uiSchema, globalUiOptions); const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, uiOptions); @@ -204,7 +204,6 @@ function SchemaFieldRender ); @@ -305,7 +304,6 @@ function SchemaFieldRender(schema, uiSchema) : undefined; let defaultWidget = enumOptions ? 'select' : 'text'; if (format && hasWidget(schema, format, widgets)) { @@ -70,7 +70,6 @@ function StringField { formData, errorSchema, fieldPathId: FIELD_PATH_ID, - formContext: registry.formContext, registry, schema, uiSchema, diff --git a/packages/core/test/LayoutHeaderField.test.tsx b/packages/core/test/LayoutHeaderField.test.tsx index 8ca11eac6c..9277f5343f 100644 --- a/packages/core/test/LayoutHeaderField.test.tsx +++ b/packages/core/test/LayoutHeaderField.test.tsx @@ -37,7 +37,6 @@ describe('LayoutHeaderField', () => { autofocus: false, disabled: false, errorSchema: {}, - formContext: undefined, formData: undefined, onBlur: noop, onChange: noop, diff --git a/packages/core/test/LayoutMultiSchemaField.test.tsx b/packages/core/test/LayoutMultiSchemaField.test.tsx index 9c11661cf0..e49795eb88 100644 --- a/packages/core/test/LayoutMultiSchemaField.test.tsx +++ b/packages/core/test/LayoutMultiSchemaField.test.tsx @@ -195,7 +195,6 @@ describe('LayoutMultiSchemaField', () => { return { // required FieldProps stubbed autofocus, - formContext: {}, name: '', readonly: false, required, diff --git a/packages/daisyui/test/helpers/createMocks.ts b/packages/daisyui/test/helpers/createMocks.ts index 505abb85ce..1732d2bf3a 100644 --- a/packages/daisyui/test/helpers/createMocks.ts +++ b/packages/daisyui/test/helpers/createMocks.ts @@ -55,7 +55,6 @@ export function makeWidgetMockProps(props: Partial = {}): WidgetPro rawErrors: [''], value: 'test-value', options: {}, - formContext: {}, id: 'test-id', name: 'test-name', placeholder: 'Enter value...', diff --git a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx index cb56bc0d01..53375bbc80 100644 --- a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -46,7 +46,6 @@ export default function BaseInputTemplate< uiSchema, rawErrors = [], errorSchema, - formContext, registry, InputLabelProps, ...textFieldProps diff --git a/packages/mui/src/SelectWidget/SelectWidget.tsx b/packages/mui/src/SelectWidget/SelectWidget.tsx index 2a8faadeeb..173366f6d5 100644 --- a/packages/mui/src/SelectWidget/SelectWidget.tsx +++ b/packages/mui/src/SelectWidget/SelectWidget.tsx @@ -43,7 +43,6 @@ export default function SelectWidget< registry, uiSchema, hideError, - formContext, ...textFieldProps }: WidgetProps) { const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options; diff --git a/packages/playground/src/samples/customFieldAnyOf.tsx b/packages/playground/src/samples/customFieldAnyOf.tsx index e829cc83cb..f28fd24ba9 100644 --- a/packages/playground/src/samples/customFieldAnyOf.tsx +++ b/packages/playground/src/samples/customFieldAnyOf.tsx @@ -1,4 +1,4 @@ -import { FieldProps, FieldTemplateProps, ID_KEY, IdSchema, RJSFSchema, getTemplate } from '@rjsf/utils'; +import { FieldProps, FieldTemplateProps, ID_KEY, FieldPathId, RJSFSchema, getTemplate } from '@rjsf/utils'; import noop from 'lodash/noop'; import { Sample } from './Sample'; @@ -23,15 +23,14 @@ function UiField(props: FieldProps) { const citySchema = schemaUtils.findFieldInSchema(schema1, cityKey, {} as RJSFSchema); const latSchema = schemaUtils.findFieldInSchema(schema2, latKey, {} as RJSFSchema); const lonSchema = schemaUtils.findFieldInSchema(schema2, lonKey, {} as RJSFSchema); - const cityIdSchema: IdSchema = { [ID_KEY]: cityKey }; - const latIdSchema: IdSchema = { [ID_KEY]: latKey }; - const lonIdSchema: IdSchema = { [ID_KEY]: lonKey }; + const cityFieldPathId: FieldPathId = { [ID_KEY]: cityKey, path: [cityKey] }; + const latFieldPathId: FieldPathId = { [ID_KEY]: latKey, path: [latKey] }; + const lonFieldPathId: FieldPathId = { [ID_KEY]: lonKey, path: [lonKey] }; const fieldTemplateProps: Omit = { registry, schema, uiSchema, - formContext: props.formContext, displayLabel: true, disabled: false, readonly: false, @@ -52,14 +51,14 @@ function UiField(props: FieldProps) { margin: '1rem', }} > - + @@ -73,26 +72,26 @@ function UiField(props: FieldProps) { margin: '1rem', }} > - + - + diff --git a/packages/primereact/src/SelectWidget/SelectWidget.tsx b/packages/primereact/src/SelectWidget/SelectWidget.tsx index 286f1623e2..ce7d9a3865 100644 --- a/packages/primereact/src/SelectWidget/SelectWidget.tsx +++ b/packages/primereact/src/SelectWidget/SelectWidget.tsx @@ -46,7 +46,6 @@ function SingleSelectWidget) { const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options; diff --git a/packages/shadcn/test/helpers/createMocks.ts b/packages/shadcn/test/helpers/createMocks.ts index 0cdc08b3c3..8df65ab6f0 100644 --- a/packages/shadcn/test/helpers/createMocks.ts +++ b/packages/shadcn/test/helpers/createMocks.ts @@ -1,4 +1,11 @@ -import { createSchemaUtils, englishStringTranslator, WidgetProps, RJSFSchema } from '@rjsf/utils'; +import { + createSchemaUtils, + englishStringTranslator, + WidgetProps, + RJSFSchema, + DEFAULT_ID_SEPARATOR, + DEFAULT_ID_PREFIX, +} from '@rjsf/utils'; import { getDefaultRegistry } from '@rjsf/core'; import validator from '@rjsf/validator-ajv8'; @@ -25,6 +32,7 @@ export function mockRegistry() { rootSchema: {}, schemaUtils: mockSchemaUtils, translateString: englishStringTranslator, + globalFormOptions: { idPrefix: DEFAULT_ID_PREFIX, idSeparator: DEFAULT_ID_SEPARATOR }, }; } @@ -44,7 +52,6 @@ export function makeWidgetMockProps(props: Partial = {}): WidgetPro rawErrors: [''], value: 'value', options: {}, - formContext: {}, id: '_id', name: '_name', placeholder: '',