@griddo/ax 11.15.8 → 11.15.9-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.15.8",
+	"version": "11.15.9-rc.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -219,5 +219,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2d50b3828919cceb67f86fe7283056d4207a0eaf"
+	"gitHead": "a7cc8a0153f803596fab93ecbe74a37c59da3cf3"
 }

package/src/__tests__/components/Fields/ArrayFieldGroup/ArrayFieldGroup.test.tsx

@@ -1,192 +1,103 @@
-import React from "react";
-import configureStore from "redux-mock-store";
-import ArrayFieldGroup, { IProps } from "@ax/components/Fields/ArrayFieldGroup";
-import { ThemeProvider } from "styled-components";
+import ArrayFieldGroup, { type IProps } from "@ax/components/Fields/ArrayFieldGroup";
+import FieldsBehavior from "@ax/components/FieldsBehavior";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import { render, cleanup, screen, fireEvent, act } from "../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
-import FieldsBehavior from "@ax/components/FieldsBehavior";
 
-afterEach(cleanup);
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import { ThemeProvider } from "styled-components";
 
-const defaultProps = mock<IProps>();
+import { act, cleanup, fireEvent, render, screen } from "../../../../../config/jest/test-utils";
 
-defaultProps.selectedContent = { component: "" };
+afterEach(cleanup);
 
 const middlewares: any = [];
 const mockStore = configureStore(middlewares);
+const store = mockStore({});
 
