@rjsf/core 6.7.1 → 6.10.0

package/src/components/fields/LayoutGridField.tsx

@@ -10,13 +10,19 @@ import type {
   UiSchema,
 } from '@rjsf/utils';
 import {
+  getByPath,
+  toPath,
   ANY_OF_KEY,
+  deepEquals,
   getDiscriminatorFieldFromSchema,
   getTemplate,
   getTestIds,
+  getPropertySchema,
   getUiOptions,
   hashObject,
   ID_KEY,
+  isObject,
+  isPlainObject,
   lookupFromFormContext,
   ONE_OF_KEY,
   PROPERTIES_KEY,
@@ -27,21 +33,6 @@ import {
   ITEMS_KEY,
   useDeepCompareMemo,
 } from '@rjsf/utils';
-import each from 'lodash/each';
-import flatten from 'lodash/flatten';
-import get from 'lodash/get';
-import has from 'lodash/has';
-import includes from 'lodash/includes';
-import intersection from 'lodash/intersection';
-import isEmpty from 'lodash/isEmpty';
-import isEqual from 'lodash/isEqual';
-import isFunction from 'lodash/isFunction';
-import isObject from 'lodash/isObject';
-import isPlainObject from 'lodash/isPlainObject';
-import isString from 'lodash/isString';
-import isUndefined from 'lodash/isUndefined';
-import last from 'lodash/last';
-import set from 'lodash/set';
 
 /** The enumeration of the three different Layout GridTemplate type values
  */
@@ -165,28 +156,29 @@ export function computeFieldUiSchema<T = any, S extends StrictRJSFSchema = RJSFS
   schemaReadonly?: boolean,
   forceReadonly?: boolean,
 ) {
-  const globalUiOptions = get(uiSchema, [UI_GLOBAL_OPTIONS_KEY], {});
-  const localUiSchema = get(uiSchema, field);
-  const localUiOptions = { ...get(localUiSchema, [UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
+  const globalUiOptions = uiSchema?.[UI_GLOBAL_OPTIONS_KEY] ?? {};
+  const localUiSchema = getByPath<UiSchema<T, S, F> | undefined>(uiSchema, toPath(field));
+  const localUiOptions = { ...(localUiSchema?.[UI_OPTIONS_KEY] ?? {}), ...uiProps, ...globalUiOptions };
   const fieldUiSchema = { ...localUiSchema };
-  if (!isEmpty(localUiOptions)) {
-    set(fieldUiSchema, [UI_OPTIONS_KEY], localUiOptions);
+  if (Object.keys(localUiOptions).length > 0) {
+    fieldUiSchema[UI_OPTIONS_KEY] = localUiOptions;
   }
-  if (!isEmpty(globalUiOptions)) {
+  if (Object.keys(globalUiOptions).length > 0) {
     // pass the global uiOptions down to the field uiSchema so that they can be applied to all nested fields
-    set(fieldUiSchema, [UI_GLOBAL_OPTIONS_KEY], globalUiOptions);
+    fieldUiSchema[UI_GLOBAL_OPTIONS_KEY] = globalUiOptions;
   }
   let { readonly: uiReadonly } = getUiOptions<T, S, F>(fieldUiSchema);
-  if (forceReadonly === true || (isUndefined(uiReadonly) && schemaReadonly === true)) {
+  if (forceReadonly === true || (uiReadonly === undefined && schemaReadonly === true)) {
     // If we are forcing all widgets to be readonly, OR the schema indicates it is readonly AND the uiSchema does not
     // have an overriding value, then update the uiSchema to set readonly to true. Doing this will
     uiReadonly = true;
-    if (has(localUiOptions, READONLY_KEY)) {
+    const fieldUiOptions = fieldUiSchema[UI_OPTIONS_KEY];
+    if (fieldUiOptions && READONLY_KEY in fieldUiOptions) {
       // If the local options has the key value provided in it, then set that one to true
-      set(fieldUiSchema, [UI_OPTIONS_KEY, READONLY_KEY], true);
+      fieldUiOptions[READONLY_KEY] = true;
     } else {
       // otherwise set the `ui:` version
-      set(fieldUiSchema, `ui:${READONLY_KEY}`, true);
+      fieldUiSchema[`ui:${READONLY_KEY}`] = true;
     }
   }
   return { fieldUiSchema, uiReadonly };
@@ -211,15 +203,15 @@ export function conditionMatches(
   datum?: unknown,
   value: unknown = '$0m3tH1nG Un3xP3cT3d',
 ): boolean {
-  const data = flatten([datum]).sort();
-  const values = flatten([value]).sort();
+  const data = [datum].flat().sort();
+  const values = [value].flat().sort();
   switch (operator) {
     case Operators.ALL:
-      return isEqual(data, values);
+      return deepEquals(data, values);
     case Operators.SOME:
-      return intersection(data, values).length > 0;
+      return data.some((entry) => values.includes(entry));
     case Operators.NONE:
-      return intersection(data, values).length === 0;
+      return !data.some((entry) => values.includes(entry));
     default:
       return false;
   }
@@ -284,12 +276,12 @@ export function computeArraySchemasIfPresent<S extends StrictRJSFSchema = RJSFSc
 } {
   let rawSchema: S | undefined;
   let resultPathId = fieldPathId;
-  if (isNumericIndex(potentialIndex) && schema && schema?.type === 'array' && has(schema, ITEMS_KEY)) {
+  if (isNumericIndex(potentialIndex) && schema && schema?.type === 'array' && ITEMS_KEY in schema) {
     const index = Number(potentialIndex);
     const items = schema[ITEMS_KEY];
     if (Array.isArray(items)) {
       if (index > items.length) {
-        rawSchema = last(items) as S;
+        rawSchema = items.at(-1) as S;
       } else {
         rawSchema = items[index] as S;
       }
@@ -347,20 +339,21 @@ export function getSchemaDetailsForField<
   parts.forEach((part) => {
     // dive into the properties of the current schema (when it exists) and get the schema for the next part
     fieldPathId = toFieldPathId(part, globalFormOptions, fieldPathId);
-    if (has(schema, PROPERTIES_KEY)) {
-      rawSchema = get(schema, [PROPERTIES_KEY, part], {}) as S;
-    } else if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
-      const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
+    const schemaProperties = schema?.[PROPERTIES_KEY];
+    if (schemaProperties) {
+      rawSchema = (schemaProperties[part] ?? {}) as S;
+    } else if (schema && (ONE_OF_KEY in schema || ANY_OF_KEY in schema)) {
+      const xxx = ONE_OF_KEY in schema ? ONE_OF_KEY : ANY_OF_KEY;
       // When the schema represents a oneOf/anyOf, find the selected schema for it and grab the inner part
       const selectedSchema = schemaUtils.findSelectedOptionInXxxOf(schema, part, xxx, innerData);
-      rawSchema = get(selectedSchema, [PROPERTIES_KEY, part], {}) as S;
+      rawSchema = getPropertySchema<S>(selectedSchema, part);
     } else {
       const result = computeArraySchemasIfPresent<S>(schema, fieldPathId, part);
       rawSchema = result.rawSchema ?? ({} as S);
       fieldPathId = result.fieldPathId;
     }
     // Now drill into the innerData for the part, returning an empty object by default if it doesn't exist
-    innerData = get(innerData, part, {}) as T;
+    innerData = getByPath<T>(innerData, part, {} as T);
     // Resolve any `$ref`s for the current rawSchema
     schema = schemaUtils.retrieveSchema(rawSchema, innerData);
     isReadonly = getNonNullishValue(schema.readOnly, isReadonly);
@@ -369,31 +362,31 @@ export function getSchemaDetailsForField<
   let optionsInfo: OneOfOptionsInfoType<S> | undefined;
   let isRequired = false;
   // retrieveSchema will return an empty schema in the worst case scenario, convert it to undefined
-  if (isEmpty(schema)) {
+  if (!schema || Object.keys(schema).length === 0) {
     schema = undefined;
   }
   if (schema && leafPath) {
     // When we have both a schema and a leafPath...
-    if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
-      const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
+    if (schema && (ONE_OF_KEY in schema || ANY_OF_KEY in schema)) {
+      const xxx = ONE_OF_KEY in schema ? ONE_OF_KEY : ANY_OF_KEY;
       // Grab the selected schema for the oneOf/anyOf value for the leafPath using the innerData
       schema = schemaUtils.findSelectedOptionInXxxOf(schema, leafPath, xxx, innerData);
     }
     fieldPathId = toFieldPathId(leafPath, globalFormOptions, fieldPathId);
-    isRequired = schema !== undefined && Array.isArray(schema.required) && includes(schema.required, leafPath);
+    isRequired = schema !== undefined && Array.isArray(schema.required) && schema.required.includes(leafPath);
     const result = computeArraySchemasIfPresent<S>(schema, fieldPathId, leafPath);
     if (result.rawSchema) {
       schema = result.rawSchema;
       fieldPathId = result.fieldPathId;
     } else {
       // Now grab the schema from the leafPath of the current schema properties
-      schema = get(schema, [PROPERTIES_KEY, leafPath]) as S | undefined;
+      schema = schema?.[PROPERTIES_KEY]?.[leafPath] as S | undefined;
       // Resolve any `$ref`s for the current schema
       schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
     }
     isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
-    if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
-      const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
+    if (schema && (ONE_OF_KEY in schema || ANY_OF_KEY in schema)) {
+      const xxx = ONE_OF_KEY in schema ? ONE_OF_KEY : ANY_OF_KEY;
       // Set the options if we have a schema with a oneOf/anyOf
       const discriminator = getDiscriminatorFieldFromSchema(schema);
       optionsInfo = { options: schema[xxx] as S[], hasDiscriminator: !!discriminator };
@@ -416,11 +409,11 @@ export function getCustomRenderComponent<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(render: string | RenderComponent, registry: Registry<T, S, F>): RenderComponent | null {
-  let customRenderer = render;
-  if (isString(customRenderer)) {
-    customRenderer = lookupFromFormContext<T, S, F>(registry, customRenderer);
+  let customRenderer: string | RenderComponent | undefined = render;
+  if (typeof customRenderer === 'string') {
+    customRenderer = lookupFromFormContext<T, S, F, string | RenderComponent | undefined>(registry, customRenderer);
   }
-  if (isFunction(customRenderer)) {
+  if (typeof customRenderer === 'function') {
     return customRenderer;
   }
   return null;
@@ -443,24 +436,22 @@ export function computeUIComponentPropsFromGridSchema<
   let UIComponent: RenderComponent | null = null;
   let uiProps: ConfigObject = {};
   let rendered: ReactNode | undefined;
-  if (isString(gridSchema) || isUndefined(gridSchema)) {
+  if (typeof gridSchema === 'string' || gridSchema === undefined) {
     name = gridSchema ?? '';
   } else {
     const { name: innerName = '', render, ...innerProps } = gridSchema;
     name = innerName;
     uiProps = innerProps;
-    if (!isEmpty(uiProps)) {
-      // Transform any `$lookup=` in the uiProps props with the appropriate value
-      each(uiProps, (prop: ConfigObject, key: string) => {
-        if (isString(prop)) {
-          const match: string[] | null = LOOKUP_REGEX.exec(prop);
-          if (Array.isArray(match) && match.length > 1) {
-            const lookupName = match[1];
-            uiProps[key] = lookupFromFormContext(registry, lookupName, lookupName);
-          }
+    // Transform any `$lookup=` in the uiProps props with the appropriate value
+    Object.entries(uiProps).forEach(([key, prop]) => {
+      if (typeof prop === 'string') {
+        const match: string[] | null = LOOKUP_REGEX.exec(prop);
+        if (Array.isArray(match) && match.length > 1) {
+          const lookupName = match[1];
+          uiProps[key] = lookupFromFormContext(registry, lookupName, lookupName);
         }
-      });
-    }
+      }
+    });
     UIComponent = getCustomRenderComponent<T, S, F>(render, registry);
     if (!innerName && UIComponent) {
       rendered = <UIComponent {...innerProps} data-testid={LAYOUT_GRID_FIELD_TEST_IDS.uiComponent} />;
@@ -533,7 +524,7 @@ function LayoutGridCondition<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   const { formData, registry } = layoutGridFieldProps;
   const { children, gridProps } = findChildrenAndProps<T, S, F>(layoutGridSchema, GridType.CONDITION, registry);
   const { operator, field = '', value } = gridProps;
-  const fieldData = get(formData, field, null);
+  const fieldData = getByPath(formData, toPath(field), null);
   if (conditionMatches(operator, fieldData, value)) {
     return <LayoutGridFieldChildren {...layoutGridFieldProps} childrenLayoutGridSchemaId={children} />;
   }
@@ -683,6 +674,7 @@ function LayoutGridFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSche
     // the `Form` via the prop passed to `LayoutGridField` we need to make sure the uiSchema always has a true value
     // when it is needed
     const { fieldUiSchema, uiReadonly } = computeFieldUiSchema<T, S, F>(name, uiProps, uiSchema, isReadonly, readonly);
+    const namePath = toPath(name);
 
     return (
       <Field
@@ -697,9 +689,9 @@ function LayoutGridFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSche
         readonly={uiReadonly}
         schema={schema}
         uiSchema={fieldUiSchema}
-        errorSchema={get(errorSchema, name)}
+        errorSchema={getByPath(errorSchema, namePath)}
         fieldPathId={memoFieldPathId}
-        formData={get(formData, name)}
+        formData={getByPath(formData, namePath)}
         onChange={onChange}
         onBlur={onBlur}
         onFocus={onFocus}

package/src/components/fields/LayoutMultiSchemaField.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import type {
   EnumOptionsType,
+  ErrorSchema,
   FieldProps,
   FormContextType,
   RJSFSchema,
@@ -9,6 +10,8 @@ import type {
   UiSchema,
 } from '@rjsf/utils';
 import {
+  getByPath,
+  setByPath,
   ANY_OF_KEY,
   CONST_KEY,
   DEFAULT_KEY,
@@ -20,15 +23,11 @@ import {
   optionsList,
   PROPERTIES_KEY,
   getTemplate,
+  getPropertySchema,
   getUiOptions,
   getWidget,
+  noop,
 } from '@rjsf/utils';
-import get from 'lodash/get';
-import has from 'lodash/has';
-import isEmpty from 'lodash/isEmpty';
-import noop from 'lodash/noop';
-import omit from 'lodash/omit';
-import set from 'lodash/set';
 
 /** Gets the selected option from the list of `options`, using the `selectorField` to search inside each `option` for
  * the `properties[selectorField].default(or const)` that matches the given `value`.
@@ -45,8 +44,8 @@ export function getSelectedOption<S extends StrictRJSFSchema = RJSFSchema>(
   const defaultValue = '!@#!@$@#$!@$#';
   const schemaOptions: S[] = options.map(({ schema }) => schema!);
   return schemaOptions.find((option) => {
-    const selector = get(option, [PROPERTIES_KEY, selectorField]);
-    const result = get(selector, DEFAULT_KEY, get(selector, CONST_KEY, defaultValue));
+    const selector = option[PROPERTIES_KEY]?.[selectorField];
+    const result = getByPath(selector, DEFAULT_KEY, getByPath(selector, CONST_KEY, defaultValue));
     return result === value;
   });
 }
@@ -70,9 +69,9 @@ export function computeEnumOptions<T = any, S extends StrictRJSFSchema = RJSFSch
 ): EnumOptionsType<S>[] {
   const realOptions = options.map((opt: S) => schemaUtils.retrieveSchema(opt, formData));
   let tempSchema = schema;
-  if (has(schema, ONE_OF_KEY)) {
+  if (ONE_OF_KEY in schema) {
     tempSchema = { ...schema, [ONE_OF_KEY]: realOptions };
-  } else if (has(schema, ANY_OF_KEY)) {
+  } else if (ANY_OF_KEY in schema) {
     tempSchema = { ...schema, [ANY_OF_KEY]: realOptions };
   }
   const enumOptions = optionsList<T, S, F>(tempSchema, uiSchema);
@@ -114,7 +113,7 @@ export default function LayoutMultiSchemaField<
   } = props;
   const { widgets, schemaUtils, globalUiOptions } = registry;
   const [enumOptions, setEnumOptions] = useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
-  const id = get(fieldPathId, ID_KEY);
+  const id = fieldPathId[ID_KEY];
   const discriminator = getDiscriminatorFieldFromSchema(schema);
   const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, options);
   const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, options);
@@ -139,8 +138,8 @@ export default function LayoutMultiSchemaField<
   if (!selectorField) {
     throw new Error('No selector field provided for the LayoutMultiSchemaField');
   }
-  const selectedOption = get(formData, selectorField);
-  let optionSchema: S = get(enumOptions[0]?.schema, [PROPERTIES_KEY, selectorField], {}) as S;
+  const selectedOption = getByPath(formData, selectorField);
+  let optionSchema = getPropertySchema<S>(enumOptions[0]?.schema, selectorField);
   const option = getSelectedOption<S>(enumOptions, selectorField, selectedOption);
   // If the subschema doesn't declare a type, infer the type from the parent schema
   optionSchema = optionSchema?.type ? optionSchema : ({ ...optionSchema, type: option?.type || baseType } as S);
@@ -150,8 +149,9 @@ export default function LayoutMultiSchemaField<
   // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
   const hideFieldError = uiSchemaHideError === undefined ? hideError : Boolean(uiSchemaHideError);
 
-  const rawErrors = get(errorSchema, [ERRORS_KEY], []) as string[];
-  const fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
+  const rawErrors = errorSchema?.[ERRORS_KEY] ?? [];
+  const fieldErrorSchema = { ...errorSchema } as ErrorSchema<T>;
+  delete fieldErrorSchema[ERRORS_KEY];
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
 
   /** Callback function that updates the selected option and adjusts the form data based on the structure of the new
@@ -173,7 +173,7 @@ export default function LayoutMultiSchemaField<
       newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren') as T;
     }
     if (newFormData) {
-      set(newFormData, selectorField, opt);
+      setByPath(newFormData, selectorField, opt);
     }
     // Pass the component name in the path
     onChange(newFormData, fieldPathId.path, undefined, id);
@@ -192,7 +192,7 @@ export default function LayoutMultiSchemaField<
       id={id}
       schema={schema}
       label={(title || schema.title) ?? ''}
-      disabled={disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions))}
+      disabled={disabled || (Array.isArray(enumOptions) && enumOptions.length === 0)}
       uiSchema={uiSchema}
       required={required}
       readonly={!!readonly}
@@ -209,7 +209,7 @@ export default function LayoutMultiSchemaField<
         name={name}
         schema={schema}
         label={(title || schema.title) ?? ''}
-        disabled={disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions))}
+        disabled={disabled || (Array.isArray(enumOptions) && enumOptions.length === 0)}
         uiSchema={uiSchema}
         autofocus={autofocus}
         readonly={readonly}

package/src/components/fields/MultiSchemaField.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema, UiSchema } from '@rjsf/utils';
+import type { ErrorSchema, FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema, UiSchema } from '@rjsf/utils';
 import {
   ANY_OF_KEY,
   deepEquals,
@@ -15,9 +15,6 @@ import {
   shouldRenderOptionalField,
   TranslatableString,
 } from '@rjsf/utils';
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import omit from 'lodash/omit';
 
 /** The `AnyOfField` component is used to render a field in the schema that is an `anyOf`, `allOf` or `oneOf`. It tracks
  * the currently selected option and cleans up any irrelevant data in `formData`.
@@ -30,7 +27,7 @@ function AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   const {
     name,
     disabled = false,
-    errorSchema = {},
+    errorSchema,
     formData,
     fieldPathId,
     onBlur,
@@ -152,8 +149,9 @@ function AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
     ...uiOptions
   } = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
   const Widget = getWidget<T, S, F>({ type: 'number' }, widget, widgets);
-  const rawErrors = get(errorSchema, ERRORS_KEY, []);
-  const fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
+  const rawErrors = errorSchema?.[ERRORS_KEY] ?? [];
+  const fieldErrorSchema = { ...errorSchema } as ErrorSchema<T>;
+  delete fieldErrorSchema[ERRORS_KEY];
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
 
   const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
@@ -221,7 +219,7 @@ function AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
         onChange={onOptionChange}
         onBlur={onBlur}
         onFocus={onFocus}
-        disabled={disabled || isEmpty(enumOptions)}
+        disabled={disabled || enumOptions.length === 0}
         multiple={false}
         rawErrors={rawErrors}
         errorSchema={fieldErrorSchema}

package/src/components/fields/ObjectField.tsx

@@ -13,9 +13,14 @@ import type {
   StrictRJSFSchema,
 } from '@rjsf/utils';
 import {
+  getByPath,
+  hasByPath,
+  setByPath,
   ADDITIONAL_PROPERTY_FLAG,
   ANY_OF_KEY,
+  deepEquals,
   getTemplate,
+  getPropertySchema,
   getUiOptions,
   isFormDataAvailable,
   orderProperties,
@@ -23,17 +28,13 @@ import {
   toFieldPathId,
   useDeepCompareMemo,
   ONE_OF_KEY,
-  PROPERTIES_KEY,
   REF_KEY,
+  isObject,
   TranslatableString,
 } from '@rjsf/utils';
-import get from 'lodash/get';
-import has from 'lodash/has';
-import isObject from 'lodash/isObject';
-import set from 'lodash/set';
 import { Markdown } from 'markdown-to-jsx/react';
 
-import { ADDITIONAL_PROPERTY_KEY_REMOVE } from '../constants';
+import { ADDITIONAL_PROPERTY_KEY_REMOVE } from '../constants.ts';
 
 /** Returns a flag indicating whether the `name` field is required in the object schema
  *
@@ -129,27 +130,27 @@ function ObjectFieldPropertyFn<T = any, S extends StrictRJSFSchema = RJSFSchema,
     toFieldPathId(propertyName, globalFormOptions, fieldPathId.path),
   );
 
-  /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
-   * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
-   * formData.
-   *
-   * @param name - The name of the property
-   * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
-   * @returns - The onPropertyChange callback for the `name` property
+  /** The `onChange` handler installed on this property's `SchemaField`. Handles the special case where the user
+   * clears a value at this property's own path when it was added as an additional property, coercing `undefined`
+   * to the empty string so the property's key input survives. Every other change, including any change to a
+   * descendant of this property, is forwarded to `onChange()` untouched.
    */
   const onPropertyChange = useCallback(
     (value: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
-      // Don't set value = undefined for fields added by additionalProperties. Doing so removes them from the
-      // formData, which causes them to completely disappear (including the input field for the property name). Unlike
-      // fields which are "mandated" by the schema, these fields can be set to undefined by clicking a "delete field"
-      // button, so set empty values to the empty string.
+      // An `additionalProperties` value lives at this property's own path, so clearing its widget to `undefined`
+      // would drop the key from the formData and take the key input with it. Coerce that one case to the empty
+      // string.
+      // A descendant's path is this property's path plus at least one segment, so comparing to this
+      // property's own path (rather than merely its length) tells apart "this property changed" from "a
+      // descendant changed"; a cleared descendant must stay `undefined` so it is omitted from the formData
+      // exactly like a cleared property declared in `properties` (#5222).
       let normalizedValue = value;
-      if (value === undefined && addedByAdditionalProperties) {
+      if (value === undefined && addedByAdditionalProperties && deepEquals(path, innerFieldIdPathId.path)) {
         normalizedValue = '' as unknown as T;
       }
       onChange(normalizedValue, path, newErrorSchema, id);
     },
-    [onChange, addedByAdditionalProperties],
+    [onChange, addedByAdditionalProperties, innerFieldIdPathId],
   );
 
   /** The key change event handler; Called when the key associated with a field is changed for an additionalProperty.
@@ -275,7 +276,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
 
       let index = 0;
       let newKey = preferredKey;
-      while (has(existingFormData, newKey)) {
+      while (hasByPath(existingFormData, newKey)) {
         index += 1;
         newKey = `${preferredKey}${duplicateKeySuffixSeparator}${index}`;
       }
@@ -294,8 +295,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     const newFormData = { ...formData } as T;
     const newKey = getAvailableKey('newKey', newFormData);
     if (schema.patternProperties) {
-      // Cast this to make the `set` work properly
-      set(newFormData as GenericObjectType, newKey, null);
+      setByPath(newFormData, newKey, null);
     } else {
       let type: RJSFSchema['type'] = undefined;
       let constValue: RJSFSchema['const'] = undefined;
@@ -317,8 +317,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
       }
 
       const newValue = constValue ?? defaultValue ?? getDefaultValue<T, S, F>(translateString, type);
-      // Cast this to make the `set` work properly
-      set(newFormData as GenericObjectType, newKey, newValue);
+      setByPath(newFormData, newKey, newValue);
     }
 
     if (lastRenamedProperty.current.previousKey === newKey) {
@@ -426,11 +425,11 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
           key={getStableKey(propertyName)}
           propertyName={propertyName}
           required={isRequired<S>(schema, propertyName)}
-          schema={get(schema, [PROPERTIES_KEY, propertyName], {}) as S}
+          schema={getPropertySchema<S>(schema, propertyName)}
           uiSchema={fieldUiSchema}
-          errorSchema={get(errorSchema, [propertyName])}
+          errorSchema={getByPath(errorSchema, propertyName)}
           fieldPathId={childFieldPathId}
-          formData={get(formData, [propertyName])}
+          formData={getByPath(formData, propertyName)}
           handleKeyRename={handleKeyRename}
           handleRemoveProperty={handleRemoveProperty}
           addedByAdditionalProperties={addedByAdditionalProperties}

package/src/components/fields/SchemaField.tsx

@@ -30,11 +30,10 @@ import {
   shallowEquals,
   shouldRenderOptionalField,
   toFieldPathId,
+  isObject,
   TranslatableString,
   UI_OPTIONS_KEY,
 } from '@rjsf/utils';
-import isObject from 'lodash/isObject';
-import omit from 'lodash/omit';
 
 /** The map of component type to FieldName */
 const COMPONENT_TYPES: Record<string, string> = {
@@ -202,9 +201,19 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
 
   const { __errors, ...fieldErrorSchema } = errorSchema || {};
   // See #439: uiSchema: Don't pass consumed class names or style to child components
-  const fieldUiSchema = omit(uiSchema, ['ui:classNames', 'classNames', 'ui:style']);
+  const {
+    'ui:classNames': consumedUiClassNames,
+    classNames: consumedClassNames,
+    'ui:style': consumedUiStyle,
+    ...fieldUiSchema
+  } = uiSchema;
   if (UI_OPTIONS_KEY in fieldUiSchema) {
-    fieldUiSchema[UI_OPTIONS_KEY] = omit(fieldUiSchema[UI_OPTIONS_KEY], ['classNames', 'style']);
+    const {
+      classNames: consumedOptionClassNames,
+      style: consumedOptionStyle,
+      ...fieldUiOptions
+    } = fieldUiSchema[UI_OPTIONS_KEY]!;
+    fieldUiSchema[UI_OPTIONS_KEY] = fieldUiOptions;
   }
 
   const field = (

package/src/components/fields/index.ts

@@ -1,19 +1,19 @@
 import type { Field, FormContextType, RegistryFieldsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
-import ArrayField from './ArrayField';
-import BooleanField from './BooleanField';
-import CyclicSchemaField from './CyclicSchemaField';
-import FallbackField from './FallbackField';
-import LayoutGridField from './LayoutGridField';
-import LayoutHeaderField from './LayoutHeaderField';
-import LayoutMultiSchemaField from './LayoutMultiSchemaField';
-import MultiSchemaField from './MultiSchemaField';
-import NullField from './NullField';
-import NumberField from './NumberField';
-import ObjectField from './ObjectField';
-import OptionalDataControlsField from './OptionalDataControlsField';
-import SchemaField from './SchemaField';
-import StringField from './StringField';
+import ArrayField from './ArrayField.tsx';
+import BooleanField from './BooleanField.tsx';
+import CyclicSchemaField from './CyclicSchemaField.tsx';
+import FallbackField from './FallbackField.tsx';
+import LayoutGridField from './LayoutGridField.tsx';
+import LayoutHeaderField from './LayoutHeaderField.tsx';
+import LayoutMultiSchemaField from './LayoutMultiSchemaField.tsx';
+import MultiSchemaField from './MultiSchemaField.tsx';
+import NullField from './NullField.tsx';
+import NumberField from './NumberField.tsx';
+import ObjectField from './ObjectField.tsx';
+import OptionalDataControlsField from './OptionalDataControlsField.tsx';
+import SchemaField from './SchemaField.tsx';
+import StringField from './StringField.tsx';
 
 function fields<
   T = any,

package/src/components/templates/BaseInputTemplate.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import type { BaseInputTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import { ariaDescribedByIds, examplesId, getInputProps } from '@rjsf/utils';
 
-import SchemaExamples from '../SchemaExamples';
+import SchemaExamples from '../SchemaExamples.tsx';
 
 /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
  * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
@@ -73,7 +73,7 @@ export default function BaseInputTemplate<
     (e: MouseEvent) => {
       e.preventDefault();
       e.stopPropagation();
-      onChange(options.emptyValue ?? '');
+      onChange(options.emptyValue);
     },
     [onChange, options.emptyValue],
   );

package/src/components/templates/ButtonTemplates/AddButton.tsx

@@ -1,7 +1,7 @@
 import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import { TranslatableString } from '@rjsf/utils';
 
-import IconButton from './IconButton';
+import IconButton from './IconButton.tsx';
 
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */