@rjsf/core 6.0.1 → 6.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/core",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "compileReplacer": "tsc -p tsconfig.replacer.json && move-file lodashReplacer.js lodashReplacer.cjs",
@@ -88,7 +88,7 @@
     "eslint": "^8.57.1",
     "html": "^1.0.0",
     "jsdom": "^27.0.1",
-    "mocha": "^10.8.2",
+    "mocha": "^11.7.4",
     "react-portal": "^4.3.0",
     "sinon": "^9.2.4"
   },

package/src/components/Form.tsx

@@ -51,11 +51,10 @@ import _isEmpty from 'lodash/isEmpty';
 import _pick from 'lodash/pick';
 import _set from 'lodash/set';
 import _toPath from 'lodash/toPath';
+import _unset from 'lodash/unset';
 
 import getDefaultRegistry from '../getDefaultRegistry';
-
-/** Internal only symbol used by the `reset()` function to indicate that a reset operation is happening */
-const IS_RESET = Symbol('reset');
+import { ADDITIONAL_PROPERTY_KEY_REMOVE, IS_RESET } from './constants';
 
 /** The properties that are passed to the `Form` */
 export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
@@ -875,7 +874,10 @@ export default class Form<
     let retrievedSchema = this.state.retrievedSchema;
     let formData = isRootPath ? newValue : _cloneDeep(oldFormData);
     if (isObject(formData) || Array.isArray(formData)) {
-      if (!isRootPath) {
+      if (newValue === ADDITIONAL_PROPERTY_KEY_REMOVE) {
+        // For additional properties, we were given the special remove this key value, so unset it
+        _unset(formData, path);
+      } else if (!isRootPath) {
         // If the newValue is not on the root path, then set it into the form data
         _set(formData, path, newValue);
       }

package/src/components/constants.ts

@@ -0,0 +1,5 @@
+/** Internal only symbol used by `Form` & `ObjectField` to mark an additional property element to be removed */
+export const ADDITIONAL_PROPERTY_KEY_REMOVE = Symbol('remove-this-key');
+
+/** Internal only symbol used by the `reset()` function to indicate that a reset operation is happening */
+export const IS_RESET = Symbol('reset');

package/src/components/fields/ArrayField.tsx

@@ -153,9 +153,12 @@ function getNewFormDataRow<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   registry: Registry<T[], S, F>,
   schema: S,
 ): T {
-  const { schemaUtils } = registry;
+  const { schemaUtils, globalFormOptions } = registry;
   let itemSchema = schema.items as S;
-  if (isFixedItems(schema) && allowAdditionalItems(schema)) {
+  if (globalFormOptions.useFallbackUiForUnsupportedType && !itemSchema) {
+    // If we don't have itemSchema and useFallbackUiForUnsupportedType is on, use an empty schema
+    itemSchema = {} as S;
+  } else if (isFixedItems(schema) && allowAdditionalItems(schema)) {
     itemSchema = schema.additionalItems as S;
   }
   // Cast this as a T to work around schema utils being for T[] caused by the FieldProps<T[], S, F> call on the class
@@ -840,7 +843,7 @@ export default function ArrayField<T = any, S extends StrictRJSFSchema = RJSFSch
   props: FieldProps<T[], S, F>,
 ) {
   const { schema, uiSchema, errorSchema, fieldPathId, registry, formData, onChange } = props;
-  const { schemaUtils, translateString } = registry;
+  const { globalFormOptions, schemaUtils, translateString } = registry;
   const { keyedFormData, updateKeyedFormData } = useKeyedFormData<T>(formData);
   // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
   const childFieldPathId = props.childFieldPathId ?? fieldPathId;
@@ -1027,24 +1030,14 @@ export default function ArrayField<T = any, S extends StrictRJSFSchema = RJSFSch
     [onChange, childFieldPathId],
   );
 
-  if (!(ITEMS_KEY in schema)) {
-    const uiOptions = getUiOptions<T[], S, F>(uiSchema);
-    const UnsupportedFieldTemplate = getTemplate<'UnsupportedFieldTemplate', T[], S, F>(
-      'UnsupportedFieldTemplate',
-      registry,
-      uiOptions,
-    );
-
-    return (
-      <UnsupportedFieldTemplate
-        schema={schema}
-        fieldPathId={fieldPathId}
-        reason={translateString(TranslatableString.MissingItems)}
-        registry={registry}
-      />
-    );
-  }
-  const arrayProps = {
+  const arrayAsMultiProps: ArrayAsFieldProps<T[], S, F> = {
+    ...props,
+    formData,
+    fieldPathId: childFieldPathId,
+    onSelectChange: onSelectChange,
+  };
+  const arrayProps: InternalArrayFieldProps<T, S, F> = {
+    ...props,
     handleAddItem,
     handleCopyItem,
     handleRemoveItem,
@@ -1052,18 +1045,41 @@ export default function ArrayField<T = any, S extends StrictRJSFSchema = RJSFSch
     keyedFormData,
     onChange: handleChange,
   };
-  if (schemaUtils.isMultiSelect(schema)) {
+  if (!(ITEMS_KEY in schema)) {
+    if (!globalFormOptions.useFallbackUiForUnsupportedType) {
+      const uiOptions = getUiOptions<T[], S, F>(uiSchema);
+      const UnsupportedFieldTemplate = getTemplate<'UnsupportedFieldTemplate', T[], S, F>(
+        'UnsupportedFieldTemplate',
+        registry,
+        uiOptions,
+      );
+
+      return (
+        <UnsupportedFieldTemplate
+          schema={schema}
+          fieldPathId={fieldPathId}
+          reason={translateString(TranslatableString.MissingItems)}
+          registry={registry}
+        />
+      );
+    }
+    // Add an items schema with type as undefined so it triggers FallbackField later on
+    const fallbackSchema = { ...schema, [ITEMS_KEY]: { type: undefined } };
+    arrayAsMultiProps.schema = fallbackSchema;
+    arrayProps.schema = fallbackSchema;
+  }
+  if (schemaUtils.isMultiSelect(arrayAsMultiProps.schema)) {
     // If array has enum or uniqueItems set to true, call renderMultiSelect() to render the default multiselect widget or a custom widget, if specified.
-    return <ArrayAsMultiSelect<T, S, F> {...props} fieldPathId={childFieldPathId} onSelectChange={onSelectChange} />;
+    return <ArrayAsMultiSelect<T, S, F> {...arrayAsMultiProps} />;
   }
   if (isCustomWidget<T[], S, F>(uiSchema)) {
-    return <ArrayAsCustomWidget<T, S, F> {...props} fieldPathId={childFieldPathId} onSelectChange={onSelectChange} />;
+    return <ArrayAsCustomWidget<T, S, F> {...arrayAsMultiProps} />;
   }
-  if (isFixedItems(schema)) {
-    return <FixedArray<T, S, F> {...props} {...arrayProps} />;
+  if (isFixedItems(arrayAsMultiProps.schema)) {
+    return <FixedArray<T, S, F> {...arrayProps} />;
   }
-  if (schemaUtils.isFilesArray(schema, uiSchema)) {
-    return <ArrayAsFiles {...props} fieldPathId={childFieldPathId} onSelectChange={onSelectChange} />;
+  if (schemaUtils.isFilesArray(arrayAsMultiProps.schema, uiSchema)) {
+    return <ArrayAsFiles<T, S, F> {...arrayAsMultiProps} />;
   }
-  return <NormalArray<T, S, F> {...props} {...arrayProps} />;
+  return <NormalArray<T, S, F> {...arrayProps} />;
 }

package/src/components/fields/FallbackField.tsx

@@ -21,7 +21,7 @@ import { JSONSchema7TypeName } from 'json-schema';
 function getFallbackTypeSelectionSchema(title: string): RJSFSchema {
   return {
     type: 'string',
-    enum: ['string', 'number', 'boolean'],
+    enum: ['string', 'number', 'boolean', 'object', 'array'],
     default: 'string',
     title: title,
   };
@@ -36,6 +36,9 @@ function getTypeOfFormData(formData: any): JSONSchema7TypeName {
   if (dataType === 'string' || dataType === 'number' || dataType === 'boolean') {
     return dataType;
   }
+  if (dataType === 'object') {
+    return Array.isArray(formData) ? 'array' : 'object';
+  }
   // Treat everything else as a string
   return 'string';
 }
@@ -106,20 +109,14 @@ export default function FallbackField<
   };
 
   if (!globalFormOptions.useFallbackUiForUnsupportedType) {
+    const { reason = translateString(TranslatableString.UnknownFieldType, [String(schema.type)]) } = props;
     const UnsupportedFieldTemplate = getTemplate<'UnsupportedFieldTemplate', T, S, F>(
       'UnsupportedFieldTemplate',
       registry,
       uiOptions,
     );
 
-    return (
-      <UnsupportedFieldTemplate
-        schema={schema}
-        fieldPathId={fieldPathId}
-        reason={translateString(TranslatableString.UnknownFieldType, [String(schema.type)])}
-        registry={registry}
-      />
-    );
+    return <UnsupportedFieldTemplate schema={schema} fieldPathId={fieldPathId} reason={reason} registry={registry} />;
   }
 
   const FallbackFieldTemplate = getTemplate<'FallbackFieldTemplate', T, S, F>(
@@ -151,7 +148,18 @@ export default function FallbackField<
           required={required}
         />
       }
-      schemaField={<SchemaField {...props} schema={{ type, title: translateString(TranslatableString.Value) } as S} />}
+      schemaField={
+        <SchemaField
+          {...props}
+          schema={
+            {
+              type,
+              title: translateString(TranslatableString.Value),
+              ...(type === 'object' && { additionalProperties: true }),
+            } as S
+          }
+        />
+      }
     />
   );
 }

package/src/components/fields/ObjectField.tsx

@@ -4,7 +4,6 @@ import {
   ANY_OF_KEY,
   getTemplate,
   getUiOptions,
-  hashObject,
   isFormDataAvailable,
   orderProperties,
   shouldRenderOptionalField,
@@ -29,7 +28,8 @@ import get from 'lodash/get';
 import has from 'lodash/has';
 import isObject from 'lodash/isObject';
 import set from 'lodash/set';
-import unset from 'lodash/unset';
+
+import { ADDITIONAL_PROPERTY_KEY_REMOVE } from '../constants';
 
 /** Returns a flag indicating whether the `name` field is required in the object schema
  *
@@ -220,7 +220,6 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
   const schema: S = schemaUtils.retrieveSchema(rawSchema, formData, true);
   const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
   const { properties: schemaProperties = {} } = schema;
-  const formDataHash = hashObject(formData || {});
   // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
   const childFieldPathId = props.childFieldPathId ?? fieldPathId;
 
@@ -320,15 +319,14 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     [formData, onChange, childFieldPathId, getAvailableKey],
   );
 
-  /** Handles the remove click which removes the old `key` data and calls the `onChange` callback with it
+  /** Handles the remove click which calls the `onChange` callback with the special ADDITIONAL_PROPERTY_FIELD_REMOVE
+   * value for the path plus the key to be removed
    */
   const handleRemoveProperty = useCallback(
     (key: string) => {
-      const copiedFormData = { ...formData } as T;
-      unset(copiedFormData, key);
-      onChange(copiedFormData, childFieldPathId.path);
+      onChange(ADDITIONAL_PROPERTY_KEY_REMOVE as T, [...childFieldPathId.path, key]);
     },
-    [onChange, childFieldPathId, formData],
+    [onChange, childFieldPathId],
   );
 
   if (!renderOptionalField || hasFormData) {
@@ -364,10 +362,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
       const hidden = getUiOptions<T, S, F>(fieldUiSchema).widget === 'hidden';
       const content = (
         <ObjectFieldProperty<T, S, F>
-          // For regular properties, the key is just the name. For additionalProperties, the key is a combination of the
-          // name and the hash of the formData so that react rerenders the components with the updated additional
-          // property related callback which will change due to formData changes
-          key={addedByAdditionalProperties ? `${name}-${formDataHash}` : name}
+          key={name}
           propertyName={name}
           required={isRequired<S>(schema, name)}
           schema={get(schema, [PROPERTIES_KEY, name], {}) as S}

package/src/components/templates/FieldTemplate/FieldTemplate.tsx

@@ -29,9 +29,10 @@ export default function FieldTemplate<
   if (hidden) {
     return <div className='hidden'>{children}</div>;
   }
+  const isCheckbox = uiOptions.widget === 'checkbox';
   return (
     <WrapIfAdditionalTemplate {...props}>
-      {displayLabel && <Label label={label} required={required} id={id} />}
+      {displayLabel && !isCheckbox && <Label label={label} required={required} id={id} />}
       {displayLabel && description ? description : null}
       {children}
       {errors}

package/src/components/widgets/CheckboxWidget.tsx

@@ -9,6 +9,7 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
+  getUiOptions,
 } from '@rjsf/utils';
 
 /** The `CheckBoxWidget` is a widget for rendering boolean properties.
@@ -57,8 +58,10 @@ function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
     (event: FocusEvent<HTMLInputElement>) => onFocus(id, event.target.checked),
     [onFocus, id],
   );
-  const description = options.description ?? schema.description;
 
+  const uiOptions = getUiOptions(uiSchema);
+  const isCheckboxWidget = uiOptions.widget === 'checkbox';
+  const description = isCheckboxWidget ? undefined : (options.description ?? schema.description);
   return (
     <div className={`checkbox ${disabled || readonly ? 'disabled' : ''}`}>
       {!hideLabel && description && (