diff --git a/CHANGELOG.md b/CHANGELOG.md index 785bd94d4d..da83331a21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,82 @@ it according to semantic versioning. For example, if your PR adds a breaking cha should change the heading of the (upcoming) version to include a major version bump. --> +# 6.0.0-beta-20 + +## @rjsf/antd + +- BREAKING CHANGES - Updated all of the templates and widgets to change `idSchema` to `fieldPathId` or to remove the `` off of the idGenerator functions + +## @rjsf/chakra-ui + +- BREAKING CHANGES - Updated all of the templates and widgets to change `idSchema` to `fieldPathId` or to remove the `` off of the idGenerator functions + +## @rjsf/core + +- BREAKING CHANGES + - Updated all of the fields, templates and widgets to change `idSchema` to `fieldPathId` or to remove the `` off of the idGenerator functions + - `ObjectField` and `ArrayField` to use `toFieldPathId` instead of `toIdSchema()` to generate the `fieldPathId`s of all its children + - Updated the `onChange` handling of fields to make `path` required and either pass it straight through, or use the `fieldPathId.path` instead of using an empty array or appending path information + - Updated `Form` to use `toFieldPathId()` to generate `fieldPathId` instead of `idSchema`, always providing the `idPrefix` and `idSeparator` in the `globalFormOptions` and make the `path: FieldPathList` required + - Updated `LayoutGridField` to remove the `IdSchema` related code in favor of `FieldPathId` code +- Also exported the `getTestRegistry()` function from the main `index.ts` to assist developers in creating `registry` object for tests +- Updated all of the test to deal with the `idSchema` -> `fieldPathId` changes + +## @rjsf/daisyui + +- BREAKING CHANGES - Updated all of the templates and widgets to change `idSchema` to `fieldPathId` or to remove the `` off of the idGenerator functions +- Also fixed the `FieldTemplate` to extract the `description` element so that it was not spread onto the `div`, fixing the snapshots + +## @rjsf/fluent-ui + +- BREAKING CHANGES - Updated all of the templates and widgets to change `idSchema` to `fieldPathId` or to remove the `` off of the idGenerator functions + +## @rjsf/mantine + +- BREAKING CHANGES - Updated all of the templates and widgets to change `idSchema` to `fieldPathId` or to remove the `` off of the idGenerator functions + +## @rjsf/mui + +- BREAKING CHANGES - Updated all of the templates and widgets to change `idSchema` to `fieldPathId` or to remove the `` off of the idGenerator functions + +## @rjsf/primereact + +- BREAKING CHANGES - Updated all of the templates and widgets to change `idSchema` to `fieldPathId` or to remove the `` off of the idGenerator functions + +## @rjsf/react-bootstrap + +- BREAKING CHANGES - Updated all of the templates and widgets to change `idSchema` to `fieldPathId` or to remove the `` off of the idGenerator functions + +## @rjsf/semantic-ui + +- BREAKING CHANGES - Updated all of the templates and widgets to change `idSchema` to `fieldPathId` or to remove the `` off of the idGenerator functions + +## @rjsf/shadcn + +- BREAKING CHANGES - Updated all of the templates and widgets to change `idSchema` to `fieldPathId` or to remove the `` off of the idGenerator functions + +## @rjsf/utils + +- Added new `FieldPathList` and `FieldPathId` types and `DEFAULT_ID_PREFIX` and `DEFAULT_ID_SEPARATOR` to `constants.ts` +- Added the new `toFieldPathId()` function to generate `FieldPathId`s, exporting it from the library +- Deprecated the `ui:rootFieldId` in the `UiSchema` since `idPrefix` does the same exact thing +- BREAKING CHANGES + - Removed the `IdSchema` type, replacing `idSchema: IdSchema` in all types with `fieldPathId: FieldPathId` + - Updated the `idGenerators` to replace `id: IdSchema | string` with `id: FieldPathId | string` removing the need for the `` generic on the functions + - Removed the `toIdSchema()` function in the `schema` directory + - Updated the `SchemaUtilsType` and `createSchemaUtils()` to remove the `toIdSchema()` function + +## @rjsf/validator-ajv8 + +- Updated the test to no longer try to test the delete `toIdSchema` function + +## Dev / docs / playground + +- Updated `custom-templates.md`, `custom-widgets-fields.md` and `layout-grid.md` to change the `idSchema` documentation to `fieldPathId` +- Updated `uiSchema.md` to mark the `ui:rootFieldId` as deprecated in the documentation +- Updated `utility-functions.md` delete `toIdSchema()`, add `toFieldPathId()` and to remove the `` from the id generator functions +- Updated `v6.x upgrade guide.md` to document all the breaking changes, new functions and deprecations made in `6.0.0-beta.20` + # 6.0.0-beta.19 ## @rjsf/core diff --git a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx index 243df8d58f..213660f390 100644 --- a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx +++ b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx @@ -30,7 +30,7 @@ export default function ArrayFieldTemplate< canAdd, className, disabled, - idSchema, + fieldPathId, items, onAddClick, readonly, @@ -73,12 +73,12 @@ export default function ArrayFieldTemplate< ); return ( -
+
{(uiOptions.title || title) && ( (idSchema, 'add')} + id={buttonId(fieldPathId, 'add')} className='rjsf-array-item-add' disabled={disabled || readonly} onClick={onAddClick} diff --git a/packages/antd/src/templates/BaseInputTemplate/index.tsx b/packages/antd/src/templates/BaseInputTemplate/index.tsx index 8bd054bea5..6267f1084b 100644 --- a/packages/antd/src/templates/BaseInputTemplate/index.tsx +++ b/packages/antd/src/templates/BaseInputTemplate/index.tsx @@ -65,10 +65,10 @@ export default function BaseInputTemplate< onFocus={!readonly ? handleFocus : undefined} placeholder={placeholder} style={INPUT_STYLE} - list={schema.examples ? examplesId(id) : undefined} + list={schema.examples ? examplesId(id) : undefined} {...inputProps} value={value} - aria-describedby={ariaDescribedByIds(id, !!schema.examples)} + aria-describedby={ariaDescribedByIds(id, !!schema.examples)} /> ) : ( (id) : undefined} + list={schema.examples ? examplesId(id) : undefined} {...inputProps} value={value} - aria-describedby={ariaDescribedByIds(id, !!schema.examples)} + aria-describedby={ariaDescribedByIds(id, !!schema.examples)} /> ); @@ -91,7 +91,7 @@ export default function BaseInputTemplate< <> {input} {Array.isArray(schema.examples) && ( - (id)}> + {(schema.examples as string[]) .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : []) .map((example) => { diff --git a/packages/antd/src/templates/FieldErrorTemplate/index.tsx b/packages/antd/src/templates/FieldErrorTemplate/index.tsx index d30e52eecd..feff4b907b 100644 --- a/packages/antd/src/templates/FieldErrorTemplate/index.tsx +++ b/packages/antd/src/templates/FieldErrorTemplate/index.tsx @@ -9,11 +9,11 @@ export default function FieldErrorTemplate< S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, >(props: FieldErrorProps) { - const { errors = [], idSchema } = props; + const { errors = [], fieldPathId } = props; if (errors.length === 0) { return null; } - const id = errorId(idSchema); + const id = errorId(fieldPathId); return (
diff --git a/packages/antd/src/templates/ObjectFieldTemplate/index.tsx b/packages/antd/src/templates/ObjectFieldTemplate/index.tsx index cd2013fec5..47774371e9 100644 --- a/packages/antd/src/templates/ObjectFieldTemplate/index.tsx +++ b/packages/antd/src/templates/ObjectFieldTemplate/index.tsx @@ -39,7 +39,7 @@ export default function ObjectFieldTemplate< description, disabled, formData, - idSchema, + fieldPathId, onAddClick, properties, readonly, @@ -115,12 +115,12 @@ export default function ObjectFieldTemplate< ); return ( -
+
{title && ( (idSchema)} + id={titleId(fieldPathId)} title={title} required={required} schema={schema} @@ -132,7 +132,7 @@ export default function ObjectFieldTemplate< {description && ( (idSchema)} + id={descriptionId(fieldPathId)} description={description} schema={schema} uiSchema={uiSchema} @@ -154,7 +154,7 @@ export default function ObjectFieldTemplate< (idSchema, 'add')} + id={buttonId(fieldPathId, 'add')} className='rjsf-object-property-expand' disabled={disabled || readonly} onClick={onAddClick(schema)} diff --git a/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx b/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx index 1f84b00f8f..e5dfba9dc4 100644 --- a/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx +++ b/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx @@ -109,7 +109,7 @@ export default function WrapIfAdditionalTemplate< (id, 'remove')} + id={buttonId(id, 'remove')} className='rjsf-object-property-remove' disabled={disabled || readonly} onClick={onDropPropertyClick(label)} diff --git a/packages/antd/src/widgets/AltDateWidget/index.tsx b/packages/antd/src/widgets/AltDateWidget/index.tsx index f80757e490..e9e71d38fd 100644 --- a/packages/antd/src/widgets/AltDateWidget/index.tsx +++ b/packages/antd/src/widgets/AltDateWidget/index.tsx @@ -107,7 +107,7 @@ export default function AltDateWidget< value={elemProps.value} registry={registry} label='' - aria-describedby={ariaDescribedByIds(id)} + aria-describedby={ariaDescribedByIds(id)} /> ); diff --git a/packages/antd/src/widgets/CheckboxWidget/index.tsx b/packages/antd/src/widgets/CheckboxWidget/index.tsx index e68d798d8d..9325706461 100644 --- a/packages/antd/src/widgets/CheckboxWidget/index.tsx +++ b/packages/antd/src/widgets/CheckboxWidget/index.tsx @@ -44,7 +44,7 @@ export default function CheckboxWidget< name={id} onChange={!readonly ? handleChange : undefined} {...extraProps} - aria-describedby={ariaDescribedByIds(id)} + aria-describedby={ariaDescribedByIds(id)} > {labelValue(label, hideLabel, '')} diff --git a/packages/antd/src/widgets/CheckboxesWidget/index.tsx b/packages/antd/src/widgets/CheckboxesWidget/index.tsx index 78bcfff9d7..c60bf658ec 100644 --- a/packages/antd/src/widgets/CheckboxesWidget/index.tsx +++ b/packages/antd/src/widgets/CheckboxesWidget/index.tsx @@ -52,7 +52,7 @@ export default function CheckboxesWidget< onChange={!readonly ? handleChange : undefined} value={selectedIndexes} {...extraProps} - aria-describedby={ariaDescribedByIds(id)} + aria-describedby={ariaDescribedByIds(id)} > {Array.isArray(enumOptions) && enumOptions.map((option, i) => ( diff --git a/packages/antd/src/widgets/DateTimeWidget/index.tsx b/packages/antd/src/widgets/DateTimeWidget/index.tsx index 82f4dbda80..caa84f5694 100644 --- a/packages/antd/src/widgets/DateTimeWidget/index.tsx +++ b/packages/antd/src/widgets/DateTimeWidget/index.tsx @@ -48,7 +48,7 @@ export default function DateTimeWidget< showTime style={DATE_PICKER_STYLE} value={value && dayjs(value)} - aria-describedby={ariaDescribedByIds(id)} + aria-describedby={ariaDescribedByIds(id)} /> ); } diff --git a/packages/antd/src/widgets/DateWidget/index.tsx b/packages/antd/src/widgets/DateWidget/index.tsx index 31bf5f2e85..0d8f4f7fd6 100644 --- a/packages/antd/src/widgets/DateWidget/index.tsx +++ b/packages/antd/src/widgets/DateWidget/index.tsx @@ -46,7 +46,7 @@ export default function DateWidget(id)} + aria-describedby={ariaDescribedByIds(id)} /> ); } diff --git a/packages/antd/src/widgets/PasswordWidget/index.tsx b/packages/antd/src/widgets/PasswordWidget/index.tsx index cb660d11d1..1448541992 100644 --- a/packages/antd/src/widgets/PasswordWidget/index.tsx +++ b/packages/antd/src/widgets/PasswordWidget/index.tsx @@ -40,7 +40,7 @@ export default function PasswordWidget< onFocus={!readonly ? handleFocus : undefined} placeholder={placeholder} value={value || ''} - aria-describedby={ariaDescribedByIds(id)} + aria-describedby={ariaDescribedByIds(id)} /> ); } diff --git a/packages/antd/src/widgets/RadioWidget/index.tsx b/packages/antd/src/widgets/RadioWidget/index.tsx index 7a50841cc6..e50a96c21a 100644 --- a/packages/antd/src/widgets/RadioWidget/index.tsx +++ b/packages/antd/src/widgets/RadioWidget/index.tsx @@ -53,7 +53,7 @@ export default function RadioWidget(id)} + aria-describedby={ariaDescribedByIds(id)} > {Array.isArray(enumOptions) && enumOptions.map((option, i) => ( diff --git a/packages/antd/src/widgets/RangeWidget/index.tsx b/packages/antd/src/widgets/RangeWidget/index.tsx index 2de0cd9ab7..6a18b44699 100644 --- a/packages/antd/src/widgets/RangeWidget/index.tsx +++ b/packages/antd/src/widgets/RangeWidget/index.tsx @@ -63,7 +63,7 @@ export default function RangeWidget(id)} + aria-describedby={ariaDescribedByIds(id)} /> ); } diff --git a/packages/antd/src/widgets/SelectWidget/index.tsx b/packages/antd/src/widgets/SelectWidget/index.tsx index 229f49d8ae..d75fbac26a 100644 --- a/packages/antd/src/widgets/SelectWidget/index.tsx +++ b/packages/antd/src/widgets/SelectWidget/index.tsx @@ -103,7 +103,7 @@ export default function SelectWidget< value={selectedIndexes} {...extraProps} filterOption={filterOption} - aria-describedby={ariaDescribedByIds(id)} + aria-describedby={ariaDescribedByIds(id)} options={selectOptions} /> ); diff --git a/packages/antd/src/widgets/TextareaWidget/index.tsx b/packages/antd/src/widgets/TextareaWidget/index.tsx index d78a11127d..e50ba5c2bd 100644 --- a/packages/antd/src/widgets/TextareaWidget/index.tsx +++ b/packages/antd/src/widgets/TextareaWidget/index.tsx @@ -61,7 +61,7 @@ export default function TextareaWidget< style={INPUT_STYLE} value={value} {...extraProps} - aria-describedby={ariaDescribedByIds(id)} + aria-describedby={ariaDescribedByIds(id)} /> ); } diff --git a/packages/chakra-ui/src/AltDateWidget/AltDateWidget.tsx b/packages/chakra-ui/src/AltDateWidget/AltDateWidget.tsx index 814d6dc193..71ce33b833 100644 --- a/packages/chakra-ui/src/AltDateWidget/AltDateWidget.tsx +++ b/packages/chakra-ui/src/AltDateWidget/AltDateWidget.tsx @@ -33,7 +33,7 @@ function DateElement(props.name)} + aria-describedby={ariaDescribedByIds(props.name)} /> ); } diff --git a/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx index e41e801bb9..1680fc61e1 100644 --- a/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx +++ b/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx @@ -15,7 +15,7 @@ export default function ArrayFieldTemplate< S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, >(props: ArrayFieldTemplateProps) { - const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = + const { canAdd, disabled, fieldPathId, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props; const uiOptions = getUiOptions(uiSchema); const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>( @@ -40,7 +40,7 @@ export default function ArrayFieldTemplate< return ( - + {items.length > 0 && items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType) => ( @@ -65,7 +65,7 @@ export default function ArrayFieldTemplate< (idSchema, 'add')} + id={buttonId(fieldPathId, 'add')} className='rjsf-array-item-add' onClick={onAddClick} disabled={disabled || readonly} diff --git a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx index 4a43722b79..bf5c7e3537 100644 --- a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -68,11 +68,11 @@ export default function BaseInputTemplate< autoFocus={autofocus} placeholder={placeholder} {...inputProps} - list={schema.examples ? examplesId(id) : undefined} - aria-describedby={ariaDescribedByIds(id, !!schema.examples)} + list={schema.examples ? examplesId(id) : undefined} + aria-describedby={ariaDescribedByIds(id, !!schema.examples)} /> {Array.isArray(schema.examples) ? ( - (id)}> + {(schema.examples as string[]) .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : []) .map((example: any) => { diff --git a/packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx b/packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx index a439203b2e..6fba626a00 100644 --- a/packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx +++ b/packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx @@ -57,7 +57,7 @@ export default function CheckboxWidget< {!hideLabel && description && ( (id)} + id={descriptionId(id)} description={description} schema={schema} uiSchema={uiSchema} @@ -72,7 +72,7 @@ export default function CheckboxWidget< onCheckedChange={_onChange} onBlur={_onBlur} onFocus={_onFocus} - aria-describedby={ariaDescribedByIds(id)} + aria-describedby={ariaDescribedByIds(id)} > {labelValue({label}, hideLabel || !label)} diff --git a/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx index 7837083dff..8fd180eafd 100644 --- a/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx +++ b/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx @@ -57,7 +57,7 @@ export default function CheckboxesWidget< onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue))} value={selectedIndexes} - aria-describedby={ariaDescribedByIds(id)} + aria-describedby={ariaDescribedByIds(id)} readOnly={readonly} required={required} label={labelValue(label, hideLabel || !label)} diff --git a/packages/chakra-ui/src/FieldErrorTemplate/FieldErrorTemplate.tsx b/packages/chakra-ui/src/FieldErrorTemplate/FieldErrorTemplate.tsx index fdb564ae7f..b3e35b403a 100644 --- a/packages/chakra-ui/src/FieldErrorTemplate/FieldErrorTemplate.tsx +++ b/packages/chakra-ui/src/FieldErrorTemplate/FieldErrorTemplate.tsx @@ -10,11 +10,11 @@ export default function FieldErrorTemplate< S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, >(props: FieldErrorProps) { - const { errors = [], idSchema } = props; + const { errors = [], fieldPathId } = props; if (errors.length === 0) { return null; } - const id = errorId(idSchema); + const id = errorId(fieldPathId); return errors.map((error, i: number) => { return ( diff --git a/packages/chakra-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/chakra-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx index 523be9fe64..21a7c7c148 100644 --- a/packages/chakra-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx +++ b/packages/chakra-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx @@ -10,10 +10,10 @@ export default function FieldHelpTemplate< S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, >(props: FieldHelpProps) { - const { idSchema, help } = props; + const { fieldPathId, help } = props; if (!help) { return null; } - const id = helpId(idSchema); + const id = helpId(fieldPathId); return {help}; } diff --git a/packages/chakra-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/chakra-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx index d1d7c1419f..87c500034b 100644 --- a/packages/chakra-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx +++ b/packages/chakra-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx @@ -25,7 +25,7 @@ export default function ObjectFieldTemplate< disabled, readonly, uiSchema, - idSchema, + fieldPathId, schema, formData, onAddClick, @@ -47,7 +47,7 @@ export default function ObjectFieldTemplate< <> {title && ( (idSchema)} + id={titleId(fieldPathId)} title={title} required={required} schema={schema} @@ -57,7 +57,7 @@ export default function ObjectFieldTemplate< )} {description && ( (idSchema)} + id={descriptionId(fieldPathId)} description={description} schema={schema} uiSchema={uiSchema} @@ -69,13 +69,13 @@ export default function ObjectFieldTemplate< element.hidden ? ( element.content ) : ( - {element.content} + {element.content} ), )} {canExpand(schema, uiSchema, formData) && ( (idSchema, 'add')} + id={buttonId(fieldPathId, 'add')} className='rjsf-object-property-expand' onClick={onAddClick(schema)} disabled={disabled || readonly} diff --git a/packages/chakra-ui/src/RadioWidget/RadioWidget.tsx b/packages/chakra-ui/src/RadioWidget/RadioWidget.tsx index 1eef6dc24c..b26ae13fe4 100644 --- a/packages/chakra-ui/src/RadioWidget/RadioWidget.tsx +++ b/packages/chakra-ui/src/RadioWidget/RadioWidget.tsx @@ -59,7 +59,7 @@ export default function RadioWidget(id)} + aria-describedby={ariaDescribedByIds(id)} > {Array.isArray(enumOptions) && diff --git a/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx b/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx index 3f09dbd162..636c551dd9 100644 --- a/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx +++ b/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx @@ -46,7 +46,7 @@ export default function RangeWidget(id)} + aria-describedby={ariaDescribedByIds(id)} /> ); diff --git a/packages/chakra-ui/src/SelectNativeWidget/NativeSelectWidget.tsx b/packages/chakra-ui/src/SelectNativeWidget/NativeSelectWidget.tsx index 23d37b940e..be699d29f0 100644 --- a/packages/chakra-ui/src/SelectNativeWidget/NativeSelectWidget.tsx +++ b/packages/chakra-ui/src/SelectNativeWidget/NativeSelectWidget.tsx @@ -124,7 +124,7 @@ export default function NativeSelectWidget< onFocus={_onFocus} autoFocus={autofocus} value={formValue} - aria-describedby={ariaDescribedByIds(id)} + aria-describedby={ariaDescribedByIds(id)} > {selectOptions.items.map((item) => (