feat: improve support for minItems and maxItems for array layout and control

packages/core/src/mappers/renderer.ts

@@ -785,6 +785,7 @@ export interface ControlWithDetailProps
  */
 export interface StatePropsOfArrayControl
   extends StatePropsOfControlWithDetail {
+  arraySchema: JsonSchema;
   childErrors?: ErrorObject[];
 }
 
@@ -811,6 +812,7 @@ export const mapStateToArrayControlProps = (
     path,
     uischema,
     schema: resolvedSchema,
+    arraySchema: schema,
     childErrors,
     renderers: ownProps.renderers || getRenderers(state),
     cells: ownProps.cells || getCells(state),
@@ -1139,6 +1141,10 @@ export const mapStateToOneOfProps = (
 
 export interface StatePropsOfArrayLayout extends StatePropsOfControlWithDetail {
   data: number;
+  arraySchema: JsonSchema;
+  /**
+   * @deprecated Use `arraySchema.minItems` instead.
+   */
   minItems?: number;
   disableRemove?: boolean;
   disableAdd?: boolean;
@@ -1179,6 +1185,7 @@ export const mapStateToArrayLayoutProps = (
     path,
     uischema,
     schema: resolvedSchema,
+    arraySchema: schema,
     data: props.data ? props.data.length : 0,
     errors: allErrors,
     minItems: schema.minItems,

packages/core/test/mappers/renderer.test.ts

@@ -54,6 +54,7 @@ import {
   mapDispatchToControlProps,
   mapDispatchToMultiEnumProps,
   mapStateToAnyOfProps,
+  mapStateToArrayControlProps,
   mapStateToArrayLayoutProps,
   mapStateToControlProps,
   mapStateToEnumControlProps,
@@ -810,6 +811,84 @@ test('mapStateToLayoutProps - visible via state with path from ownProps ', (t) =
   t.true(props.visible);
 });
 
+test('mapStateToArrayControlProps - should include minItems in array control props', (t) => {
+  const schema: JsonSchema = {
+    type: 'array',
+    minItems: 42,
+    items: {
+      type: 'object',
+      properties: {
+        message: {
+          type: 'string',
+          default: 'foo',
+        },
+      },
+    },
+  };
+
+  const uischema: ControlElement = {
+    type: 'Control',
+    scope: '#',
+  };
+
+  const state = {
+    jsonforms: {
+      core: {
+        schema,
+        data: {},
+        uischema,
+        errors: [] as ErrorObject[],
+      },
+    },
+  };
+
+  const ownProps = {
+    uischema,
+  };
+
+  const props = mapStateToArrayControlProps(state, ownProps);
+  t.is(props.arraySchema.minItems, 42);
+});
+
+test('mapStateToArrayControlProps - should include maxItems in array control props', (t) => {
+  const schema: JsonSchema = {
+    type: 'array',
+    maxItems: 42,
+    items: {
+      type: 'object',
+      properties: {
+        message: {
+          type: 'string',
+          default: 'foo',
+        },
+      },
+    },
+  };
+
+  const uischema: ControlElement = {
+    type: 'Control',
+    scope: '#',
+  };
+
+  const state = {
+    jsonforms: {
+      core: {
+        schema,
+        data: {},
+        uischema,
+        errors: [] as ErrorObject[],
+      },
+    },
+  };
+
+  const ownProps = {
+    uischema,
+  };
+
+  const props = mapStateToArrayControlProps(state, ownProps);
+  t.is(props.arraySchema.maxItems, 42);
+});
+
 test('mapStateToArrayLayoutProps - should include minItems in array layout props', (t) => {
   const schema: JsonSchema = {
     type: 'array',
@@ -846,7 +925,46 @@ test('mapStateToArrayLayoutProps - should include minItems in array layout props
   };
 
   const props = mapStateToArrayLayoutProps(state, ownProps);
-  t.is(props.minItems, 42);
+  t.is(props.arraySchema.minItems, 42);
+});
+
+test('mapStateToArrayLayoutProps - should include maxItems in array layout props', (t) => {
+  const schema: JsonSchema = {
+    type: 'array',
+    maxItems: 42,
+    items: {
+      type: 'object',
+      properties: {
+        message: {
+          type: 'string',
+          default: 'foo',
+        },
+      },
+    },
+  };
+
+  const uischema: ControlElement = {
+    type: 'Control',
+    scope: '#',
+  };
+
+  const state = {
+    jsonforms: {
+      core: {
+        schema,
+        data: {},
+        uischema,
+        errors: [] as ErrorObject[],
+      },
+    },
+  };
+
+  const ownProps = {
+    uischema,
+  };
+
+  const props = mapStateToArrayLayoutProps(state, ownProps);
+  t.is(props.arraySchema.maxItems, 42);
 });
 
 test('mapStateToLayoutProps should return renderers prop via ownProps', (t) => {

packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx

@@ -193,6 +193,7 @@ export const ArrayControlRenderer = ({
   enabled,
   errors,
   translations,
+  arraySchema,
 }: ArrayControlProps &
   VanillaRendererProps & { translations: ArrayTranslations }) => {
   const controlElement = uischema as ControlElement;
@@ -221,6 +222,7 @@ export const ArrayControlRenderer = ({
       label={label}
       path={path}
       schema={schema}
+      arraySchema={arraySchema}
       errors={errors}
       addItem={addItem}
       removeItems={removeItems}