@rjsf/utils 6.1.2 → 6.2.3

package/lib/types.d.ts

@@ -316,6 +316,8 @@ export type TemplatesType<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
         MoveUpButton: ComponentType<IconButtonProps<T, S, F>>;
         /** The template to use for the Remove button used for AdditionalProperties and Array items */
         RemoveButton: ComponentType<IconButtonProps<T, S, F>>;
+        /** The template to use for the Clear button used for input fields */
+        ClearButton: ComponentType<IconButtonProps<T, S, F>>;
     };
 } & {
     /** Allow this to support any named `ComponentType` or an object of named `ComponentType`s */
@@ -338,6 +340,9 @@ export type GlobalUISchemaOptions = GenericObjectType & {
     removable?: boolean;
     /** Field labels are rendered by default. Labels may be omitted by setting the `label` option to `false` */
     label?: boolean;
+    /** Flag, if set to `true`, will allow the text input fields to be cleared
+     */
+    allowClearTextInputs?: boolean;
     /** When using `additionalProperties`, key collision is prevented by appending a unique integer to the duplicate key.
      * This option allows you to change the separator between the original key name and the integer. Default is "-"
      */
@@ -447,6 +452,8 @@ export type Field<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
 };
 /** The properties that are passed to a `FieldTemplate` implementation */
 export type FieldTemplateProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = RJSFBaseProps<T, S, F> & {
+    /** The FieldPathId containing the id and path for this field */
+    fieldPathId: FieldPathId;
     /** The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget */
     id: string;
     /** A string containing the base CSS classes, merged with any custom ones defined in your uiSchema */
@@ -914,10 +921,10 @@ export type UiSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
      */
     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`
+/** A `CustomValidator` function takes in a `formData`, `errors`, `uiSchema` and `errorSchema` objects and returns the given `errors`
  * object back, while potentially adding additional messages to the `errors`
  */
-export type CustomValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = (formData: T | undefined, errors: FormValidation<T>, uiSchema?: UiSchema<T, S, F>) => FormValidation<T>;
+export type CustomValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = (formData: T | undefined, errors: FormValidation<T>, uiSchema?: UiSchema<T, S, F>, errorSchema?: ErrorSchema<T>) => FormValidation<T>;
 /** An `ErrorTransformer` function will take in a list of `errors` & a `uiSchema` and potentially return a
  * transformation of those errors in what ever way it deems necessary
  */
@@ -1101,6 +1108,16 @@ export interface SchemaUtilsType<T = any, S extends StrictRJSFSchema = RJSFSchem
      * @returns - True if schema contains a select, otherwise false
      */
     isSelect(schema: S): boolean;
+    /**
+     * The function takes a `schema` and `formData` and returns a copy of the formData with any fields not defined in the schema removed.
+     * This is useful for ensuring that only data that is relevant to the schema is preserved. Objects with `additionalProperties`
+     * keyword set to `true` will not have their extra fields removed.
+     *
+     * @param schema - The schema to use for filtering the `formData`
+     * @param [formData] - The formData to filter
+     * @returns The new form data, with any fields not defined in the schema removed
+     */
+    omitExtraData(schema: S, formData?: T): T | undefined;
     /** Retrieves an expanded schema that has had all of its conditions, additional properties, references and
      * dependencies resolved and merged into the `schema` given a `rawFormData` that is used to do the potentially
      * recursive resolution.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/utils",
-  "version": "6.1.2",
+  "version": "6.2.3",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/createSchemaUtils.ts

@@ -23,6 +23,7 @@ import {
   isFilesArray,
   isMultiSelect,
   isSelect,
+  omitExtraData,
   retrieveSchema,
   sanitizeDataForNewSchema,
   toPathSchema,
@@ -297,6 +298,18 @@ class SchemaUtils<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
   isSelect(schema: S) {
     return isSelect<T, S, F>(this.validator, schema, this.rootSchema, this.experimental_customMergeAllOf);
   }
+  /**
+   * The function takes a `schema` and `formData` and returns a copy of the formData with any fields not defined in the schema removed.
+   * This is useful for ensuring that only data that is relevant to the schema is preserved. Objects with `additionalProperties`
+   * keyword set to `true` will not have their extra fields removed.
+   *
+   * @param schema - The schema to use for filtering the `formData`
+   * @param [formData] - The formData to filter
+   * @returns The new form data, with any fields not defined in the schema removed
+   */
+  omitExtraData(schema: S, formData?: T): T | undefined {
+    return omitExtraData<T, S, F>(this.validator, schema, this.rootSchema, formData);
+  }
 
   /** Retrieves an expanded schema that has had all of its conditions, additional properties, references and
    * dependencies resolved and merged into the `schema` given a `rawFormData` that is used to do the potentially

package/src/enums.ts

@@ -55,6 +55,8 @@ export enum TranslatableString {
   Type = 'Type',
   /** Label for the 'value' field, used by FallbackField */
   Value = 'Value',
+  /** Clear button title, used by IconButton */
+  ClearButton = 'clear input',
   // Strings with replaceable parameters
   /** Unknown field type reason, where %1 will be replaced with the type as provided by SchemaField */
   UnknownFieldType = 'Unknown field type %1',

package/src/schema/getDefaultFormState.ts

@@ -8,6 +8,7 @@ import {
   CONST_KEY,
   DEFAULT_KEY,
   DEPENDENCIES_KEY,
+  IF_KEY,
   ONE_OF_KEY,
   PROPERTIES_KEY,
   REF_KEY,
@@ -251,9 +252,15 @@ export function computeDefaults<T = any, S extends StrictRJSFSchema = RJSFSchema
     !constIsAjvDataReference(schema)
   ) {
     defaults = schema[CONST_KEY] as unknown as T;
-  } else if (isObject(defaults) && isObject(schema.default)) {
+  } else if (
+    isObject(defaults) &&
+    isObject(schema.default) &&
+    !schema[ANY_OF_KEY] &&
+    !schema[ONE_OF_KEY] &&
+    !schema[REF_KEY]
+  ) {
     // For object defaults, only override parent defaults that are defined in
-    // schema.default.
+    // schema.default. Skip this for anyOf/oneOf/$ref schemas - they need special handling.
     defaults = mergeObjects(defaults!, schema.default as GenericObjectType) as T;
   } else if (DEFAULT_KEY in schema && !schema[ANY_OF_KEY] && !schema[ONE_OF_KEY] && !schema[REF_KEY]) {
     // If the schema has a default value, then we should use it as the default.
@@ -268,8 +275,11 @@ export function computeDefaults<T = any, S extends StrictRJSFSchema = RJSFSchema
     }
 
     // If the referenced schema exists and parentDefaults is not set
-    // Then set the defaults from the current schema for the referenced schema
-    if (schemaToCompute && !defaults) {
+    // Then set the defaults from the current schema for the referenced schema.
+    // Only do this if rawFormData has no meaningful data - we don't want to override user's existing values.
+    // Check for undefined OR empty object - rawFormData may be coerced to {} when not an object.
+    const hasNoExistingData = rawFormData === undefined || (isObject(rawFormData) && isEmpty(rawFormData));
+    if (schemaToCompute && !defaults && hasNoExistingData) {
       defaults = schema.default as T | undefined;
     }
 
@@ -478,12 +488,16 @@ export function getObjectDefaults<T = any, S extends StrictRJSFSchema = RJSFSche
   {
     const formData: T = (isObject(rawFormData) ? rawFormData : {}) as T;
     const schema: S = rawSchema;
-    // This is a custom addition that fixes this issue:
-    // https://github.com/rjsf-team/react-jsonschema-form/issues/3832
-    const retrievedSchema =
-      experimental_defaultFormStateBehavior?.allOf === 'populateDefaults' && ALL_OF_KEY in schema
-        ? retrieveSchema<T, S, F>(validator, schema, rootSchema, formData, experimental_customMergeAllOf)
-        : schema;
+    // Retrieve the schema:
+    // - If schema contains `allOf` AND `experimental_defaultFormStateBehavior.allOf` is set to `populateDefaults`
+    // - OR if schema contains an 'if' AND `emptyObjectFields` is not set to `skipEmptyDefaults`
+    // This ensures we compute defaults correctly for schemas with these keywords.
+    const shouldRetrieveSchema =
+      (experimental_defaultFormStateBehavior?.allOf === 'populateDefaults' && ALL_OF_KEY in schema) ||
+      (experimental_defaultFormStateBehavior?.emptyObjectFields !== 'skipEmptyDefaults' && IF_KEY in schema);
+    const retrievedSchema = shouldRetrieveSchema
+      ? retrieveSchema<T, S, F>(validator, schema, rootSchema, formData, experimental_customMergeAllOf)
+      : schema;
     const parentConst = retrievedSchema[CONST_KEY];
     const objectDefaults = Object.keys(retrievedSchema.properties || {}).reduce(
       (acc: GenericObjectType, key: string) => {
@@ -614,12 +628,14 @@ export function getArrayDefaults<T = any, S extends StrictRJSFSchema = RJSFSchem
   if (Array.isArray(defaults)) {
     defaults = defaults.map((item, idx) => {
       const schemaItem: S = getInnerSchemaForArrayItem<S>(schema, AdditionalItemsHandling.Fallback, idx);
+      const itemFormData = Array.isArray(rawFormData) ? rawFormData[idx] : undefined;
       return computeDefaults<T, S, F>(validator, schemaItem, {
         rootSchema,
         _recurseList,
         experimental_defaultFormStateBehavior,
         experimental_customMergeAllOf,
         parentDefaults: item,
+        rawFormData: itemFormData,
         required,
         shouldMergeDefaultsIntoFormData,
         initialDefaultsGenerated,

package/src/schema/index.ts

@@ -8,6 +8,7 @@ import getFromSchema from './getFromSchema';
 import isFilesArray from './isFilesArray';
 import isMultiSelect from './isMultiSelect';
 import isSelect from './isSelect';
+import omitExtraData, { getUsedFormData, getFieldNames } from './omitExtraData';
 import retrieveSchema from './retrieveSchema';
 import sanitizeDataForNewSchema from './sanitizeDataForNewSchema';
 import toPathSchema from './toPathSchema';
@@ -17,12 +18,15 @@ export {
   findSelectedOptionInXxxOf,
   getDefaultFormState,
   getDisplayLabel,
+  getFieldNames, // Exported only to prevent breaking change in core
   getClosestMatchingOption,
   getFirstMatchingOption,
   getFromSchema,
+  getUsedFormData, // Exported only to prevent breaking change in core
   isFilesArray,
   isMultiSelect,
   isSelect,
+  omitExtraData,
   retrieveSchema,
   sanitizeDataForNewSchema,
   toPathSchema,

package/src/schema/omitExtraData.ts

@@ -0,0 +1,93 @@
+import pick from 'lodash/pick';
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
+
+import { NAME_KEY, RJSF_ADDITIONAL_PROPERTIES_FLAG } from '../constants';
+import { GenericObjectType, PathSchema, FormContextType, RJSFSchema, StrictRJSFSchema, ValidatorType } from '../types';
+import retrieveSchema from './retrieveSchema';
+import toPathSchema from './toPathSchema';
+
+/** Returns the `formData` with only the elements specified in the `fields` list
+ *
+ * @param formData - The data for the `Form`
+ * @param fields - The fields to keep while filtering
+ * @deprecated - To be removed as an exported `@rjsf/utils` function in a future release
+ */
+export function getUsedFormData<T = any>(formData: T | undefined, fields: string[]): T | undefined {
+  // For the case of a single input form
+  if (fields.length === 0 && typeof formData !== 'object') {
+    return formData;
+  }
+
+  const data: GenericObjectType = pick(formData, fields);
+  if (Array.isArray(formData)) {
+    return Object.keys(data).map((key: string) => data[key]) as unknown as T;
+  }
+
+  return data as T;
+}
+
+/** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
+ *
+ * @param pathSchema - The `PathSchema` object for the form
+ * @param [formData] - The form data to use while checking for empty objects/arrays
+ * @deprecated - To be removed as an exported `@rjsf/utils` function in a future release
+ */
+export function getFieldNames<T = any>(pathSchema: PathSchema<T>, formData?: T): string[][] {
+  const formValueHasData = (value: T, isLeaf: boolean) =>
+    typeof value !== 'object' || isEmpty(value) || (isLeaf && !isEmpty(value));
+  const getAllPaths = (_obj: GenericObjectType, acc: string[][] = [], paths: string[][] = [[]]) => {
+    const objKeys = Object.keys(_obj);
+    objKeys.forEach((key: string) => {
+      const data = _obj[key];
+      if (typeof data === 'object') {
+        const newPaths = paths.map((path) => [...path, key]);
+        // If an object is marked with additionalProperties, all its keys are valid
+        if (data[RJSF_ADDITIONAL_PROPERTIES_FLAG] && data[NAME_KEY] !== '') {
+          acc.push(data[NAME_KEY]);
+        } else {
+          getAllPaths(data, acc, newPaths);
+        }
+      } else if (key === NAME_KEY && data !== '') {
+        paths.forEach((path) => {
+          const formValue = get(formData, path);
+          const isLeaf = objKeys.length === 1;
+          // adds path to fieldNames if it points to a value or an empty object/array which is not a leaf
+          if (
+            formValueHasData(formValue, isLeaf) ||
+            (Array.isArray(formValue) && formValue.every((val) => formValueHasData(val, isLeaf)))
+          ) {
+            acc.push(path);
+          }
+        });
+      }
+    });
+    return acc;
+  };
+
+  return getAllPaths(pathSchema);
+}
+
+/** Takes a `schema` and `formData` and returns a copy of the formData with any fields not defined in the schema removed.
+ * This is useful for ensuring that only data that is relevant to the schema is preserved. Objects with
+ * `additionalProperties` keyword set to `true` will not have their extra fields removed.
+ *
+ * @param validator - An implementation of the `ValidatorType` interface that will be used when necessary
+ * @param schema - The schema to use for filtering the formData
+ * @param [rootSchema] - The root schema, used to primarily to look up `$ref`s
+ * @param [formData] - The data for the `Form`
+ * @returns The `formData` after omitting extra data
+ */
+export default function omitExtraData<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(validator: ValidatorType<T, S, F>, schema: S, rootSchema: S = {} as S, formData?: T): T | undefined {
+  const retrievedSchema = retrieveSchema(validator, schema, rootSchema, formData);
+  const pathSchema = toPathSchema(validator, retrievedSchema, '', rootSchema, formData);
+  const fieldNames = getFieldNames(pathSchema, formData);
+  const lodashFieldNames = fieldNames.map((fieldPaths: string[]) =>
+    Array.isArray(fieldPaths) ? fieldPaths.join('.') : fieldPaths,
+  );
+  return getUsedFormData(formData, lodashFieldNames);
+}

package/src/schema/toPathSchema.ts

@@ -6,6 +6,7 @@ import {
   ALL_OF_KEY,
   ANY_OF_KEY,
   DEPENDENCIES_KEY,
+  IF_KEY,
   ITEMS_KEY,
   NAME_KEY,
   ONE_OF_KEY,
@@ -48,7 +49,7 @@ function toPathSchemaInternal<T = any, S extends StrictRJSFSchema = RJSFSchema,
   _recurseList: S[] = [],
   experimental_customMergeAllOf?: Experimental_CustomMergeAllOf<S>,
 ): PathSchema<T> {
-  if (REF_KEY in schema || DEPENDENCIES_KEY in schema || ALL_OF_KEY in schema) {
+  if (REF_KEY in schema || DEPENDENCIES_KEY in schema || ALL_OF_KEY in schema || IF_KEY in schema) {
     const _schema = retrieveSchema<T, S, F>(validator, schema, rootSchema, formData, experimental_customMergeAllOf);
     const sameSchemaIndex = _recurseList.findIndex((item) => deepEquals(item, _schema));
     if (sameSchemaIndex === -1) {

package/src/types.ts

@@ -380,6 +380,8 @@ export type TemplatesType<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
     MoveUpButton: ComponentType<IconButtonProps<T, S, F>>;
     /** The template to use for the Remove button used for AdditionalProperties and Array items */
     RemoveButton: ComponentType<IconButtonProps<T, S, F>>;
+    /** The template to use for the Clear button used for input fields */
+    ClearButton: ComponentType<IconButtonProps<T, S, F>>;
   };
 } & {
   /** Allow this to support any named `ComponentType` or an object of named `ComponentType`s */
@@ -401,6 +403,9 @@ export type GlobalUISchemaOptions = GenericObjectType & {
   removable?: boolean;
   /** Field labels are rendered by default. Labels may be omitted by setting the `label` option to `false` */
   label?: boolean;
+  /** Flag, if set to `true`, will allow the text input fields to be cleared
+   */
+  allowClearTextInputs?: boolean;
   /** When using `additionalProperties`, key collision is prevented by appending a unique integer to the duplicate key.
    * This option allows you to change the separator between the original key name and the integer. Default is "-"
    */
@@ -524,6 +529,8 @@ export type FieldTemplateProps<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 > = RJSFBaseProps<T, S, F> & {
+  /** The FieldPathId containing the id and path for this field */
+  fieldPathId: FieldPathId;
   /** The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget */
   id: string;
   /** A string containing the base CSS classes, merged with any custom ones defined in your uiSchema */
@@ -1143,13 +1150,14 @@ export type UiSchema<
       | ((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`
+/** A `CustomValidator` function takes in a `formData`, `errors`, `uiSchema` and `errorSchema` objects and returns the given `errors`
  * object back, while potentially adding additional messages to the `errors`
  */
 export type CustomValidator<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = (
   formData: T | undefined,
   errors: FormValidation<T>,
   uiSchema?: UiSchema<T, S, F>,
+  errorSchema?: ErrorSchema<T>,
 ) => FormValidation<T>;
 
 /** An `ErrorTransformer` function will take in a list of `errors` & a `uiSchema` and potentially return a
@@ -1360,6 +1368,16 @@ export interface SchemaUtilsType<T = any, S extends StrictRJSFSchema = RJSFSchem
    * @returns - True if schema contains a select, otherwise false
    */
   isSelect(schema: S): boolean;
+  /**
+   * The function takes a `schema` and `formData` and returns a copy of the formData with any fields not defined in the schema removed.
+   * This is useful for ensuring that only data that is relevant to the schema is preserved. Objects with `additionalProperties`
+   * keyword set to `true` will not have their extra fields removed.
+   *
+   * @param schema - The schema to use for filtering the `formData`
+   * @param [formData] - The formData to filter
+   * @returns The new form data, with any fields not defined in the schema removed
+   */
+  omitExtraData(schema: S, formData?: T): T | undefined;
   /** Retrieves an expanded schema that has had all of its conditions, additional properties, references and
    * dependencies resolved and merged into the `schema` given a `rawFormData` that is used to do the potentially
    * recursive resolution.