Feature - replaced IdSchema with FieldPathId

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 `<T>` 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 `<T>` 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 `<T>` 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 `<T>` 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 `<T>` 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 `<T>` 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 `<T>` 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 `<T>` 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 `<T>` 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 `<T>` 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 `<T>` 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
+- BREAKING CHANGES
+  - Removed the `IdSchema` type, replacing `idSchema: IdSchema<T>` in all types with `fieldPathId: FieldPathId`
+  - Updated the `idGenerators` to replace `id: IdSchema<T> | string` with `id: FieldPathId | string` removing the need for the `<T = any>` generic on the functions
+  - Removed the `toIdSchema()` function in the `schema` directory
+  - Updated the `SchemaUtilsType` and `createSchemaUtils()` to remove the `toIdSchema()` function
+  - Deleted the `ui:rootFieldId` from the `UiSchema` since `idPrefix` does the same exact thing
+
+## @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 remove the `ui:rootFieldId` documentation
+- Updated `utility-functions.md` delete `toIdSchema()`, add `toFieldPathId()` and to remove the `<T>` from the id generator functions
+- Updated `v6.x upgrade guide.md` to document all the breaking changes made in this release
+
 # 6.0.0-beta.19
 
 ## @rjsf/core

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 (
-    <fieldset className={className} id={idSchema.$id}>
+    <fieldset className={className} id={fieldPathId.$id}>
       <Row gutter={rowGutter}>
         {(uiOptions.title || title) && (
           <Col className={labelColClassName} span={24}>
             <ArrayFieldTitleTemplate
-              idSchema={idSchema}
+              fieldPathId={fieldPathId}
               required={required}
               title={uiOptions.title || title}
               schema={schema}
@@ -91,7 +91,7 @@ export default function ArrayFieldTemplate<
           <Col span={24} style={DESCRIPTION_COL_STYLE}>
             <ArrayFieldDescriptionTemplate
               description={uiOptions.description || schema.description}
-              idSchema={idSchema}
+              fieldPathId={fieldPathId}
               schema={schema}
               uiSchema={uiSchema}
               registry={registry}
@@ -110,7 +110,7 @@ export default function ArrayFieldTemplate<
             <Row gutter={rowGutter} justify='end'>
               <Col flex='192px'>
                 <AddButton
-                  id={buttonId<T>(idSchema, 'add')}
+                  id={buttonId(fieldPathId, 'add')}
                   className='rjsf-array-item-add'
                   disabled={disabled || readonly}
                   onClick={onAddClick}

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<T>(id) : undefined}
+        list={schema.examples ? examplesId(id) : undefined}
         {...inputProps}
         value={value}
-        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+        aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
     ) : (
       <Input
@@ -80,18 +80,18 @@ export default function BaseInputTemplate<
         onFocus={!readonly ? handleFocus : undefined}
         placeholder={placeholder}
         style={INPUT_STYLE}
-        list={schema.examples ? examplesId<T>(id) : undefined}
+        list={schema.examples ? examplesId(id) : undefined}
         {...inputProps}
         value={value}
-        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+        aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
     );
 
   return (
     <>
       {input}
       {Array.isArray(schema.examples) && (
-        <datalist id={examplesId<T>(id)}>
+        <datalist id={examplesId(id)}>
           {(schema.examples as string[])
             .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
             .map((example) => {

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<T, S, F>) {
-  const { errors = [], idSchema } = props;
+  const { errors = [], fieldPathId } = props;
   if (errors.length === 0) {
     return null;
   }
-  const id = errorId<T>(idSchema);
+  const id = errorId(fieldPathId);
 
   return (
     <div id={id}>

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 (
-    <fieldset id={idSchema.$id}>
+    <fieldset id={fieldPathId.$id}>
       <Row gutter={rowGutter}>
         {title && (
           <Col className={labelColClassName} span={24}>
             <TitleFieldTemplate
-              id={titleId<T>(idSchema)}
+              id={titleId(fieldPathId)}
               title={title}
               required={required}
               schema={schema}
@@ -132,7 +132,7 @@ export default function ObjectFieldTemplate<
         {description && (
           <Col span={24} style={DESCRIPTION_COL_STYLE}>
             <DescriptionFieldTemplate
-              id={descriptionId<T>(idSchema)}
+              id={descriptionId(fieldPathId)}
               description={description}
               schema={schema}
               uiSchema={uiSchema}
@@ -154,7 +154,7 @@ export default function ObjectFieldTemplate<
           <Row gutter={rowGutter} justify='end'>
             <Col flex='192px'>
               <AddButton
-                id={buttonId<T>(idSchema, 'add')}
+                id={buttonId(fieldPathId, 'add')}
                 className='rjsf-object-property-expand'
                 disabled={disabled || readonly}
                 onClick={onAddClick(schema)}

packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx

@@ -109,7 +109,7 @@ export default function WrapIfAdditionalTemplate<
         </Col>
         <Col flex='192px'>
           <RemoveButton
-            id={buttonId<T>(id, 'remove')}
+            id={buttonId(id, 'remove')}
             className='rjsf-object-property-remove'
             disabled={disabled || readonly}
             onClick={onDropPropertyClick(label)}

packages/antd/src/widgets/AltDateWidget/index.tsx

@@ -107,7 +107,7 @@ export default function AltDateWidget<
       value={elemProps.value}
       registry={registry}
       label=''
-      aria-describedby={ariaDescribedByIds<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
     />
   );
 

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<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
     >
       {labelValue(label, hideLabel, '')}
     </Checkbox>

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<T>(id)}
+        aria-describedby={ariaDescribedByIds(id)}
       >
         {Array.isArray(enumOptions) &&
           enumOptions.map((option, i) => (

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<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
     />
   );
 }

packages/antd/src/widgets/DateWidget/index.tsx

@@ -46,7 +46,7 @@ export default function DateWidget<T = any, S extends StrictRJSFSchema = RJSFSch
       showTime={false}
       style={DATE_PICKER_STYLE}
       value={value && dayjs(value)}
-      aria-describedby={ariaDescribedByIds<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
     />
   );
 }

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<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
     />
   );
 }

packages/antd/src/widgets/RadioWidget/index.tsx

@@ -53,7 +53,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
       onBlur={!readonly ? handleBlur : undefined}
       onFocus={!readonly ? handleFocus : undefined}
       value={selectedIndexes}
-      aria-describedby={ariaDescribedByIds<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
     >
       {Array.isArray(enumOptions) &&
         enumOptions.map((option, i) => (

packages/antd/src/widgets/RangeWidget/index.tsx

@@ -63,7 +63,7 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
       step={step}
       value={value}
       {...extraProps}
-      aria-describedby={ariaDescribedByIds<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
     />
   );
 }

packages/antd/src/widgets/SelectWidget/index.tsx

@@ -103,7 +103,7 @@ export default function SelectWidget<
       value={selectedIndexes}
       {...extraProps}
       filterOption={filterOption}
-      aria-describedby={ariaDescribedByIds<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
       options={selectOptions}
     />
   );

packages/antd/src/widgets/TextareaWidget/index.tsx

@@ -61,7 +61,7 @@ export default function TextareaWidget<
       style={INPUT_STYLE}
       value={value}
       {...extraProps}
-      aria-describedby={ariaDescribedByIds<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
     />
   );
 }

packages/chakra-ui/src/AltDateWidget/AltDateWidget.tsx

@@ -33,7 +33,7 @@ function DateElement<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
       placeholder={props.type}
       schema={{ type: 'integer' } as S}
       value={value}
-      aria-describedby={ariaDescribedByIds<T>(props.name)}
+      aria-describedby={ariaDescribedByIds(props.name)}
     />
   );
 }

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<T, S, F>) {
-  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<T, S, F>(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
@@ -40,21 +40,21 @@ export default function ArrayFieldTemplate<
   return (
     <Box>
       <ArrayFieldTitleTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         title={uiOptions.title || title}
         schema={schema}
         uiSchema={uiSchema}
         required={required}
         registry={registry}
       />
       <ArrayFieldDescriptionTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         description={uiOptions.description || schema.description}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}
       />
-      <Grid key={`array-item-list-${idSchema.$id}`}>
+      <Grid key={`array-item-list-${fieldPathId.$id}`}>
         <GridItem>
           {items.length > 0 &&
             items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
@@ -65,7 +65,7 @@ export default function ArrayFieldTemplate<
           <GridItem justifySelf={'flex-end'}>
             <Box mt={2}>
               <AddButton
-                id={buttonId<T>(idSchema, 'add')}
+                id={buttonId(fieldPathId, 'add')}
                 className='rjsf-array-item-add'
                 onClick={onAddClick}
                 disabled={disabled || readonly}

packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -68,11 +68,11 @@ export default function BaseInputTemplate<
         autoFocus={autofocus}
         placeholder={placeholder}
         {...inputProps}
-        list={schema.examples ? examplesId<T>(id) : undefined}
-        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+        list={schema.examples ? examplesId(id) : undefined}
+        aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
       {Array.isArray(schema.examples) ? (
-        <datalist id={examplesId<T>(id)}>
+        <datalist id={examplesId(id)}>
           {(schema.examples as string[])
             .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
             .map((example: any) => {

packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx

@@ -57,7 +57,7 @@ export default function CheckboxWidget<
     <Field mb={1} required={required} {...chakraProps}>
       {!hideLabel && description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(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<T>(id)}
+        aria-describedby={ariaDescribedByIds(id)}
       >
         {labelValue(<Text>{label}</Text>, hideLabel || !label)}
       </Checkbox>