Fix: 3315 by adding canAdd prop on the ArrayFieldTemplateItemType (r…

…jsf-team#3325)

fixed: rjsf-team#3315
- Updated the `ArrayFieldTemplateItemType` to add the `canAdd` prop
- Updated `ArrayField` to pass the `canAdd` prop to the ArrayFieldItemTemplate instances
- Updated the `CHANGELOG.md` accordingly

CHANGELOG.md

@@ -34,7 +34,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/core
 - Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
   - Also, passed `registry` into the `SubmitButton` inside of the `Form` as part of this fix
-- Updated `ArrayField` to pass the new `totalItems` prop to the `ArrayFieldItemTemplate` instances, fixing [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315)
+- Updated `ArrayField` to pass the new `totalItems` and `canAdd` props to the `ArrayFieldItemTemplate` instances, fixing [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315)
   - Also refactored the near duplicate logic for `onAddClick` and `onAddIndexClick` into a new `_handleAddClick()` function, fixing [#3316](https://github.com/rjsf-team/react-jsonschema-form/issues/3316)
 - Fix passing of generic types to a few helper methods, partially fixing [#3072](https://github.com/rjsf-team/react-jsonschema-form/issues/3072)
 
@@ -59,7 +59,7 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## @rjsf/utils
 - Updated the `SubmitButtonProps` and `IconButtonProps` to add required `registry` prop, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
-- Updated the `ArrayFieldTemplateItemType` to add the new `totalItems` prop, fixing [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315)
+- Updated the `ArrayFieldTemplateItemType` to add the new `totalItems` and `canAdd` props, fixing [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315)
 
 ## Dev / docs / playground
 - Fixed the documentation for `ArrayFieldItemTemplate`, `SubmitButtonProps` and `IconButtonProps` as part of the fix for [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314) and [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315) 

docs/advanced-customization/custom-templates.md

@@ -212,6 +212,7 @@ The following props are passed to each `ArrayFieldItemTemplate`:
 - `children`: The html for the item's content.
 - `className`: The className string.
 - `disabled`: A boolean value stating if the array item is disabled.
+- `canAdd`: A boolean value stating whether new items can be added to the array.
 - `hasMoveDown`: A boolean value stating whether the array item can be moved down.
 - `hasMoveUp`: A boolean value stating whether the array item can be moved up.
 - `hasRemove`: A boolean value stating whether the array item can be removed.

packages/core/src/components/fields/ArrayField.tsx

@@ -443,8 +443,9 @@ class ArrayField<
       : ({} as S);
     const itemsSchema: S = schemaUtils.retrieveSchema(_schemaItems);
     const formData = keyedToPlainFormData(this.state.keyedFormData);
+    const canAdd = this.canAddItem(formData);
     const arrayProps: ArrayFieldTemplateProps<T[], S, F> = {
-      canAdd: this.canAddItem(formData),
+      canAdd,
       items: keyedFormData.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
@@ -465,6 +466,7 @@ class ArrayField<
           key,
           index,
           name: name && `${name}-${index}`,
+          canAdd,
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
           itemSchema,
@@ -690,8 +692,9 @@ class ArrayField<
     }
 
     // These are the props passed into the render function
+    const canAdd = this.canAddItem(items) && !!additionalSchema;
     const arrayProps: ArrayFieldTemplateProps<T[], S, F> = {
-      canAdd: this.canAddItem(items) && !!additionalSchema,
+      canAdd,
       className: "field field-array field-array-fixed-items",
       disabled,
       idSchema,
@@ -726,6 +729,7 @@ class ArrayField<
           key,
           index,
           name: name && `${name}-${index}`,
+          canAdd,
           canRemove: additional,
           canMoveUp: index >= itemSchemas.length + 1,
           canMoveDown: additional && index < items.length - 1,
@@ -769,6 +773,7 @@ class ArrayField<
     key: string;
     index: number;
     name: string;
+    canAdd: boolean;
     canRemove?: boolean;
     canMoveUp?: boolean;
     canMoveDown?: boolean;
@@ -787,6 +792,7 @@ class ArrayField<
       key,
       index,
       name,
+      canAdd,
       canRemove = true,
       canMoveUp = true,
       canMoveDown = true,
@@ -853,6 +859,7 @@ class ArrayField<
       ),
       className: "array-item",
       disabled,
+      canAdd,
       hasToolbar: has.toolbar,
       hasMoveUp: has.moveUp,
       hasMoveDown: has.moveDown,

packages/utils/src/types.ts

@@ -500,6 +500,8 @@ export type ArrayFieldTemplateItemType<
   className: string;
   /** A boolean value stating if the array item is disabled */
   disabled: boolean;
+  /** A boolean value stating whether new items can be added to the array */
+  canAdd: boolean;
   /** A boolean value stating whether the array item can be moved down */
   hasMoveDown: boolean;
   /** A boolean value stating whether the array item can be moved up */