Add LayoutGridField and LayoutMultiSchemaField (#4506)

* Add LayoutGridField and LayoutMultiSchemaField
Added new `LayoutGridField` and `LayoutMultiSchemaField` with updates to `utils` to support them
- Updated `@rjsf/utils` to support the new fields as follows:
  - Updated the `UIOptionsBaseType` to add the optional `optionsSchemaSelector?: string` prop
  - Updated `getDiscriminatorFieldFromSchema()` to use the `DISCRIMINATOR_PATH` constant
  - Updated `hashForSchema.ts` to expose the `sortedJSONStringify()` method adding it to the `index.ts` export
    - Also added unit tests for the exposed method
  - Updated `getTestIds()` to read the `NODE_ENV` from the `process.env` via lodash `get()` to avoid odd bug
  - Updated `optionsList()` to switch the order of the generics and to add support for drilling into a `anyOf/oneOf` schema with a discriminator or a `optionsSchemaSelector`
    - This resulted in a few updates to other methods
    - Updated the tests to match the new capabilities
  - Updated `findSelectedOptionInXxxOf()` to use `getDiscriminatorFieldFromSchema()` rather than `DISCRIMINATOR_PATH`
  - Updated `ensureFormDataMatchingSchema()` to add the missing generics on the functions that have them
- In `rjsf/core` :
  - Updated `package.json` to add the necessary `@testing-library` packages needed for the new components tests
  - Updated `ArrayField`, `BooleanField` and `StringField` to fix the order of the generics for `optionsList()`
  - Updated `RadioWidget` to add `radiogroup` role and `SelectWidget` to add the `combobox` role
  - Added the `LayoutGridField` and `LayoutMultiSchemaField` to the `fields` and added full `@testing-library` tests for them
  - Updated the snapshots due to the `role` changes to the two widgets
- Updated the `utility-functions.md` to add `sortedJSONStringify()` docs and updated the `optionsList()` docs
- Updated the `v6.x upgrade guide.md` to add breaking changes for `optionsList()` and adding the new `sortedJSONStringify()`

* - Added `@babel/plugin-transform-class-static-block` to support testing

* - Fixed build due to incorrect casing on import

* - Responded to self-review

* - Responded to reviewer feedback

* - Fixed the name of the LAYOUT_GRID_UI_OPTION in the source and tests

Author: heath-freenome

babel.config.js

@@ -9,5 +9,9 @@ module.exports = {
     ],
     '@babel/preset-typescript',
   ],
-  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining'],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-transform-class-static-block',
+  ],
 };

package-lock.json

@@ -32,6 +32,7 @@
   "homepage": "https://github.com/rjsf-team/react-jsonschema-form",
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.10",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@nrwl/nx-cloud": "^15.3.5",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",

package.json

@@ -57,6 +57,9 @@
     "@rjsf/snapshot-tests": "^6.0.0-alpha.0",
     "@rjsf/utils": "^6.0.0-alpha.0",
     "@rjsf/validator-ajv8": "^6.0.0-alpha.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.58",

packages/core/package.json

@@ -612,7 +612,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     } = this.props;
     const { widgets, schemaUtils, formContext, globalUiOptions } = registry;
     const itemsSchema = schemaUtils.retrieveSchema(schema.items as S, items);
-    const enumOptions = optionsList<S, T[], F>(itemsSchema, uiSchema);
+    const enumOptions = optionsList<T[], S, F>(itemsSchema, uiSchema);
     const { widget = 'select', title: uiTitle, ...options } = getUiOptions<T[], S, F>(uiSchema, globalUiOptions);
     const Widget = getWidget<T[], S, F>(schema, widget, widgets);
     const label = uiTitle ?? schema.title ?? name;

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

@@ -52,7 +52,7 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
   let enumOptions: EnumOptionsType<S>[] | undefined;
   const label = uiTitle ?? schemaTitle ?? title ?? name;
   if (Array.isArray(schema.oneOf)) {
-    enumOptions = optionsList<S, T, F>(
+    enumOptions = optionsList<T, S, F>(
       {
         oneOf: schema.oneOf
           .map((option) => {
@@ -84,7 +84,7 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
         },
       ];
     } else {
-      enumOptions = optionsList<S, T, F>(
+      enumOptions = optionsList<T, S, F>(
         {
           enum: enums,
           // NOTE: enumNames is deprecated, but still supported for now.