Feature - replaced IdSchema with FieldPathId (#4787)

* Feature - replaced IdSchema with FieldPathId
In order to support an upcoming feature as well as eliminate a performance issue, `IdSchema` was replace with `FieldPathId`
- In @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
  - Updated the tests accordingly
- In `@rjsf/antd`, `@rjsf/chakra-ui`, `@rjsf/fluent-ui`, `@rjsf/mantine`, `@rjsf/mui`, `@rjsf/primereact`, `@rjsf/react-bootstrap`, `@rjsf/semantic-ui` and `@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
- In @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
- In @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
- In @rjsf/validator-ajv8:
  - Updated the test to no longer try to test the delete `toIdSchema` function
- In docs:
  - 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
- Updated the `CHANGELOG.md` accordingly

* - Updated docs to mention `getTestRegistry()`

* - Responded to most of the reviewer feedback

* - Fixed tests

* - Switched `rootFieldId` to be deprecated

* - Fixed documentation

* - Moved `semantic-ui` deprecation warning into its own section

Author: heath-freenome

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
+- Deprecated the `ui:rootFieldId` in the `UiSchema` since `idPrefix` does the same exact thing
+- 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
+
+## @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 `<T>` 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

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)}
     />
   );
 }