-const initialStore = {};
-const store = mockStore(initialStore);
-
-describe("ArrayFieldGroup component rendering", () => {
-	it("should render the component with no items and button", async () => {
-		await act(async () => {
-			render(
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<ArrayFieldGroup {...defaultProps} />
-				</ThemeProvider>,
-				{ store },
-			);
-		});
-
-		expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
-	});
-
-	it("should render the component with ArrayFieldInline", async () => {
-		defaultProps.value = [
+const sampleValue = [
+	{
+		id: "b71c3180-1cf2-4f69-8248-5fcb6e579377",
+		semTitle: "dsa",
+		subjects: [
 			{
-				id: "b71c3180-1cf2-4f69-8248-5fcb6e579377",
-				semTitle: "dsa",
-				subjects: [
-					{
-						id: "3ae4be00-9216-422d-a841-0448e305af08",
-						subjTeachers: {
-							mode: "manual",
-							fixed: [4476, 4425],
-						},
-						subjTitle: "as",
-						subjType: "das",
-					},
-				],
+				id: "3ae4be00-9216-422d-a841-0448e305af08",
+				subjTeachers: { mode: "manual", fixed: [4476, 4425] },
+				subjTitle: "as",
+				subjType: "das",
 			},
-		];
-		const fieldProps = {
-			objKey: "semTitle",
-			fieldType: "TextField",
-			innerFields: [],
-			field: {
-				title: "Title",
-				type: "TextField",
-				key: "semTitle",
-				mandatory: "true",
-				isTitle: true,
-			},
-			title: "Title",
-			type: "TextField",
-			mandatory: "true",
-			isTitle: true,
-			theme: "default-theme",
-		};
-		defaultProps.innerFields = [<FieldsBehavior {...fieldProps} key={1} />];
-		defaultProps.arrayType = "inline";
-
-		// rendering with innerFields in props
-		await act(async () => {
-			render(
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<ArrayFieldGroup {...defaultProps} />
-				</ThemeProvider>,
-				{ store },
-			);
-		});
-
-		expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
-		expect(screen.getByTestId("arrayFieldInline")).toBeTruthy();
-
-		const fieldProps2 = {
-			objKey: "semTitle",
-			fieldType: "TextField",
-			field: {
-				title: "Title",
-				type: "TextField",
-				key: "semTitle",
-				mandatory: "true",
-				isTitle: true,
-			},
-			title: "Title",
-			type: "TextField",
-			mandatory: "true",
-			isTitle: true,
-			theme: "default-theme",
-		};
-		defaultProps.innerFields = [<FieldsBehavior {...fieldProps2} key={1} />];
-
-		// rendering without innerFields in props
+		],
+	},
+];
+
+// Builds a fresh props object per test so mutations don't leak between cases.
+const makeProps = (overrides: Partial<IProps> = {}): IProps => {
+	const props = mock<IProps>();
+	props.selectedContent = { component: "" };
+	props.value = sampleValue;
+	props.arrayType = "inline";
+	props.innerFields = [];
+	for (const [key, val] of Object.entries(overrides)) {
+		(props as any)[key] = val;
+	}
+	return props;
+};
+
+const makeField = (overrides: Record<string, unknown> = {}) => {
+	const fieldProps = {
+		objKey: "semTitle",
+		fieldType: "TextField",
+		value: "dsa",
+		innerFields: [],
+		field: { title: "Title", type: "TextField", key: "semTitle", mandatory: true, isTitle: true },
+		title: "Title",
+		type: "TextField",
+		mandatory: true,
+		isTitle: true,
+		theme: "default-theme",
+		...overrides,
+	};
+	return <FieldsBehavior {...fieldProps} key={1} />;
+};
+
+const renderGroup = async (props: IProps) => {
+	await act(async () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ArrayFieldGroup {...defaultProps} />
+				<ArrayFieldGroup {...props} />
 			</ThemeProvider>,
 			{ store },
 		);
 	});
+};
 
-	it("should render the component with ArrayFieldItem", async () => {
-		defaultProps.value = [
-			{
-				id: "b71c3180-1cf2-4f69-8248-5fcb6e579377",
-				semTitle: "dsa",
-				subjects: [
-					{
-						id: "3ae4be00-9216-422d-a841-0448e305af08",
-						subjTeachers: {
-							mode: "manual",
-							fixed: [4476, 4425],
-						},
-						subjTitle: "as",
-						subjType: "das",
-					},
-				],
-			},
-		];
-		const fieldProps = {
-			objKey: "semTitle",
-			fieldType: "TextField",
-			innerFields: [],
-			field: {
-				title: "Title",
-				type: "TextField",
-				key: "semTitle",
-				mandatory: "true",
-				isTitle: false,
-			},
-			title: "Title",
-			type: "TextField",
-			mandatory: "true",
-			isTitle: false,
-			theme: "default-theme",
-		};
+describe("ArrayFieldGroup component rendering", () => {
+	it("should render the add button when there are no items", async () => {
+		await renderGroup(makeProps({ value: [] }));
 
-		defaultProps.innerFields = [<FieldsBehavior {...fieldProps} key={1} />];
-		defaultProps.arrayType = "item";
+		expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
+	});
 
-		await act(async () => {
-			render(
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<ArrayFieldGroup {...defaultProps} />
-				</ThemeProvider>,
-				{ store },
-			);
-		});
+	it("should render an ArrayFieldInline per item when arrayType is inline", async () => {
+		await renderGroup(makeProps({ arrayType: "inline", innerFields: [makeField()] }));
 
 		expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
-		expect(screen.getByTestId("arrayFieldItem")).toBeTruthy();
+		expect(screen.getByTestId("arrayFieldInline")).toBeTruthy();
+	});
 
-		const fieldProps2 = {
-			objKey: "semTitle",
-			fieldType: "TextField",
-			field: {
-				title: "A Title",
-				type: "TextField",
-				key: "semTitle",
-				mandatory: "true",
-				isTitle: true,
-			},
-			title: "A Title",
-			type: "TextField",
-			mandatory: "true",
-			isTitle: true,
-			theme: "default-theme",
-		};
-		defaultProps.innerFields = [<FieldsBehavior {...fieldProps2} key={1} />];
+	it("should render an ArrayFieldItem per item when arrayType is item", async () => {
+		await renderGroup(makeProps({ arrayType: "item", innerFields: [makeField({ isTitle: false })] }));
 
-		// rendering with isTitle true
-		render(
-			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ArrayFieldGroup {...defaultProps} />
-			</ThemeProvider>,
-			{ store },
+		expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
+		expect(screen.getByTestId("arrayFieldItem")).toBeTruthy();
+	});
+
+	it("should use the field marked as isTitle as the item title", async () => {
+		await renderGroup(
+			makeProps({
+				arrayType: "item",
+				innerFields: [makeField({ title: "A Title", field: { key: "semTitle", isTitle: true } })],
+			}),
 		);
 
 		expect(screen.getByText("A Title")).toBeTruthy();
@@ -194,91 +105,60 @@ describe("ArrayFieldGroup component rendering", () => {
 });
 
 describe("ArrayFieldGroup component events", () => {
-	it("should call the onclick of the button", async () => {
-		defaultProps.value = [
-			{
-				id: "b71c3180-1cf2-4f69-8248-5fcb6e579377",
-				semTitle: "dsa",
-				subjects: [
-					{
-						id: "3ae4be00-9216-422d-a841-0448e305af08",
-						subjTeachers: {
-							mode: "manual",
-							fixed: [4476, 4425],
-						},
-						subjTitle: "as",
-						subjType: "das",
-					},
-				],
-			},
-		];
+	it("should call onChange when clicking the add button", async () => {
+		const props = makeProps();
+		const onChangeMock = props.onChange as jest.MockedFunction<IProps["onChange"]>;
 
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: Record<string, unknown>[]) => void>;
+		await renderGroup(props);
 
-		await act(async () => {
-			render(
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<ArrayFieldGroup {...defaultProps} />
-				</ThemeProvider>,
-				{ store },
-			);
-		});
-
-		expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
 		fireEvent.click(screen.getByTestId("button-line-inverse"));
 		expect(onChangeMock).toHaveBeenCalled();
 	});
 
-	it("should call the handleDelete with the button", async () => {
-		defaultProps.value = [
-			{
-				id: "b71c3180-1cf2-4f69-8248-5fcb6e579377",
-				semTitle: "dsa",
-				subjects: [
-					{
-						id: "3ae4be00-9216-422d-a841-0448e305af08",
-						subjTeachers: {
-							mode: "manual",
-							fixed: [4476, 4425],
-						},
-						subjTitle: "as",
-						subjType: "das",
-					},
-				],
-			},
-		];
-		const fieldProps = {
-			objKey: "semTitle",
-			fieldType: "TextField",
-			innerFields: [],
-			field: {
-				title: "Title",
-				type: "TextField",
-				key: "semTitle",
-				mandatory: "true",
-				isTitle: true,
-			},
-			title: "Title",
-			type: "TextField",
-			mandatory: "true",
-			isTitle: true,
-			theme: "default-theme",
-		};
-		defaultProps.innerFields = [<FieldsBehavior {...fieldProps} key={1} />];
-		defaultProps.arrayType = "inline";
-		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: Record<string, unknown>[]) => void>;
+	it("should call onChange when deleting an inline item", async () => {
+		const props = makeProps({ arrayType: "inline", innerFields: [makeField()] });
+		const onChangeMock = props.onChange as jest.MockedFunction<IProps["onChange"]>;
 
-		await act(async () => {
-			render(
-				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<ArrayFieldGroup {...defaultProps} />
-				</ThemeProvider>,
-				{ store },
-			);
-		});
+		await renderGroup(props);
 
 		expect(screen.getByTestId("arrayFieldInline")).toBeTruthy();
 		fireEvent.click(screen.getByTestId("icon-action-component"));
 		expect(onChangeMock).toHaveBeenCalled();
 	});
 });
+
+describe("ArrayFieldGroup maxItems constraint", () => {
+	it("should keep the add button enabled with no tooltip when maxItems is undefined", async () => {
+		await renderGroup(makeProps({ value: sampleValue, maxItems: undefined }));
+
+		const button = screen.getByTestId("button-line-inverse") as HTMLButtonElement;
+		expect(button.disabled).toBe(false);
+		expect(screen.queryByTestId("tooltip-component")).toBeNull();
+	});
+
+	it("should keep the add button enabled while items are below maxItems", async () => {
+		await renderGroup(makeProps({ value: sampleValue, maxItems: 2 }));
+
+		const button = screen.getByTestId("button-line-inverse") as HTMLButtonElement;
+		expect(button.disabled).toBe(false);
+		expect(screen.queryByTestId("tooltip-component")).toBeNull();
+	});
+
+	it("should disable the add button and show a tooltip once maxItems is reached", async () => {
+		await renderGroup(makeProps({ value: sampleValue, maxItems: 1 }));
+
+		const button = screen.getByTestId("button-line-inverse") as HTMLButtonElement;
+		expect(button.disabled).toBe(true);
+		expect(screen.getByTestId("tooltip-component")).toBeTruthy();
+	});
+
+	it("should not call onChange when the add button is clicked at maxItems", async () => {
+		const props = makeProps({ value: sampleValue, maxItems: 1 });
+		const onChangeMock = props.onChange as jest.MockedFunction<IProps["onChange"]>;
+
+		await renderGroup(props);
+
+		fireEvent.click(screen.getByTestId("button-line-inverse"));
+		expect(onChangeMock).not.toHaveBeenCalled();
+	});
+});

package/src/components/Fields/ArrayFieldGroup/ArrayFieldInline/index.tsx

@@ -1,13 +1,16 @@
-import React from "react";
+import { useMemo } from "react";
 import { connect } from "react-redux";
 
 import { IconAction } from "@ax/components";
-import { ISite } from "@ax/types";
 import { pageEditorActions } from "@ax/containers/PageEditor";
-import { getNullValue } from "@ax/helpers";
+import type { ISite } from "@ax/types";
+
+import { getArrayFields } from "../helpers";
 
 import * as S from "./style";
 
+const getInlineKey = (field: any): string => field.props.objKey;
+
 const ArrayFieldInline = (props: IProps): JSX.Element => {
 	const {
 		fields,
@@ -25,46 +28,22 @@ const ArrayFieldInline = (props: IProps): JSX.Element => {
 
 	const deleteItem = () => handleDelete(index);
 
-	const getFields = (fields: any[]): any[] => {
-		return fields.map((field: any) => {
-			const key = field.props.objKey;
-
-			const handleChange = (newValue: any) => onChange({ [key]: newValue });
-
-			const innerFields = field.props.innerFields ? getFields(field.props.innerFields) : undefined;
-			const hasMultipleOptions = field.props.whiteList && field.props.whiteList.length > 1;
-
-			const actionsField = {
-				...actions,
-				addComponentAction: (component: any, key: string) =>
-					addComponentInArray(component, key, parentKey, index, hasMultipleOptions),
-				replaceModuleAction: (module: string, parent: any, key: string) =>
-					replaceModuleInArray(module, parent, key, parentKey, index),
-			};
-
-			const hideField = () => {
-				const isContainer = field.props.type === "ComponentContainer";
-
-				const nullValue = isContainer && item[key] ? getNullValue(item[key], hasMultipleOptions) : null;
-				onChange({ [key]: nullValue });
-			};
-
-			return {
-				...field,
-				props: {
-					...field.props,
-					value: item[key],
-					objKey: key,
-					onChange: handleChange,
-					innerFields,
-					site,
-					actions: actionsField,
-					hideField,
-				},
-				key,
-			};
-		});
-	};
+	const renderedFields = useMemo(
+		() =>
+			getArrayFields({
+				fields,
+				item,
+				index,
+				parentKey,
+				site,
+				actions,
+				onChange,
+				addComponentInArray,
+				replaceModuleInArray,
+				getKey: getInlineKey,
+			}),
+		[fields, item, index, parentKey, site, actions, onChange, addComponentInArray, replaceModuleInArray],
+	);
 
 	return (
 		<S.Wrapper data-testid="arrayFieldInline">
@@ -72,7 +51,7 @@ const ArrayFieldInline = (props: IProps): JSX.Element => {
 				<S.IconWrapper>
 					<IconAction icon="delete" onClick={deleteItem} size="s" disabled={disabled} />
 				</S.IconWrapper>
-				{getFields(fields)}
+				{renderedFields}
 			</S.Content>
 		</S.Wrapper>
 	);
@@ -82,7 +61,7 @@ interface IProps {
 	fields: any[];
 	item: Record<string, unknown>;
 	index: number;
-	onChange: (value: Record<string, unknown>) => void;
+	onChange: (value: Record<string, unknown>, index: number) => void;
 	handleDelete: (index: number) => void;
 	site: ISite | null;
 	disabled?: boolean;

package/src/components/Fields/ArrayFieldGroup/ArrayFieldItem/index.tsx

@@ -1,11 +1,15 @@
-import React from "react";
+import { useMemo } from "react";
 import { connect } from "react-redux";
-import { ISite } from "@ax/types";
+
 import { pageEditorActions } from "@ax/containers/PageEditor";
-import { getNullValue } from "@ax/helpers";
+import type { ISite } from "@ax/types";
+
+import { getArrayFields } from "../helpers";
 
 import * as S from "./style";
 
+const getItemKey = (field: any): string => field.key;
+
 const ArrayFieldItem = (props: IProps): JSX.Element => {
 	const {
 		fields,
@@ -46,46 +50,22 @@ const ArrayFieldItem = (props: IProps): JSX.Element => {
 		return `${name} ${index + 1}`;
 	};
 
-	const getFields = (fields: any[]): any[] => {
-		return fields.map((field: any) => {
-			const { key } = field;
-
-			const handleChange = (newValue: any) => onChange({ [key]: newValue });
-
-			const innerFields = field.props.innerFields ? getFields(field.props.innerFields) : undefined;
-			const hasMultipleOptions = field.props.whiteList && field.props.whiteList.length > 1;
-
-			const actionsField = {
-				...actions,
-				addComponentAction: (component: any, key: string) =>
-					addComponentInArray(component, key, parentKey, index, hasMultipleOptions),
-				replaceModuleAction: (module: string, parent: any, key: string) =>
-					replaceModuleInArray(module, parent, key, parentKey, index),
-			};
-
-			const hideField = () => {
-				const isContainer = field.props.type === "ComponentContainer";
-
-				const nullValue = isContainer && item[key] ? getNullValue(item[key], hasMultipleOptions) : null;
-				onChange({ [key]: nullValue });
-			};
-
-			return {
-				...field,
-				props: {
-					...field.props,
-					value: item[key],
-					objKey: key,
-					onChange: handleChange,
-					innerFields,
-					site,
-					actions: actionsField,
-					hideField,
-				},
-				key,
-			};
-		});
-	};
+	const renderedFields = useMemo(
+		() =>
+			getArrayFields({
+				fields,
+				item,
+				index,
+				parentKey,
+				site,
+				actions,
+				onChange,
+				addComponentInArray,
+				replaceModuleInArray,
+				getKey: getItemKey,
+			}),
+		[fields, item, index, parentKey, site, actions, onChange, addComponentInArray, replaceModuleInArray],
+	);
 
 	return (
 		<S.Wrapper data-testid="arrayFieldItem" isOpen={isOpen === index}>
@@ -93,7 +73,7 @@ const ArrayFieldItem = (props: IProps): JSX.Element => {
 				{getItemTitle(fields)}
 				<S.StyledActionMenu icon="more" options={menuOptions} />
 			</S.Title>
-			<S.Content isOpen={isOpen === index}>{getFields(fields)}</S.Content>
+			<S.Content isOpen={isOpen === index}>{renderedFields}</S.Content>
 		</S.Wrapper>
 	);
 };
@@ -103,7 +83,7 @@ interface IProps {
 	fields: any[];
 	item: Record<string, unknown>;
 	index: number;
-	onChange: (value: Record<string, unknown>) => void;
+	onChange: (value: Record<string, unknown>, index: number) => void;
 	handleDelete: (index: number) => void;
 	isOpen: number | null;
 	setIsOpen: (index: number | null) => void;

package/src/components/Fields/ArrayFieldGroup/helpers.ts

@@ -0,0 +1,72 @@
+import { getNullValue } from "@ax/helpers";
+import type { ISite } from "@ax/types";
+
+interface IGetArrayFieldsParams {
+	fields: any[];
+	item: Record<string, unknown>;
+	index: number;
+	parentKey: string;
+	site: ISite | null;
+	actions: any;
+	onChange: (value: Record<string, unknown>, index: number) => void;
+	addComponentInArray: (
+		type: string,
+		key: string,
+		parentKey: string,
+		index: number,
+		isMultiple: boolean,
+	) => void;
+	replaceModuleInArray: (module: string, parent: any, key: string, parentKey: string, index: number) => void;
+	/** Each array variant resolves the field key differently (props.objKey vs field.key). */
+	getKey: (field: any) => string;
+}
+
+/**
+ * Builds the inner field descriptors for an array item. Shared by ArrayFieldInline
+ * and ArrayFieldItem so the transformation lives in a single place.
+ */
+export const getArrayFields = (params: IGetArrayFieldsParams): any[] => {
+	const { fields, item, index, parentKey, site, actions, onChange, addComponentInArray, replaceModuleInArray, getKey } =
+		params;
+
+	return fields.map((field: any) => {
+		const key = getKey(field);
+
+		const handleChange = (newValue: any) => onChange({ [key]: newValue }, index);
+
+		const innerFields = field.props.innerFields
+			? getArrayFields({ ...params, fields: field.props.innerFields })
+			: undefined;
+		const hasMultipleOptions = field.props.whiteList && field.props.whiteList.length > 1;
+
+		const actionsField = {
+			...actions,
+			addComponentAction: (component: any, key: string) =>
+				addComponentInArray(component, key, parentKey, index, hasMultipleOptions),
+			replaceModuleAction: (module: string, parent: any, key: string) =>
+				replaceModuleInArray(module, parent, key, parentKey, index),
+		};
+
+		const hideField = () => {
+			const isContainer = field.props.type === "ComponentContainer";
+
+			const nullValue = isContainer && item[key] ? getNullValue(item[key], hasMultipleOptions) : null;
+			onChange({ [key]: nullValue }, index);
+		};
+
+		return {
+			...field,
+			props: {
+				...field.props,
+				value: item[key],
+				objKey: key,
+				onChange: handleChange,
+				innerFields,
+				site,
+				actions: actionsField,
+				hideField,
+			},
+			key,
+		};
+	});
+};

package/src/components/Fields/ArrayFieldGroup/index.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
-import { Button, FieldsDivider } from "@ax/components";
+import { Button, FieldsDivider, Tooltip } from "@ax/components";
 import { getDefaultSchema } from "@ax/helpers";
 import type { ISite } from "@ax/types";
 
@@ -25,11 +25,19 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
 		objKey,
 		selectedContent,
 		actions,
+		maxItems,
 	} = props;
 
 	const [items, setItems] = useState<any[]>([]);
 	const [isOpen, setIsOpen] = useState<number | null>(null);
 
+	// Keeps the latest items accessible from stable callbacks without
+	// re-creating them on every change (which would break child memoization).
+	const itemsRef = useRef(items);
+	itemsRef.current = items;
+
+	const hasMaxItems = !!maxItems && items.length >= maxItems;
+
 	// biome-ignore lint/correctness/useExhaustiveDependencies: false positive
 	useEffect(() => {
 		const initialValue = value ? Object.values(value) : [];
@@ -40,6 +48,8 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
 	}, [editorID]);
 
 	const handleClick = () => {
+		if (hasMaxItems) return;
+
 		let newComponent = { id: uuidv4() };
 		if (selectedContent) {
 			const defaultValues = getDefaultSchema(selectedContent.component);
@@ -49,28 +59,34 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
 					: newComponent;
 		}
 
-		const newItems = [...items, newComponent];
+		const newItems = [...itemsRef.current, newComponent];
 		setItems(newItems);
 		onChange(newItems);
 		setIsOpen(newItems.length - 1);
 	};
 
-	const handleChange = (newValue: Record<string, unknown>, index: number) => {
-		const updatedItems = [...items];
-		updatedItems[index] = {
-			...updatedItems[index],
-			...newValue,
-		};
-		setItems(updatedItems);
-		onChange(updatedItems);
-	};
+	const handleChange = useCallback(
+		(newValue: Record<string, unknown>, index: number) => {
+			const updatedItems = [...itemsRef.current];
+			updatedItems[index] = {
+				...updatedItems[index],
+				...newValue,
+			};
+			setItems(updatedItems);
+			onChange(updatedItems);
+		},
+		[onChange],
+	);
 
-	const handleDelete = (index: number) => {
-		const updatedItems = [...items];
-		updatedItems.splice(index, 1);
-		setItems(updatedItems);
-		onChange(updatedItems);
-	};
+	const handleDelete = useCallback(
+		(index: number) => {
+			const updatedItems = [...itemsRef.current];
+			updatedItems.splice(index, 1);
+			setItems(updatedItems);
+			onChange(updatedItems);
+		},
+		[onChange],
+	);
 
 	const DividerComponent = () => (divider ? <FieldsDivider data={divider} /> : null);
 
@@ -79,14 +95,13 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
 			<DividerComponent />
 			<div>
 				{items?.map((item, index) => {
-					const handleFieldChange = (newValue: Record<string, unknown>) => handleChange(newValue, index);
 					return arrayType === "inline" ? (
 						<ArrayFieldInline
 							key={item.id}
 							fields={innerFields}
 							item={item}
 							index={index}
-							onChange={handleFieldChange}
+							onChange={handleChange}
 							handleDelete={handleDelete}
 							site={site}
 							disabled={disabled}
@@ -100,7 +115,7 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
 							fields={innerFields}
 							item={item}
 							index={index}
-							onChange={handleFieldChange}
+							onChange={handleChange}
 							handleDelete={handleDelete}
 							isOpen={isOpen}
 							setIsOpen={setIsOpen}
@@ -113,9 +128,11 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
 				})}
 			</div>
 			<S.ButtonWrapper>
-				<Button type="button" onClick={handleClick} buttonStyle="line" disabled={disabled}>
-					{`Add ${name}`}
-				</Button>
+				<Tooltip content={hasMaxItems ? "Item limit reached" : undefined}>
+					<Button type="button" onClick={handleClick} buttonStyle="line" disabled={disabled || hasMaxItems}>
+						{`Add ${name}`}
+					</Button>
+				</Tooltip>
 			</S.ButtonWrapper>
 		</div>
 	);
@@ -134,6 +151,7 @@ export interface IProps {
 	objKey: string;
 	selectedContent: any;
 	actions: any;
+	maxItems?: number;
 }
 
 export default ArrayFieldGroup;