Feature - Prep work for new feature in 4736 (#4776)

* Fix 4772 by always generating the outer grid regardless of the number of properties
Fixed #4772 by always genering the outer grid
- Updated `chakra-ui`'s `ObjectFieldTemplate` to render the outer `Grid` regardless of the number of properties
- Updated the `CHANGELOG.md` accordingly

* Feature - Prep work for new feature in 4736
Breaking change refactoring in preparation for the feature in 4736
- In `@rjsf/utils`:
  - Added new `GlobalFormOptions`, refactoring the `experimental_componentUpdateStrategy` from `Registry` and `idPrefix` & `idSeparator` from `FieldProps`
  - Replaced the `experimental_componentUpdateStrategy` prop in `Registry` with `readonly globalFormOptions?: GlobalFormOptions`
  - Updated `FieldProps` to remove `idPrefix` and `idSeparator`
- In `@rjsf/core`:
  - Updated `Form` to add the `globalFormOptions` to the registry if there are any `GlobalFormOptions` values provided
  - Updated `ArrayField`, `LayoutGridField`, `ObjectField` and `SchemaField` to get `idPrefix`, `idSeparator` from the `registry.globalFormOptions`, no longer passing them on `FieldProps`
  - Updated `SchemaField` to get `experimental_componentUpdateStrategy` from the `registry.globalFormOptions` as well
  - Updated the `SchemaField` tests as needed
- In `@rjsf/daisy` updated the snapshots
- Updated the `custom-widget-fields.md` and `v6.x upgrade guide.md` to document the refactor of the `idPrefix` and `idSeparator` refactor
- Updated the `CHANGELOG.md` file accordingly

* - Responded to reviewer feedback

* - Improved documentation

* - Responded to more feedback

Author: heath-freenome

CHANGELOG.md

@@ -25,6 +25,9 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Updated `ObjectField` to remove the `name` from the path passed to `onChange()` callback in `handleAddClick()` and `onDropPropertyClick()`, fixing [#4763](https://github.com/rjsf-team/react-jsonschema-form/issues/4763)
 - Updated `Form` to restore the passing of an empty string for `name` to avoid accidentally showing it as the title for the whole schema
+- Updated `Form` to add the `globalFormOptions` to the `registry` when there are `GlobalFormOptions` provided, also stopped passing `idPrefix` and `idSeparator` to `SchemaField`
+- Updated `ArrayField`, `LayoutGridField`, `ObjectField` and `SchemaField` to get `idPrefix`, `idSeparator` from the `registry.globalFormOptions`, no longer passing them on `FieldProps`
+  - Updated `SchemaField` to get `experimental_componentUpdateStrategy` from the `registry.globalFormOptions` as well
 
 ## @rjsf/shadcn
 
@@ -33,6 +36,13 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/utils
 
 - Update `getDefaultFormState()` to add support for `null` defaults for `["null", "object"]` and `["null", "array"]`, fixing [#1581](https://github.com/rjsf-team/react-jsonschema-form/issues/1581)
+- Added a new `GlobalFormProps` interface which contains the following props and replaced the `experimental_componentUpdateStrategy` in `Registry` with `globalFormProps?: GlobalFormProps`
+  - `experimental_componentUpdateStrategy` (refactored from `Registry`) and `idPrefix` & `idSeparator` (refactored from `FieldProps`)
+- BREAKING CHANGE: Removed the optional `idPrefix` and `idSeparator` props from the `FieldProps` interface
+
+## Dev / docs / playground
+
+- Updated the `custom-widget-fields.md` and `v6.x upgrade guide.md` to document the refactor of the `idPrefix` and `idSeparator` refactor
 
 # 6.0.0-beta.16
 

packages/core/src/components/Form.tsx

@@ -43,6 +43,7 @@ import _forEach from 'lodash/forEach';
 import _get from 'lodash/get';
 import _isEmpty from 'lodash/isEmpty';
 import _isNil from 'lodash/isNil';
+import _omitBy from 'lodash/omitBy';
 import _pick from 'lodash/pick';
 import _set from 'lodash/set';
 import _toPath from 'lodash/toPath';
@@ -956,10 +957,14 @@ export default class Form<
     const {
       translateString: customTranslateString,
       uiSchema = {},
-      experimental_componentUpdateStrategy = 'customDeep',
+      experimental_componentUpdateStrategy,
+      idSeparator,
+      idPrefix,
     } = this.props;
     const { schema, schemaUtils } = this.state;
     const { fields, templates, widgets, formContext, translateString } = getDefaultRegistry<T, S, F>();
+    // Omit any options that are undefined or null
+    const globalFormOptions = _omitBy({ idPrefix, idSeparator, experimental_componentUpdateStrategy }, _isNil);
     return {
       fields: { ...fields, ...this.props.fields },
       templates: {
@@ -976,7 +981,7 @@ export default class Form<
       schemaUtils,
       translateString: customTranslateString || translateString,
       globalUiOptions: uiSchema[UI_GLOBAL_OPTIONS_KEY],
-      experimental_componentUpdateStrategy,
+      globalFormOptions,
     };
   }
 
@@ -1101,8 +1106,6 @@ export default class Form<
     const {
       children,
       id,
-      idPrefix = '',
-      idSeparator,
       className = '',
       tagName,
       name,
@@ -1158,8 +1161,6 @@ export default class Form<
           uiSchema={uiSchema}
           errorSchema={errorSchema}
           idSchema={idSchema}
-          idPrefix={idPrefix}
-          idSeparator={idSeparator}
           formData={formData}
           onChange={this.onChange}
           onBlur={this.onBlur}

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

@@ -511,13 +511,12 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       registry,
       onBlur,
       onFocus,
-      idPrefix,
-      idSeparator = '_',
       rawErrors,
     } = this.props;
     const { keyedFormData } = this.state;
     const fieldTitle = schema.title || title || name;
-    const { schemaUtils, formContext } = registry;
+    const { schemaUtils, formContext, globalFormOptions } = registry;
+    const { idPrefix, idSeparator = '_' } = globalFormOptions;
     const uiOptions = getUiOptions<T[], S, F>(uiSchema);
     const _schemaItems: S = isObject(schema.items) ? (schema.items as S) : ({} as S);
     const itemsSchema: S = schemaUtils.retrieveSchema(_schemaItems);
@@ -735,8 +734,6 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       uiSchema = {},
       formData = [],
       errorSchema,
-      idPrefix,
-      idSeparator = '_',
       idSchema,
       name,
       title,
@@ -753,7 +750,8 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     let { formData: items = [] } = this.props;
     const fieldTitle = schema.title || title || name;
     const uiOptions = getUiOptions<T[], S, F>(uiSchema);
-    const { schemaUtils, formContext } = registry;
+    const { schemaUtils, formContext, globalFormOptions } = registry;
+    const { idPrefix, idSeparator = '_' } = globalFormOptions;
     const _schemaItems: S[] = isObject(schema.items) ? (schema.items as S[]) : ([] as S[]);
     const itemSchemas = _schemaItems.map((item: S, index: number) =>
       schemaUtils.retrieveSchema(item, formData[index] as unknown as T[]),
@@ -884,7 +882,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       totalItems,
       title,
     } = props;
-    const { disabled, hideError, idPrefix, idSeparator, readonly, uiSchema, registry, formContext } = this.props;
+    const { disabled, hideError, readonly, uiSchema, registry, formContext } = this.props;
     const {
       fields: { ArraySchemaField, SchemaField },
       globalUiOptions,
@@ -911,8 +909,6 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           formData={itemData}
           formContext={formContext}
           errorSchema={itemErrorSchema}
-          idPrefix={idPrefix}
-          idSeparator={idSeparator}
           idSchema={itemIdSchema}
           required={this.isItemRequired(itemSchema)}
           onChange={this.onChangeForIndex(index)}

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

@@ -897,11 +897,11 @@ export default class LayoutGridField<
       formData,
       readonly,
       registry,
-      idSeparator,
       layoutGridSchema, // Used to pull this out of otherProps since we don't want to pass it through
       ...otherProps
     } = this.props;
-    const { fields, schemaUtils } = registry;
+    const { fields, schemaUtils, globalFormOptions } = registry;
+    const { idSeparator } = globalFormOptions;
     const { SchemaField, LayoutMultiSchemaField } = fields;
     const uiComponentProps = LayoutGridField.computeUIComponentPropsFromGridSchema(registry, gridSchema);
     if (uiComponentProps.rendered) {
@@ -953,7 +953,6 @@ export default class LayoutGridField<
           uiSchema={fieldUiSchema}
           errorSchema={get(errorSchema, name)}
           idSchema={fieldIdSchema}
-          idSeparator={idSeparator}
           formData={get(formData, name)}
           onChange={this.onFieldChange(name)}
           onBlur={onBlur}
@@ -977,7 +976,6 @@ export default class LayoutGridField<
           uiSchema={uiSchema}
           schema={initialSchema}
           idSchema={idSchema}
-          idSeparator={idSeparator}
           onBlur={onBlur}
           onFocus={onFocus}
           registry={registry}

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

@@ -237,8 +237,6 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
       disabled,
       readonly,
       hideError,
-      idPrefix,
-      idSeparator,
       onBlur,
       onFocus,
       registry,
@@ -292,8 +290,6 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
               uiSchema={fieldUiSchema}
               errorSchema={get(errorSchema, name)}
               idSchema={fieldIdSchema}
-              idPrefix={idPrefix}
-              idSeparator={idSeparator}
               formData={get(formData, name)}
               formContext={formContext}
               wasPropertyKeyModified={this.state.wasPropertyKeyModified}

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

@@ -110,8 +110,6 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     uiSchema,
     formData,
     errorSchema,
-    idPrefix,
-    idSeparator,
     name,
     onChange,
     onKeyChange,
@@ -120,7 +118,8 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     registry,
     wasPropertyKeyModified = false,
   } = props;
-  const { formContext, schemaUtils, globalUiOptions } = registry;
+  const { formContext, schemaUtils, globalUiOptions, globalFormOptions } = registry;
+  const { idPrefix, idSeparator } = globalFormOptions;
   const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
   const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, uiOptions);
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
@@ -291,9 +290,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
             errorSchema={errorSchema}
             formData={formData}
             formContext={formContext}
-            idPrefix={idPrefix}
             idSchema={idSchema}
-            idSeparator={idSeparator}
             onBlur={props.onBlur}
             onChange={props.onChange}
             onFocus={props.onFocus}
@@ -315,9 +312,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
             errorSchema={errorSchema}
             formData={formData}
             formContext={formContext}
-            idPrefix={idPrefix}
             idSchema={idSchema}
-            idSeparator={idSeparator}
             onBlur={props.onBlur}
             onChange={props.onChange}
             onFocus={props.onFocus}
@@ -342,7 +337,10 @@ class SchemaField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
   FieldProps<T, S, F>
 > {
   shouldComponentUpdate(nextProps: Readonly<FieldProps<T, S, F>>) {
-    const { experimental_componentUpdateStrategy = 'customDeep' } = this.props.registry;
+    const {
+      registry: { globalFormOptions },
+    } = this.props;
+    const { experimental_componentUpdateStrategy = 'customDeep' } = globalFormOptions;
 
     return shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
   }

packages/core/src/getDefaultRegistry.ts

@@ -20,5 +20,6 @@ export default function getDefaultRegistry<
     rootSchema: {} as S,
     formContext: {} as F,
     translateString: englishStringTranslator,
+    globalFormOptions: {},
   };
 }

packages/core/test/SchemaField.test.jsx

@@ -52,7 +52,7 @@ describe('SchemaField', () => {
         schemaUtils,
         translateString: englishStringTranslator,
         globalUiOptions: undefined,
-        experimental_componentUpdateStrategy: 'customDeep',
+        globalFormOptions: {},
       });
     });
     it('should provide expected registry with globalUiOptions as prop', () => {
@@ -87,7 +87,7 @@ describe('SchemaField', () => {
         schemaUtils,
         translateString: englishStringTranslator,
         globalUiOptions: { copyable: true },
-        experimental_componentUpdateStrategy: 'customDeep',
+        globalFormOptions: {},
       });
     });
   });

packages/core/test/testData/getTestRegistry.tsx

@@ -22,5 +22,6 @@ export default function getTestRegistry(
     rootSchema,
     schemaUtils,
     translateString: englishStringTranslator,
+    globalFormOptions: {},
   };
 }

packages/daisyui/jest.config.json

@@ -6,7 +6,7 @@
   },
   "coveragePathIgnorePatterns": ["/node_modules/", "/test/"],
   "transformIgnorePatterns": [
-    "/node_modules/(?!(@rjsf|@epicfaace|@fortawesome|@coreui|yup|react-day-picker|dayjs|deep-freeze-es6)/)"
+    "/node_modules/(?!(@fortawesome|yup|react-day-picker|dayjs|deep-freeze-es6)/)"
   ],
   "moduleNameMapper": {
     "\\.(css|less|scss|sass)$": "<rootDir>/test/fileMock.js"