Update typescript definition of toIdSchema(), and passed the new `idS…

…eparator` prop through to the `AnyOfField` and `OneOfField` inside of `SchemaField` (#2743)

* Follow-up fix to #2628
- Add the new `idSeparator` prop to the `index.d.ts` file for the `toIdSchema()` function definition
- Also fixed the spelling of `idPrefix` parameter

* - Also passed `idSeparator` through to the `AllOfField` and `OneOfField` in the `SchemaField` code

* - Updated `CHANGELOG.md`

* - Updated `ArrayField` to also pass `idPrefix` and `idSeparator` down through to the inner `SchemaField` used for array field items
- Updated `CHANGELOG` again
- Reverted `package-lock.json` added in previous commit

* - Optimized `ArrayField` to get `idPrefix` and `idSeparator` directly from props instead of passing them through (following the pattern of `readonly` et al)

* - Added test to validate nesting of `idPrefix` and `idSeparator` in `ArrayField`

* - Updated the `CHANGELOG` per reviewer feedback

CHANGELOG.md

@@ -17,11 +17,17 @@ should change the heading of the (upcoming) version to include a major version b
 -->
 # v5.0.0 (coming soon)
 
-# v4.0.2 (upcoming)
+# v4.0.3 (upcoming)
+
+# v4.0.2
 
 ## @rjsf/core
 
 - To improve performance, skip validating subschemas in oneOf / anyOf if formData is undefined (#2676)
+- Fixed the `toIdSchema()` typescript definition to add new `idSeparator` prop along with the spelling of `idPrefix`
+  - Also passed the new `idSeparator` prop through to the `AnyOfField` and `OneOfField` inside of `SchemaField` 
+  - Updated `ArrayField` in `@rjsf/core` to pass `idSeparator` and `idPrefix` through to `SchemaField`, fixing a small bug
+  - 
 
 # v4.0.1
 

packages/core/index.d.ts

@@ -399,7 +399,8 @@ declare module '@rjsf/core' {
             id: string,
             definitions: Registry['definitions'],
             formData?: T,
-            idPredix?: string,
+            idPrefix?: string,
+            idSeparator?: string,
         ): IdSchema | IdSchema[];
 
         export function toPathSchema<T = any>(

packages/core/src/components/fields/ArrayField.js

@@ -819,6 +819,8 @@ class ArrayField extends Component {
           uiSchema={itemUiSchema}
           formData={itemData}
           errorSchema={itemErrorSchema}
+          idPrefix={this.props.idPrefix}
+          idSeparator={this.props.idSeparator}
           idSchema={itemIdSchema}
           required={this.isItemRequired(itemSchema)}
           onChange={this.onChangeForIndex(index)}

packages/core/src/components/fields/SchemaField.js

@@ -368,6 +368,7 @@ function SchemaFieldRender(props) {
             formData={formData}
             idPrefix={idPrefix}
             idSchema={idSchema}
+            idSeparator={idSeparator}
             onBlur={props.onBlur}
             onChange={props.onChange}
             onFocus={props.onFocus}
@@ -388,6 +389,7 @@ function SchemaFieldRender(props) {
             formData={formData}
             idPrefix={idPrefix}
             idSchema={idSchema}
+            idSeparator={idSeparator}
             onBlur={props.onBlur}
             onChange={props.onChange}
             onFocus={props.onFocus}

packages/core/test/ArrayField_test.js

@@ -1909,4 +1909,38 @@ describe("ArrayField", () => {
       expect(node.querySelector("#title-")).to.be.null;
     });
   });
+
+  describe("should handle nested idPrefix and idSeparator parameter", () => {
+    it("should render nested input widgets with the expected ids", () => {
+      const complexSchema = {
+        type: "object",
+        properties: {
+          foo: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                bar: { type: "string" },
+                baz: { type: "string" },
+              },
+            },
+          },
+        },
+      };
+      const { node } = createFormComponent({
+        schema: complexSchema,
+        formData: {
+          foo: [{ bar: "bar1", baz: "baz1" }, { bar: "bar2", baz: "baz2" }],
+        },
+        idSeparator: "/",
+        idPrefix: "base",
+      });
+
+      const inputs = node.querySelectorAll("input[type=text]");
+      expect(inputs[0].id).eql("base/foo_0/bar");
+      expect(inputs[1].id).eql("base/foo_0/baz");
+      expect(inputs[2].id).eql("base/foo_1/bar");
+      expect(inputs[3].id).eql("base/foo_1/baz");
+    });
+  });
 });