@rjsf/utils 6.0.0-beta.12 → 6.0.0-beta.14

package/lib/types.d.ts

@@ -174,6 +174,8 @@ export type RJSFValidationError = {
     schemaPath?: string;
     /** Full error name, for example ".name is a required property" */
     stack: string;
+    /** The title property for the failing field*/
+    title?: string;
 };
 /** The type that describes an error in a field */
 export type FieldError = string;
@@ -358,6 +360,8 @@ export interface Registry<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
     translateString: (stringKey: TranslatableString, params?: string[]) => string;
     /** The optional global UI Options that are available for all templates, fields and widgets to access */
     globalUiOptions?: GlobalUISchemaOptions;
+    /** The component update strategy used by the Form and its fields for performance optimization */
+    experimental_componentUpdateStrategy?: 'customDeep' | 'shallow' | 'always';
 }
 /** The properties that are passed to a Field implementation */
 export interface FieldProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends GenericObjectType, RJSFBaseProps<T, S, F>, Pick<HTMLAttributes<HTMLElement>, Exclude<keyof HTMLAttributes<HTMLElement>, 'onBlur' | 'onFocus' | 'onChange'>> {
@@ -367,8 +371,10 @@ export interface FieldProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     formData?: T;
     /** The tree of errors for this field and its children */
     errorSchema?: ErrorSchema<T>;
-    /** The field change event handler; called with the updated form data and an optional `ErrorSchema` */
-    onChange: (newFormData: T | undefined, es?: ErrorSchema<T>, id?: string) => any;
+    /** The field change event handler; called with the updated field value, the optional change path for the value
+     * (defaults to an empty array), an optional ErrorSchema and the optional id of the field being changed
+     */
+    onChange: (newValue: T | undefined, path?: (number | string)[], es?: ErrorSchema<T>, id?: string) => void;
     /** The input blur event handler; call it with the field id and value */
     onBlur: (id: string, value: any) => void;
     /** The input focus event handler; call it with the field id and value */
@@ -637,7 +643,7 @@ export interface MultiSchemaFieldTemplateProps<T = any, S extends StrictRJSFSche
     optionSchemaField: ReactNode;
 }
 /** The properties that are passed to a Widget implementation */
-export interface WidgetProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends GenericObjectType, RJSFBaseProps<T, S, F>, Pick<HTMLAttributes<HTMLElement>, Exclude<keyof HTMLAttributes<HTMLElement>, 'onBlur' | 'onFocus'>> {
+export interface WidgetProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends GenericObjectType, RJSFBaseProps<T, S, F>, Pick<HTMLAttributes<HTMLElement>, Exclude<keyof HTMLAttributes<HTMLElement>, 'onBlur' | 'onFocus' | 'onChange'>> {
     /** The generated id for this widget, used to provide unique `name`s and `id`s for the HTML field elements rendered by
      * widgets
      */
@@ -801,6 +807,12 @@ export type UIOptionsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
     /** Anything else will be one of these types */
     [key: string]: boolean | number | string | object | any[] | null | undefined;
 };
+/**
+ * A utility type that extracts the element type from an array type.
+ * If the type is not an array, it returns the type itself as a safe fallback.
+ * Handles both standard arrays and readonly arrays.
+ */
+export type ArrayElement<A> = A extends readonly (infer E)[] ? E : A;
 /** Type describing the well-known properties of the `UiSchema` while also supporting all user defined properties,
  * starting with `ui:`.
  */
@@ -821,6 +833,11 @@ export type UiSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
     'ui:fieldReplacesAnyOrOneOf'?: boolean;
     /** An object that contains all the potential UI options in a single object */
     'ui:options'?: UIOptionsType<T, S, F>;
+    /** The uiSchema for items in an array. Can be an object for a uniform uiSchema across all items (current behavior),
+     * or a function that returns a dynamic uiSchema based on the item's data and index.
+     * When using a function, it receives the item data, index, and optionally the form context as parameters.
+     */
+    items?: UiSchema<ArrayElement<T>, S, F> | ((itemData: ArrayElement<T>, index: number, formContext?: F) => UiSchema<ArrayElement<T>, S, F>);
 };
 /** A `CustomValidator` function takes in a `formData`, `errors` and `uiSchema` objects and returns the given `errors`
  * object back, while potentially adding additional messages to the `errors`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/utils",
-  "version": "6.0.0-beta.12",
+  "version": "6.0.0-beta.14",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -71,14 +71,14 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "nanoid": "^5.1.5",
-    "react-is": "^18.2.0"
+    "react-is": "^18.3.1"
   },
   "devDependencies": {
     "@types/json-schema": "^7.0.15",
     "@types/json-schema-merge-allof": "^0.6.5",
-    "@types/react-is": "^18.2.4",
-    "deep-freeze-es6": "^1.4.1",
-    "eslint": "^8.56.0"
+    "@types/react-is": "^18.3.1",
+    "deep-freeze-es6": "^4.0.1",
+    "eslint": "^8.57.1"
   },
   "publishConfig": {
     "access": "public"

package/src/constants.ts

@@ -46,4 +46,5 @@ export const UI_GLOBAL_OPTIONS_KEY = 'ui:globalOptions';
 
 /** The JSON Schema version strings
  */
