@rjsf/core 6.0.0-beta.2 → 6.0.0-beta.21

package/src/components/fields/ArrayField.tsx

@@ -6,12 +6,16 @@ import {
   isFixedItems,
   allowAdditionalItems,
   isCustomWidget,
+  isFormDataAvailable,
   optionsList,
+  shouldRenderOptionalField,
+  toFieldPathId,
   ArrayFieldTemplateProps,
   ErrorSchema,
+  FieldPathId,
+  FieldPathList,
   FieldProps,
   FormContextType,
-  IdSchema,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
@@ -22,7 +26,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import isObject from 'lodash/isObject';
 import set from 'lodash/set';
-import { nanoid } from 'nanoid';
+import uniqueId from 'lodash/uniqueId';
 
 /** Type used to represent the keyed form data used in the state */
 type KeyedFormDataType<T> = { key: string; item: T };
@@ -37,7 +41,7 @@ type ArrayFieldState<T> = {
 
 /** Used to generate a unique ID for an element in a row */
 function generateRowId() {
-  return nanoid();
+  return uniqueId('rjsf-array-item-');
 }
 
 /** Converts the `formData` into `KeyedFormDataType` data, using the `generateRowId()` function to create the key
@@ -45,7 +49,7 @@ function generateRowId() {
  * @param formData - The data for the form
  * @returns - The `formData` converted into a `KeyedFormDataType` element
  */
-function generateKeyedFormData<T>(formData: T[]): KeyedFormDataType<T>[] {
+function generateKeyedFormData<T>(formData?: T[]): KeyedFormDataType<T>[] {
   return !Array.isArray(formData)
     ? []
     : formData.map((item) => {
@@ -81,7 +85,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
    */
   constructor(props: FieldProps<T[], S, F>) {
     super(props);
-    const { formData = [] } = props;
+    const { formData } = props;
     const keyedFormData = generateKeyedFormData<T>(formData);
     this.state = {
       keyedFormData,
@@ -198,7 +202,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       event.preventDefault();
     }
 
-    const { onChange, errorSchema } = this.props;
+    const { onChange, errorSchema, fieldPathId } = this.props;
     const { keyedFormData } = this.state;
     // refs #195: revalidate to ensure properly reindexing errors
     let newErrorSchema: ErrorSchema<T>;
@@ -229,7 +233,8 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         keyedFormData: newKeyedFormData,
         updatedKeyedFormData: true,
       },
-      () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
+      // add click will pass the empty `path` array to the onChange which adds the appropriate path
+      () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema as ErrorSchema<T[]>),
     );
   }
 
@@ -267,7 +272,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         event.preventDefault();
       }
 
-      const { onChange, errorSchema } = this.props;
+      const { onChange, errorSchema, fieldPathId } = this.props;
       const { keyedFormData } = this.state;
       // refs #195: revalidate to ensure properly reindexing errors
       let newErrorSchema: ErrorSchema<T>;
@@ -298,7 +303,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true,
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
+        () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema as ErrorSchema<T[]>),
       );
     };
   };
@@ -314,7 +319,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       if (event) {
         event.preventDefault();
       }
-      const { onChange, errorSchema } = this.props;
+      const { onChange, errorSchema, fieldPathId } = this.props;
       const { keyedFormData } = this.state;
       // refs #195: revalidate to ensure properly reindexing errors
       let newErrorSchema: ErrorSchema<T>;
@@ -335,7 +340,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true,
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
+        () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema as ErrorSchema<T[]>),
       );
     };
   };
@@ -353,7 +358,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         event.preventDefault();
         event.currentTarget.blur();
       }
-      const { onChange, errorSchema } = this.props;
+      const { onChange, errorSchema, fieldPathId } = this.props;
       let newErrorSchema: ErrorSchema<T>;
       if (errorSchema) {
         newErrorSchema = {};
@@ -385,7 +390,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         {
           keyedFormData: newKeyedFormData,
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema as ErrorSchema<T[]>),
+        () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema as ErrorSchema<T[]>),
       );
     };
   };
@@ -396,22 +401,14 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
    * @param index - The index of the item being changed
    */
   onChangeForIndex = (index: number) => {
-    return (value: any, newErrorSchema?: ErrorSchema<T>, id?: string) => {
-      const { formData, onChange, errorSchema } = this.props;
-      const arrayData = Array.isArray(formData) ? formData : [];
-      const newFormData = arrayData.map((item: T, i: number) => {
+    return (value: any, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
+      const { onChange } = this.props;
+      onChange(
         // We need to treat undefined items as nulls to have validation.
         // See https://github.com/tdegrunt/jsonschema/issues/206
-        const jsonValue = typeof value === 'undefined' ? null : value;
-        return index === i ? jsonValue : item;
-      });
-      onChange(
-        newFormData,
-        errorSchema &&
-          errorSchema && {
-            ...errorSchema,
-            [index]: newErrorSchema,
-          },
+        value === undefined ? null : value,
+        path,
+        newErrorSchema as ErrorSchema<T[]>,
         id,
       );
     };
@@ -419,14 +416,48 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
 
   /** Callback handler used to change the value for a checkbox */
   onSelectChange = (value: any) => {
-    const { onChange, idSchema } = this.props;
-    onChange(value, undefined, idSchema && idSchema.$id);
+    const { onChange, fieldPathId } = this.props;
+    // select change will pass an empty `path` array since the `ObjectField` will add the path value automatically
+    onChange(value, fieldPathId.path, undefined, fieldPathId && fieldPathId.$id);
   };
 
+  /** Helper method to compute item UI schema for both normal and fixed arrays
+   * Handles both static object and dynamic function cases
+   *
+   * @param uiSchema - The parent UI schema containing items definition
+   * @param item - The item data
+   * @param index - The index of the item
+   * @param formContext - The form context
+   * @returns The computed UI schema for the item
+   */
+  private computeItemUiSchema(
+    uiSchema: UiSchema<T[], S, F>,
+    item: T,
+    index: number,
+    formContext: F,
+  ): UiSchema<T[], S, F> | undefined {
+    if (typeof uiSchema.items === 'function') {
+      try {
+        // Call the function with item data, index, and form context
+        // TypeScript now correctly infers the types thanks to the ArrayElement type in UiSchema
+        const result = uiSchema.items(item, index, formContext);
+        // Only use the result if it's truthy
+        return result as UiSchema<T[], S, F>;
+      } catch (e) {
+        console.error(`Error executing dynamic uiSchema.items function for item at index ${index}:`, e);
+        // Fall back to undefined to allow the field to still render
+        return undefined;
+      }
+    } else {
+      // Static object case - preserve undefined to maintain backward compatibility
+      return uiSchema.items as UiSchema<T[], S, F> | undefined;
+    }
+  }
+
   /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
    */
   render() {
-    const { schema, uiSchema, idSchema, registry } = this.props;
+    const { schema, uiSchema, fieldPathId, registry } = this.props;
     const { schemaUtils, translateString } = registry;
     if (!(ITEMS_KEY in schema)) {
       const uiOptions = getUiOptions<T[], S, F>(uiSchema);
@@ -439,7 +470,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       return (
         <UnsupportedFieldTemplate
           schema={schema}
-          idSchema={idSchema}
+          fieldPathId={fieldPathId}
           reason={translateString(TranslatableString.MissingItems)}
           registry={registry}
         />
@@ -468,7 +499,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       schema,
       uiSchema = {},
       errorSchema,
-      idSchema,
+      fieldPathId,
       name,
       title,
       disabled = false,
@@ -478,28 +509,35 @@ 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, fields, formContext, globalFormOptions } = registry;
+    const { OptionalDataControlsField } = fields;
     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);
     const formData = keyedToPlainFormData(this.state.keyedFormData);
-    const canAdd = this.canAddItem(formData);
+    const renderOptionalField = shouldRenderOptionalField(registry, schema, required, uiSchema);
+    const hasFormData = isFormDataAvailable(this.props.formData);
+    const canAdd = this.canAddItem(formData) && (!renderOptionalField || hasFormData);
+    const actualFormData = hasFormData ? keyedFormData : [];
+    const extraClass = renderOptionalField ? ' rjsf-optional-array-field' : '';
+    const optionalDataControl = renderOptionalField ? <OptionalDataControlsField {...this.props} /> : undefined;
     const arrayProps: ArrayFieldTemplateProps<T[], S, F> = {
       canAdd,
-      items: keyedFormData.map((keyedItem, index) => {
+      items: actualFormData.map((keyedItem, index) => {
         const { key, item } = keyedItem;
         // While we are actually dealing with a single item of type T, the types require a T[], so cast
         const itemCast = item as unknown as T[];
         const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
         const itemErrorSchema = errorSchema ? (errorSchema[index] as ErrorSchema<T[]>) : undefined;
-        const itemIdPrefix = idSchema.$id + idSeparator + index;
-        const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
+        const itemFieldPathId = toFieldPathId(index, globalFormOptions, fieldPathId);
+
+        // Compute the item UI schema using the helper method
+        const itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
+
         return this.renderArrayFieldItem({
           key,
           index,
@@ -509,10 +547,10 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
           itemSchema,
-          itemIdSchema,
+          itemFieldPathId,
           itemErrorSchema,
           itemData: itemCast,
-          itemUiSchema: uiSchema.items,
+          itemUiSchema,
           autofocus: autofocus && index === 0,
           onBlur,
           onFocus,
@@ -520,19 +558,19 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           totalItems: keyedFormData.length,
         });
       }),
-      className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}`,
+      className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}${extraClass}`,
       disabled,
-      idSchema,
+      fieldPathId,
       uiSchema,
       onAddClick: this.onAddClick,
       readonly,
       required,
       schema,
       title: fieldTitle,
-      formContext,
       formData,
       rawErrors,
       registry,
+      optionalDataControl,
     };
 
     const Template = getTemplate<'ArrayFieldTemplate', T[], S, F>('ArrayFieldTemplate', registry, uiOptions);
@@ -544,7 +582,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
   renderCustomWidget() {
     const {
       schema,
-      idSchema,
+      fieldPathId,
       uiSchema,
       disabled = false,
       readonly = false,
@@ -566,7 +604,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     return (
       <Widget
-        id={idSchema.$id}
+        id={fieldPathId.$id}
         name={name}
         multiple
         onChange={this.onSelectChange}
@@ -596,7 +634,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
   renderMultiSelect() {
     const {
       schema,
-      idSchema,
+      fieldPathId,
       uiSchema,
       formData: items = [],
       disabled = false,
@@ -619,7 +657,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     return (
       <Widget
-        id={idSchema.$id}
+        id={fieldPathId.$id}
         name={name}
         multiple
         onChange={this.onSelectChange}
@@ -649,7 +687,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     const {
       schema,
       uiSchema,
-      idSchema,
+      fieldPathId,
       name,
       disabled = false,
       readonly = false,
@@ -669,7 +707,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     return (
       <Widget
         options={options}
-        id={idSchema.$id}
+        id={fieldPathId.$id}
         name={name}
         multiple
         onChange={this.onSelectChange}
@@ -697,11 +735,9 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     const {
       schema,
       uiSchema = {},
-      formData = [],
+      formData,
       errorSchema,
-      idPrefix,
-      idSeparator = '_',
-      idSchema,
+      fieldPathId,
       name,
       title,
       disabled = false,
@@ -713,34 +749,39 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       onFocus,
       rawErrors,
     } = this.props;
-    const { keyedFormData } = this.state;
     let { formData: items = [] } = this.props;
+    const { keyedFormData } = this.state;
     const fieldTitle = schema.title || title || name;
     const uiOptions = getUiOptions<T[], S, F>(uiSchema);
-    const { schemaUtils, formContext } = registry;
+    const { schemaUtils, fields, formContext, globalFormOptions } = registry;
+    const { OptionalDataControlsField } = fields;
+    const renderOptionalField = shouldRenderOptionalField(registry, schema, required, uiSchema);
+    const hasFormData = isFormDataAvailable(formData);
     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[]),
+      schemaUtils.retrieveSchema(item, items[index] as unknown as T[]),
     );
     const additionalSchema = isObject(schema.additionalItems)
       ? schemaUtils.retrieveSchema(schema.additionalItems as S, formData)
       : null;
 
-    if (!items || items.length < itemSchemas.length) {
+    if (items.length < itemSchemas.length) {
       // to make sure at least all fixed items are generated
-      items = items || [];
       items = items.concat(new Array(itemSchemas.length - items.length));
     }
+    const actualFormData = hasFormData ? keyedFormData : [];
+    const extraClass = renderOptionalField ? ' rjsf-optional-array-field' : '';
+    const optionalDataControl = renderOptionalField ? <OptionalDataControlsField {...this.props} /> : undefined;
 
     // These are the props passed into the render function
-    const canAdd = this.canAddItem(items) && !!additionalSchema;
+    const canAdd = this.canAddItem(items) && !!additionalSchema && (!renderOptionalField || hasFormData);
     const arrayProps: ArrayFieldTemplateProps<T[], S, F> = {
       canAdd,
-      className: 'rjsf-field rjsf-field-array rjsf-field-array-fixed-items',
+      className: `rjsf-field rjsf-field-array rjsf-field-array-fixed-items${extraClass}`,
       disabled,
-      idSchema,
+      fieldPathId,
       formData,
-      items: keyedFormData.map((keyedItem, index) => {
+      items: actualFormData.map((keyedItem, index) => {
         const { key, item } = keyedItem;
         // While we are actually dealing with a single item of type T, the types require a T[], so cast
         const itemCast = item as unknown as T[];
@@ -749,13 +790,21 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           (additional && isObject(schema.additionalItems)
             ? schemaUtils.retrieveSchema(schema.additionalItems as S, itemCast)
             : itemSchemas[index]) || {};
-        const itemIdPrefix = idSchema.$id + idSeparator + index;
-        const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
-        const itemUiSchema = additional
-          ? uiSchema.additionalItems || {}
-          : Array.isArray(uiSchema.items)
-            ? uiSchema.items[index]
-            : uiSchema.items || {};
+        const itemFieldPathId = toFieldPathId(index, globalFormOptions, fieldPathId);
+        // Compute the item UI schema - handle both static and dynamic cases
+        let itemUiSchema: UiSchema<T[], S, F> | undefined;
+        if (additional) {
+          // For additional items, use additionalItems uiSchema
+          itemUiSchema = uiSchema.additionalItems as UiSchema<T[], S, F>;
+        } else {
+          // For fixed items, uiSchema.items can be an array, a function, or a single object
+          if (Array.isArray(uiSchema.items)) {
+            itemUiSchema = uiSchema.items[index] as UiSchema<T[], S, F>;
+          } else {
+            // Use the helper method for function or static object cases
+            itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
+          }
+        }
         const itemErrorSchema = errorSchema ? (errorSchema[index] as ErrorSchema<T[]>) : undefined;
 
         return this.renderArrayFieldItem({
@@ -770,7 +819,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           itemSchema,
           itemData: itemCast,
           itemUiSchema,
-          itemIdSchema,
+          itemFieldPathId,
           itemErrorSchema,
           autofocus: autofocus && index === 0,
           onBlur,
@@ -786,9 +835,9 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       schema,
       uiSchema,
       title: fieldTitle,
-      formContext,
       errorSchema,
       rawErrors,
+      optionalDataControl,
     };
 
     const Template = getTemplate<'ArrayFieldTemplate', T[], S, F>('ArrayFieldTemplate', registry, uiOptions);
@@ -811,8 +860,8 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     canMoveDown: boolean;
     itemSchema: S;
     itemData: T[];
-    itemUiSchema: UiSchema<T[], S, F>;
-    itemIdSchema: IdSchema<T[]>;
+    itemUiSchema: UiSchema<T[], S, F> | undefined;
+    itemFieldPathId: FieldPathId;
     itemErrorSchema?: ErrorSchema<T[]>;
     autofocus?: boolean;
     onBlur: FieldProps<T[], S, F>['onBlur'];
@@ -831,7 +880,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       itemSchema,
       itemData,
       itemUiSchema,
-      itemIdSchema,
+      itemFieldPathId,
       itemErrorSchema,
       autofocus,
       onBlur,
@@ -840,7 +889,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,
@@ -867,9 +916,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           formData={itemData}
           formContext={formContext}
           errorSchema={itemErrorSchema}
-          idPrefix={idPrefix}
-          idSeparator={idSeparator}
-          idSchema={itemIdSchema}
+          fieldPathId={itemFieldPathId}
           required={this.isItemRequired(itemSchema)}
           onChange={this.onChangeForIndex(index)}
           onBlur={onBlur}
@@ -883,7 +930,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         />
       ),
       buttonsProps: {
-        idSchema: itemIdSchema,
+        fieldPathId: itemFieldPathId,
         disabled: disabled,
         readonly: readonly,
         canAdd,

package/src/components/fields/BooleanField.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import {
   getWidget,
   getUiOptions,
@@ -5,6 +6,7 @@ import {
   FieldProps,
   FormContextType,
   EnumOptionsType,
+  ErrorSchema,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
@@ -23,7 +25,7 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
     schema,
     name,
     uiSchema,
-    idSchema,
+    fieldPathId,
     formData,
     registry,
     required,
@@ -86,15 +88,22 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
       enumOptions = optionsList<T, S, F>({ enum: enums } as S, uiSchema);
     }
   }
+  const onWidgetChange = useCallback(
+    (value: T | undefined, errorSchema?: ErrorSchema, id?: string) => {
+      // Boolean field change passes an empty path array to the parent field which adds the appropriate path
+      return onChange(value, fieldPathId.path, errorSchema, id);
+    },
+    [onChange, fieldPathId],
+  );
 
   return (
     <Widget
       options={{ ...options, enumOptions }}
       schema={schema}
       uiSchema={uiSchema}
-      id={idSchema.$id}
+      id={fieldPathId.$id}
       name={name}
-      onChange={onChange}
+      onChange={onWidgetChange}
       onFocus={onFocus}
       onBlur={onBlur}
       label={label}