+export const JSON_SCHEMA_DRAFT_2019_09 = 'https://json-schema.org/draft/2019-09/schema';
 export const JSON_SCHEMA_DRAFT_2020_12 = 'https://json-schema.org/draft/2020-12/schema';

package/src/createSchemaUtils.ts

@@ -29,6 +29,9 @@ import {
   toIdSchema,
   toPathSchema,
 } from './schema';
+import { makeAllReferencesAbsolute } from './findSchemaDefinition';
+import { ID_KEY, JSON_SCHEMA_DRAFT_2020_12, SCHEMA_KEY } from './constants';
+import get from 'lodash/get';
 
 /** The `SchemaUtils` class provides a wrapper around the publicly exported APIs in the `utils/schema` directory such
  * that one does not have to explicitly pass the `validator`, `rootSchema`, `experimental_defaultFormStateBehavior` or
@@ -57,7 +60,11 @@ class SchemaUtils<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
     experimental_defaultFormStateBehavior: Experimental_DefaultFormStateBehavior,
     experimental_customMergeAllOf?: Experimental_CustomMergeAllOf<S>,
   ) {
-    this.rootSchema = rootSchema;
+    if (rootSchema && rootSchema[SCHEMA_KEY] === JSON_SCHEMA_DRAFT_2020_12) {
+      this.rootSchema = makeAllReferencesAbsolute(rootSchema, get(rootSchema, ID_KEY, '#'));
+    } else {
+      this.rootSchema = rootSchema;
+    }
     this.validator = validator;
     this.experimental_defaultFormStateBehavior = experimental_defaultFormStateBehavior;
     this.experimental_customMergeAllOf = experimental_customMergeAllOf;
@@ -95,9 +102,12 @@ class SchemaUtils<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
     experimental_defaultFormStateBehavior = {},
     experimental_customMergeAllOf?: Experimental_CustomMergeAllOf<S>,
   ): boolean {
+    // If either validator or rootSchema are falsy, return false to prevent the creation
+    // of a new SchemaUtilsType with incomplete properties.
     if (!validator || !rootSchema) {
       return false;
     }
+
     return (
       this.validator !== validator ||
       !deepEquals(this.rootSchema, rootSchema) ||

package/src/findSchemaDefinition.ts

@@ -1,7 +1,14 @@
 import jsonpointer from 'jsonpointer';
 import omit from 'lodash/omit';
 
-import { ID_KEY, JSON_SCHEMA_DRAFT_2020_12, REF_KEY, SCHEMA_KEY } from './constants';
+import {
+  ALL_OF_KEY,
+  ID_KEY,
+  JSON_SCHEMA_DRAFT_2019_09,
+  JSON_SCHEMA_DRAFT_2020_12,
+  REF_KEY,
+  SCHEMA_KEY,
+} from './constants';
 import { GenericObjectType, RJSFSchema, StrictRJSFSchema } from './types';
 import isObject from 'lodash/isObject';
 import isEmpty from 'lodash/isEmpty';
@@ -20,7 +27,16 @@ function findEmbeddedSchemaRecursive<S extends StrictRJSFSchema = RJSFSchema>(sc
     return schema;
   }
   for (const subSchema of Object.values(schema)) {
-    if (isObject(subSchema)) {
+    if (Array.isArray(subSchema)) {
+      for (const item of subSchema) {
+        if (isObject(item)) {
+          const result = findEmbeddedSchemaRecursive<S>(item as S, ref);
+          if (result !== undefined) {
+            return result as S;
+          }
+        }
+      }
+    } else if (isObject(subSchema)) {
       const result = findEmbeddedSchemaRecursive<S>(subSchema as S, ref);
       if (result !== undefined) {
         return result as S;
@@ -30,6 +46,31 @@ function findEmbeddedSchemaRecursive<S extends StrictRJSFSchema = RJSFSchema>(sc
   return undefined;
 }
 
+/** Parses a JSONSchema and makes all references absolute with respect to
+ * the `baseURI` argument
+ * @param schema - The schema to be processed
+ * @param baseURI - The base URI to be used for resolving relative references
+ */
+export function makeAllReferencesAbsolute<S extends StrictRJSFSchema = RJSFSchema>(schema: S, baseURI: string): S {
+  const currentURI = get(schema, ID_KEY, baseURI);
+  // Make all other references absolute
+  if (REF_KEY in schema) {
+    schema = { ...schema, [REF_KEY]: UriResolver.resolve(currentURI, schema[REF_KEY]!) };
+  }
+  // Look for references in nested subschemas
+  for (const [key, subSchema] of Object.entries(schema)) {
+    if (Array.isArray(subSchema)) {
+      schema = {
+        ...schema,
+        [key]: subSchema.map((item) => (isObject(item) ? makeAllReferencesAbsolute(item as S, currentURI) : item)),
+      };
+    } else if (isObject(subSchema)) {
+      schema = { ...schema, [key]: makeAllReferencesAbsolute(subSchema as S, currentURI) };
+    }
+  }
+  return schema;
+}
+
 /** Splits out the value at the `key` in `object` from the `object`, returning an array that contains in the first
  * location, the `object` minus the `key: value` and in the second location the `value`.
  *
@@ -103,7 +144,14 @@ export function findSchemaDefinitionRecursive<S extends StrictRJSFSchema = RJSFS
     const [remaining, theRef] = splitKeyElementFromObject(REF_KEY, current);
     const subSchema = findSchemaDefinitionRecursive<S>(theRef, rootSchema, [...recurseList, ref], baseURI);
     if (Object.keys(remaining).length > 0) {
-      return { ...remaining, ...subSchema };
+      if (
+        rootSchema[SCHEMA_KEY] === JSON_SCHEMA_DRAFT_2019_09 ||
+        rootSchema[SCHEMA_KEY] === JSON_SCHEMA_DRAFT_2020_12
+      ) {
+        return { [ALL_OF_KEY]: [remaining, subSchema] } as S;
+      } else {
+        return { ...remaining, ...subSchema };
+      }
     }
     return subSchema;
   }

package/src/getUiOptions.ts

@@ -13,6 +13,10 @@ export default function getUiOptions<T = any, S extends StrictRJSFSchema = RJSFS
   uiSchema: UiSchema<T, S, F> = {},
   globalOptions: GlobalUISchemaOptions = {},
 ): UIOptionsType<T, S, F> {
+  // Handle null or undefined uiSchema
+  if (!uiSchema) {
+    return { ...globalOptions };
+  }
   return Object.keys(uiSchema)
     .filter((key) => key.indexOf('ui:') === 0)
     .reduce(

package/src/index.ts

@@ -6,6 +6,7 @@ import createSchemaUtils from './createSchemaUtils';
 import dataURItoBlob from './dataURItoBlob';
 import dateRangeOptions from './dateRangeOptions';
 import deepEquals from './deepEquals';
+import shallowEquals from './shallowEquals';
 import englishStringTranslator from './englishStringTranslator';
 import enumOptionsDeselectValue from './enumOptionsDeselectValue';
 import enumOptionsIndexForValue from './enumOptionsIndexForValue';
@@ -130,6 +131,7 @@ export {
   rangeSpec,
   replaceStringParameters,
   schemaRequiresTrueValue,
+  shallowEquals,
   shouldRender,
   sortedJSONStringify,
   titleId,
@@ -142,3 +144,5 @@ export {
   validationDataMerge,
   withIdRefPrefix,
 };
+
+export type { ComponentUpdateStrategy } from './shouldRender';

package/src/mergeDefaultsWithFormData.ts

@@ -82,7 +82,7 @@ export default function mergeDefaultsWithFormData<T = any>(
       }
 
       acc[key as keyof T] = mergeDefaultsWithFormData<T>(
-        get(defaults, key) ?? {},
+        get(defaults, key),
         keyValue,
         mergeExtraArrayDefaults,
         defaultSupercedesUndefined,

package/src/schema/getDefaultFormState.ts

@@ -115,10 +115,18 @@ function maybeAddDefaultToObject<T = any>(
   isConst = false,
 ) {
   const { emptyObjectFields = 'populateAllDefaults' } = experimental_defaultFormStateBehavior;
-  if (includeUndefinedValues || isConst) {
-    // If includeUndefinedValues
+
+  if (includeUndefinedValues === true || isConst) {
+    // If includeUndefinedValues is explicitly true
     // Or if the schema has a const property defined, then we should always return the computedDefault since it's coming from the const.
     obj[key] = computedDefault;
+  } else if (includeUndefinedValues === 'excludeObjectChildren') {
+    // Fix for Issue #4709: When in 'excludeObjectChildren' mode, don't set primitive fields to empty objects
+    // Only add the computed default if it's not an empty object placeholder for a primitive field
+    if (!isObject(computedDefault) || !isEmpty(computedDefault)) {
+      obj[key] = computedDefault;
+    }
+    // If computedDefault is an empty object {}, don't add it - let the field stay undefined
   } else if (emptyObjectFields !== 'skipDefaults') {
     // If isParentRequired is undefined, then we are at the root level of the schema so defer to the requiredness of
     // the field key itself in the `requiredField` list
@@ -473,6 +481,7 @@ export function getObjectDefaults<T = any, S extends StrictRJSFSchema = RJSFSche
           required: retrievedSchema.required?.includes(key),
           shouldMergeDefaultsIntoFormData,
         });
+
         maybeAddDefaultToObject<T>(
           acc,
           key,
@@ -483,6 +492,7 @@ export function getObjectDefaults<T = any, S extends StrictRJSFSchema = RJSFSche
           experimental_defaultFormStateBehavior,
           hasConst,
         );
+
         return acc;
       },
       {},

package/src/schema/getDisplayLabel.ts

@@ -52,10 +52,10 @@ export default function getDisplayLabel<
   if (schemaType === 'object') {
     displayLabel = false;
   }
-  if (schemaType === 'boolean' && !uiSchema[UI_WIDGET_KEY]) {
+  if (schemaType === 'boolean' && uiSchema && !uiSchema[UI_WIDGET_KEY]) {
     displayLabel = false;
   }
-  if (uiSchema[UI_FIELD_KEY]) {
+  if (uiSchema && uiSchema[UI_FIELD_KEY]) {
     displayLabel = false;
   }
   return displayLabel;

package/src/schema/retrieveSchema.ts

@@ -430,7 +430,7 @@ export function stubExistingAdditionalProperties<
       if (!isEmpty(matchingProperties)) {
         schema.properties[key] = retrieveSchema<T, S, F>(
           validator,
-          { allOf: Object.values(matchingProperties) } as S,
+          { [ALL_OF_KEY]: Object.values(matchingProperties) } as S,
           rootSchema,
           get(formData, [key]) as T,
           experimental_customMergeAllOf,
@@ -445,7 +445,7 @@ export function stubExistingAdditionalProperties<
         if (REF_KEY in schema.additionalProperties!) {
           additionalProperties = retrieveSchema<T, S, F>(
             validator,
-            { $ref: get(schema.additionalProperties, [REF_KEY]) } as S,
+            { [REF_KEY]: get(schema.additionalProperties, [REF_KEY]) } as S,
             rootSchema,
             formData as T,
             experimental_customMergeAllOf,

package/src/shallowEquals.ts

@@ -0,0 +1,41 @@
+/** Implements a shallow equals comparison that uses Object.is() for comparing values.
+ * This function compares objects by checking if all keys and their values are equal using Object.is().
+ *
+ * @param a - The first element to compare
+ * @param b - The second element to compare
+ * @returns - True if the `a` and `b` are shallow equal, false otherwise
+ */
+export default function shallowEquals(a: any, b: any): boolean {
+  // If they're the same reference, they're equal
+  if (Object.is(a, b)) {
+    return true;
+  }
+
+  // If either is null or undefined, they're not equal (since we know they're not the same reference)
+  if (a == null || b == null) {
+    return false;
+  }
+
+  // If they're not objects, they're not equal (since Object.is already checked)
+  if (typeof a !== 'object' || typeof b !== 'object') {
+    return false;
+  }
+
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+
+  // Different number of keys means not equal
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  // Check if all keys and values are equal
+  for (let i = 0; i < keysA.length; i++) {
+    const key = keysA[i];
+    if (!Object.prototype.hasOwnProperty.call(b, key) || !Object.is(a[key], b[key])) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/shouldRender.ts

@@ -1,16 +1,41 @@
 import React from 'react';
 
 import deepEquals from './deepEquals';
+import shallowEquals from './shallowEquals';
+
+/** The supported component update strategies */
+export type ComponentUpdateStrategy = 'customDeep' | 'shallow' | 'always';
 
 /** Determines whether the given `component` should be rerendered by comparing its current set of props and state
- * against the next set. If either of those two sets are not the same, then the component should be rerendered.
+ * against the next set. The comparison strategy can be controlled via the `updateStrategy` parameter.
  *
  * @param component - A React component being checked
  * @param nextProps - The next set of props against which to check
  * @param nextState - The next set of state against which to check
+ * @param updateStrategy - The strategy to use for comparison:
+ *   - 'customDeep': Uses RJSF's custom deep equality checks (default)
+ *   - 'shallow': Uses shallow comparison of props and state
+ *   - 'always': Always returns true (React's default behavior)
  * @returns - True if the component should be re-rendered, false otherwise
  */
-export default function shouldRender(component: React.Component, nextProps: any, nextState: any) {
+export default function shouldRender(
+  component: React.Component,
+  nextProps: any,
+  nextState: any,
+  updateStrategy: ComponentUpdateStrategy = 'customDeep',
+) {
+  if (updateStrategy === 'always') {
+    // Use React's default behavior: always update if state or props change (no shouldComponentUpdate optimization)
+    return true;
+  }
+
+  if (updateStrategy === 'shallow') {
+    // Use shallow comparison for props and state
+    const { props, state } = component;
+    return !shallowEquals(props, nextProps) || !shallowEquals(state, nextState);
+  }
+
+  // Use custom deep equality checks (default 'customDeep' strategy)
   const { props, state } = component;
   return !deepEquals(props, nextProps) || !deepEquals(state, nextState);
 }

package/src/types.ts

@@ -212,6 +212,8 @@ export type RJSFValidationError = {
   schemaPath?: string;
   /** Full error name, for example ".name is a required property" */
   stack: string;
+  /** The title property for the failing field*/
+  title?: string;
 };
 
 /** The type that describes an error in a field */
@@ -423,6 +425,8 @@ export interface Registry<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   translateString: (stringKey: TranslatableString, params?: string[]) => string;
   /** The optional global UI Options that are available for all templates, fields and widgets to access */
   globalUiOptions?: GlobalUISchemaOptions;
+  /** The component update strategy used by the Form and its fields for performance optimization */
+  experimental_componentUpdateStrategy?: 'customDeep' | 'shallow' | 'always';
 }
 
 /** The properties that are passed to a Field implementation */
@@ -436,8 +440,10 @@ export interface FieldProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   formData?: T;
   /** The tree of errors for this field and its children */
   errorSchema?: ErrorSchema<T>;
-  /** The field change event handler; called with the updated form data and an optional `ErrorSchema` */
-  onChange: (newFormData: T | undefined, es?: ErrorSchema<T>, id?: string) => any;
+  /** The field change event handler; called with the updated field value, the optional change path for the value
+   * (defaults to an empty array), an optional ErrorSchema and the optional id of the field being changed
+   */
+  onChange: (newValue: T | undefined, path?: (number | string)[], es?: ErrorSchema<T>, id?: string) => void;
   /** The input blur event handler; call it with the field id and value */
   onBlur: (id: string, value: any) => void;
   /** The input focus event handler; call it with the field id and value */
@@ -795,7 +801,7 @@ export interface MultiSchemaFieldTemplateProps<
 export interface WidgetProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>
   extends GenericObjectType,
     RJSFBaseProps<T, S, F>,
-    Pick<HTMLAttributes<HTMLElement>, Exclude<keyof HTMLAttributes<HTMLElement>, 'onBlur' | 'onFocus'>> {
+    Pick<HTMLAttributes<HTMLElement>, Exclude<keyof HTMLAttributes<HTMLElement>, 'onBlur' | 'onFocus' | 'onChange'>> {
   /** The generated id for this widget, used to provide unique `name`s and `id`s for the HTML field elements rendered by
    * widgets
    */
@@ -1003,6 +1009,13 @@ export type UIOptionsType<
   [key: string]: boolean | number | string | object | any[] | null | undefined;
 };
 
+/**
+ * A utility type that extracts the element type from an array type.
+ * If the type is not an array, it returns the type itself as a safe fallback.
+ * Handles both standard arrays and readonly arrays.
+ */
+export type ArrayElement<A> = A extends readonly (infer E)[] ? E : A;
+
 /** Type describing the well-known properties of the `UiSchema` while also supporting all user defined properties,
  * starting with `ui:`.
  */
@@ -1028,6 +1041,13 @@ export type UiSchema<
     'ui:fieldReplacesAnyOrOneOf'?: boolean;
     /** An object that contains all the potential UI options in a single object */
     'ui:options'?: UIOptionsType<T, S, F>;
+    /** The uiSchema for items in an array. Can be an object for a uniform uiSchema across all items (current behavior),
+     * or a function that returns a dynamic uiSchema based on the item's data and index.
+     * When using a function, it receives the item data, index, and optionally the form context as parameters.
+     */
+    items?:
+      | UiSchema<ArrayElement<T>, S, F>
+      | ((itemData: ArrayElement<T>, index: number, formContext?: F) => UiSchema<ArrayElement<T>, S, F>);
   };
 
 /** A `CustomValidator` function takes in a `formData`, `errors` and `uiSchema` objects and returns the given `errors`