@griddo/ax 12.1.0 → 12.2.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.1.0",
+	"version": "12.2.0-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": "0a824819ca17d1ec795344257f0e9c0943796cce"
+	"gitHead": "f61b757318f36a2d86e9c13df08d7c9ac654b0c7"
 }

package/src/__tests__/components/ContextMenu/ContextMenu.test.tsx

@@ -0,0 +1,381 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+import "@testing-library/jest-dom";
+
+import ContextMenu from "@ax/components/ContextMenu";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import type { IActionMenuOption } from "@ax/types";
+
+afterEach(cleanup);
+
+describe("ContextMenu component rendering", () => {
+	it("should return null when position is null", () => {
+		const props = {
+			position: null,
+			options: [],
+		};
+
+		const { container } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		expect(container.firstChild).toBe(null);
+	});
+
+	it("should render menu container when position is provided", () => {
+		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+
+		const props = {
+			position: { x: 100, y: 200 },
+			options,
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		const container = screen.getByText("Edit").closest("div");
+		expect(container).toBeTruthy();
+	});
+
+	it("should render all provided options", () => {
+		const options: IActionMenuOption[] = [
+			{ label: "Edit", action: jest.fn(), icon: "edit" },
+			{ label: "Delete", action: jest.fn(), icon: "delete" },
+			{ label: "Duplicate", action: jest.fn(), icon: "duplicate" },
+		];
+
+		const props = {
+			position: { x: 100, y: 200 },
+			options,
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByText("Edit")).toBeInTheDocument();
+		expect(screen.getByText("Delete")).toBeInTheDocument();
+		expect(screen.getByText("Duplicate")).toBeInTheDocument();
+	});
+
+	it("should handle null and undefined options in array", () => {
+		const options: (IActionMenuOption | undefined | null)[] = [
+			{ label: "Edit", action: jest.fn(), icon: "edit" },
+			null,
+			undefined,
+			{ label: "Delete", action: jest.fn(), icon: "delete" },
+		];
+
+		const props = {
+			position: { x: 100, y: 200 },
+			options,
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByText("Edit")).toBeInTheDocument();
+		expect(screen.getByText("Delete")).toBeInTheDocument();
+	});
+});
+
+describe("ContextMenu component positioning", () => {
+	it("should apply correct position coordinates", () => {
+		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+
+		const props = {
+			position: { x: 150, y: 250 },
+			options,
+		};
+
+		const { container } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		const menuContainer = container.querySelector("div");
+		// The menu should be positioned
+		expect(menuContainer).toHaveStyle("position: fixed");
+	});
+
+	it("should adjust position when menu would overflow viewport right edge", () => {
+		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+
+		// Position near right edge with large X coordinate
+		const props = {
+			position: { x: window.innerWidth - 50, y: 200 },
+			options,
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		// Component should render without error
+		expect(screen.getByText("Edit")).toBeInTheDocument();
+	});
+
+	it("should adjust position when menu would overflow viewport bottom edge", () => {
+		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+
+		// Position near bottom edge with large Y coordinate
+		const props = {
+			position: { x: 100, y: window.innerHeight - 50 },
+			options,
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		// Component should render without error
+		expect(screen.getByText("Edit")).toBeInTheDocument();
+	});
+});
+
+describe("ContextMenu component events", () => {
+	it("should call action when option is clicked", () => {
+		const actionSpy = jest.fn();
+		const options: IActionMenuOption[] = [{ label: "Edit", action: actionSpy, icon: "edit" }];
+
+		const props = {
+			position: { x: 100, y: 200 },
+			options,
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		const editButton = screen.getByText("Edit");
+		fireEvent.click(editButton);
+
+		expect(actionSpy).toHaveBeenCalled();
+	});
+
+	it("should close menu and call onClose when option is clicked", () => {
+		const actionSpy = jest.fn();
+		const onCloseSpy = jest.fn();
+		const options: IActionMenuOption[] = [{ label: "Edit", action: actionSpy, icon: "edit" }];
+
+		const props = {
+			position: { x: 100, y: 200 },
+			options,
+			onClose: onCloseSpy,
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		const editButton = screen.getByText("Edit");
+		fireEvent.click(editButton);
+
+		expect(actionSpy).toHaveBeenCalled();
+		expect(onCloseSpy).toHaveBeenCalled();
+	});
+
+	it("should call onClose when clicking outside the menu", () => {
+		const onCloseSpy = jest.fn();
+		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+
+		const props = {
+			position: { x: 100, y: 200 },
+			options,
+			onClose: onCloseSpy,
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<div data-testid="outside">Outside content</div>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		const outsideElement = screen.getByTestId("outside");
+		fireEvent.click(outsideElement);
+
+		expect(onCloseSpy).toHaveBeenCalled();
+	});
+
+	it("should not call onClose when clicking inside the menu", () => {
+		const onCloseSpy = jest.fn();
+		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+
+		const props = {
+			position: { x: 100, y: 200 },
+			options,
+			onClose: onCloseSpy,
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		const editButton = screen.getByText("Edit");
+		fireEvent.mouseDown(editButton);
+
+		// onClose should not be called for clicks inside menu
+		// (only triggered by action click handler which then calls onClose)
+		expect(onCloseSpy).not.toHaveBeenCalled();
+	});
+
+	it("should handle multiple actions independently", () => {
+		const editSpy = jest.fn();
+		const deleteSpy = jest.fn();
+		const onCloseSpy = jest.fn();
+		const options: IActionMenuOption[] = [
+			{ label: "Edit", action: editSpy, icon: "edit" },
+			{ label: "Delete", action: deleteSpy, icon: "delete" },
+		];
+
+		const props = {
+			position: { x: 100, y: 200 },
+			options,
+			onClose: onCloseSpy,
+		};
+
+		const { rerender } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		const editButton = screen.getByText("Edit");
+		fireEvent.click(editButton);
+
+		expect(editSpy).toHaveBeenCalledTimes(1);
+		expect(deleteSpy).not.toHaveBeenCalled();
+		expect(onCloseSpy).toHaveBeenCalledTimes(1);
+
+		// Reset spies and rerender with position to simulate reopening
+		onCloseSpy.mockClear();
+		rerender(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		const deleteButton = screen.getByText("Delete");
+		fireEvent.click(deleteButton);
+
+		expect(deleteSpy).toHaveBeenCalledTimes(1);
+		expect(onCloseSpy).toHaveBeenCalled();
+	});
+});
+
+describe("ContextMenu component state transitions", () => {
+	it("should hide menu when position changes to null", () => {
+		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+
+		const { rerender, container } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu position={{ x: 100, y: 200 }} options={options} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByText("Edit")).toBeInTheDocument();
+
+		rerender(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu position={null} options={options} />
+			</ThemeProvider>,
+		);
+
+		expect(container.firstChild).toBe(null);
+	});
+
+	it("should reopen menu at new position", () => {
+		const options: IActionMenuOption[] = [{ label: "Edit", action: jest.fn(), icon: "edit" }];
+
+		const { rerender } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu position={{ x: 100, y: 200 }} options={options} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByText("Edit")).toBeInTheDocument();
+
+		rerender(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu position={null} options={options} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.queryByText("Edit")).not.toBeInTheDocument();
+
+		rerender(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu position={{ x: 300, y: 400 }} options={options} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByText("Edit")).toBeInTheDocument();
+	});
+
+	it("should update options without closing menu", () => {
+		const { rerender } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu position={{ x: 100, y: 200 }} options={[{ label: "Edit", action: jest.fn(), icon: "edit" }]} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByText("Edit")).toBeInTheDocument();
+
+		rerender(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu
+					position={{ x: 100, y: 200 }}
+					options={[
+						{ label: "Edit", action: jest.fn(), icon: "edit" },
+						{ label: "Delete", action: jest.fn(), icon: "delete" },
+					]}
+				/>
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByText("Edit")).toBeInTheDocument();
+		expect(screen.getByText("Delete")).toBeInTheDocument();
+	});
+});
+
+describe("ContextMenu component empty state", () => {
+	it("should render with empty options array", () => {
+		const props = {
+			position: { x: 100, y: 200 },
+			options: [] as IActionMenuOption[],
+		};
+
+		const { container } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ContextMenu {...props} />
+			</ThemeProvider>,
+		);
+
+		// Menu container should still render
+		expect(container.querySelector("div")).toBeTruthy();
+	});
+});

package/src/__tests__/components/FloatingMenu/FloatingMenu.test.tsx

@@ -129,7 +129,7 @@ describe("FloatingMenu component rendering", () => {
 				<FloatingMenu {...defaultProps} />
 			</ThemeProvider>,
 		);
-		fireEvent.mouseDown(document);
+		fireEvent.click(document);
 		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();
 	});
 
@@ -221,7 +221,7 @@ describe("FloatingMenu component rendering", () => {
 			</ThemeProvider>,
 		);
 
-		fireEvent.mouseDown(document);
+		fireEvent.click(document);
 
 		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
 	});
@@ -799,7 +799,7 @@ describe("FloatingMenu component rendering", () => {
 		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();
 
 		// Click outside — document is not inside wrapper
-		fireEvent.mouseDown(document);
+		fireEvent.click(document);
 
 		expect(actionOnClose).toHaveBeenCalledTimes(1);
 		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();

package/src/__tests__/components/FloatingPanel/FloatingPanel.test.tsx

@@ -112,7 +112,7 @@ describe("FloatingPanel component events trigger", () => {
 		const iconAction = screen.getByTestId("icon-action-component");
 		expect(iconAction).toBeTruthy();
 
-		fireEvent.mouseDown(document);
+		fireEvent.click(document);
 		expect(toggleModalMock).toBeCalled();
 		expect(handlePanelMock).toBeCalledWith(false);
 	});
@@ -142,7 +142,7 @@ describe("FloatingPanel component events trigger", () => {
 		const iconAction = screen.getByTestId("icon-action-component");
 		expect(iconAction).toBeTruthy();
 
-		fireEvent.mouseDown(document);
+		fireEvent.click(document);
 		expect(toggleModalMock).not.toBeCalled();
 		expect(handlePanelMock).not.toBeCalled();
 	});

package/src/__tests__/components/SideModal/SideModal.test.tsx

@@ -326,7 +326,7 @@ describe("SideModal component events", () => {
 			</ThemeProvider>,
 		);
 
-		map.mousedown({
+		map.click({
 			target: document.body,
 		});
 
@@ -348,7 +348,7 @@ describe("SideModal component events", () => {
 
 		const title = screen.getByTestId("side-modal-title");
 
-		map.mousedown({
+		map.click({
 			target: title,
 		});
 

package/src/__tests__/hooks/modals.test.tsx

@@ -1,7 +1,8 @@
 import { act, renderHook } from "@testing-library/react";
+
 import "@testing-library/jest-dom";
 
-import { useModal, useModals } from "@ax/hooks";
+import { useContextMenu, useModal, useModals } from "@ax/hooks";
 
 describe("useModal hook", () => {
 	beforeEach(() => {
@@ -301,3 +302,87 @@ describe("useModal and useModals working together", () => {
 		expect(document.body.classList.contains("modal-open")).toBe(false);
 	});
 });
+
+describe("useContextMenu hook", () => {
+	it("should initialize with contextMenu as null", () => {
+		const { result } = renderHook(() => useContextMenu());
+		expect(result.current.contextMenu).toBe(null);
+	});
+
+	it("should open context menu with coordinates when handleContextMenu is called", () => {
+		const { result } = renderHook(() => useContextMenu());
+
+		const mouseEvent = new MouseEvent("contextmenu", {
+			bubbles: true,
+			clientX: 100,
+			clientY: 200,
+		});
+
+		act(() => {
+			result.current.handleContextMenu(mouseEvent as any);
+		});
+
+		expect(result.current.contextMenu).toEqual({ x: 100, y: 200 });
+	});
+
+	it("should prevent default when handleContextMenu is called", () => {
+		const { result } = renderHook(() => useContextMenu());
+		const preventDefaultSpy = jest.fn();
+
+		const mouseEvent = {
+			preventDefault: preventDefaultSpy,
+			clientX: 50,
+			clientY: 75,
+		} as any;
+
+		act(() => {
+			result.current.handleContextMenu(mouseEvent);
+		});
+
+		expect(preventDefaultSpy).toHaveBeenCalled();
+	});
+
+	it("should close context menu when closeContextMenu is called", () => {
+		const { result } = renderHook(() => useContextMenu());
+
+		act(() => {
+			result.current.handleContextMenu({
+				preventDefault: jest.fn(),
+				clientX: 100,
+				clientY: 200,
+			} as any);
+		});
+
+		expect(result.current.contextMenu).not.toBe(null);
+
+		act(() => {
+			result.current.closeContextMenu();
+		});
+
+		expect(result.current.contextMenu).toBe(null);
+	});
+
+	it("should update position when handleContextMenu is called multiple times", () => {
+		const { result } = renderHook(() => useContextMenu());
+
+		act(() => {
+			result.current.handleContextMenu({
+				preventDefault: jest.fn(),
+				clientX: 100,
+				clientY: 200,
+			} as any);
+		});
+
+		expect(result.current.contextMenu).toEqual({ x: 100, y: 200 });
+
+		act(() => {
+			result.current.handleContextMenu({
+				preventDefault: jest.fn(),
+				clientX: 300,
+				clientY: 400,
+			} as any);
+		});
+
+		expect(result.current.contextMenu).toEqual({ x: 300, y: 400 });
+	});
+});

package/src/components/ActionMenu/index.tsx

@@ -3,17 +3,11 @@ import type { IActionMenuOption } from "@ax/types";
 
 import * as S from "./style";
 
-const ActionMenu = (props: IActionMenuProps): JSX.Element => {
-	const { options, icon, className, tooltip, size } = props;
+export const ActionMenuContent = (props: IActionMenuContentProps): JSX.Element => {
+	const { options, isContextMenu = true } = props;
 
 	const filteredOptions = options.filter((option: IActionMenuOption | undefined | null) => !!option);
 
-	const MoreInfoButton = () => (
-		<S.IconActionWrapper data-testid="more-info-button">
-			<IconAction icon={icon} size={size} />
-		</S.IconActionWrapper>
-	);
-
 	const ActionMenuItem = (item: IActionMenuOption) => (
 		<S.ActionItem
 			key={item.icon}
@@ -32,14 +26,30 @@ const ActionMenu = (props: IActionMenuProps): JSX.Element => {
 		</S.ActionItem>
 	);
 
+	return (
+		<S.ActionMenu isContextMenu={isContextMenu}>
+			{filteredOptions.map((item: IActionMenuOption | undefined | null) => item && ActionMenuItem(item))}
+		</S.ActionMenu>
+	);
+};
+
+const ActionMenu = (props: IActionMenuProps): JSX.Element => {
+	const { options, icon, className, tooltip, size } = props;
+
+	const filteredOptions = options.filter((option: IActionMenuOption | undefined | null) => !!option);
+
+	const MoreInfoButton = () => (
+		<S.IconActionWrapper data-testid="more-info-button">
+			<IconAction icon={icon} size={size} />
+		</S.IconActionWrapper>
+	);
+
 	return options.length > 0 ? (
 		<S.Wrapper className={className} data-testid="action-menu-wrapper">
 			{filteredOptions.length > 0 && (
 				<Tooltip content={tooltip} hideOnClick>
 					<FloatingMenu Button={MoreInfoButton}>
-						<S.ActionMenu>
-							{filteredOptions.map((item: IActionMenuOption | undefined | null) => item && ActionMenuItem(item))}
-						</S.ActionMenu>
+						<ActionMenuContent options={options} isContextMenu={false} />
 					</FloatingMenu>
 				</Tooltip>
 			)}
@@ -57,4 +67,9 @@ export interface IActionMenuProps {
 	size?: "s" | "m";
 }
 
+export interface IActionMenuContentProps {
+	options: (IActionMenuOption | undefined | null)[];
+	isContextMenu?: boolean;
+}
+
 export default ActionMenu;

package/src/components/ActionMenu/style.tsx

@@ -1,43 +1,48 @@
 import styled from "styled-components";
 
-export const Wrapper = styled.div`
+const Wrapper = styled.div`
   position: relative;
 `;
 
-export const IconActionWrapper = styled.div`
+const IconActionWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
 `;
 
-export const ActionMenu = styled.ul`
+const ActionMenu = styled.ul<{ isContextMenu: boolean }>`
   padding: 0;
   cursor: pointer;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border-radius: ${(p) => p.theme.radii.s};
+  padding: ${(p) => (p.isContextMenu ? `${p.theme.spacing.xs} 0` : "0")};
+  max-width: ${(p) => `calc(${p.theme.spacing.l} * 5)`};
+  min-width: ${(p) => `calc(${p.theme.spacing.m} * 7)`};
 `;
 
-export const ActionText = styled.div`
+const ActionText = styled.div`
   padding-left: ${(p) => p.theme.spacing.xs};
   margin-left: ${(p) => p.theme.spacing.xxs};
 `;
 
-export const Label = styled.div`
+const Label = styled.div`
   &:first-letter {
     text-transform: capitalize;
   }
 `;
 
-export const HelpText = styled.div`
+const HelpText = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
   white-space: normal;
   width: 180px;
 `;
 
-export const IconWrapper = styled.div`
+const IconWrapper = styled.div`
   height: ${(p) => p.theme.spacing.m};
   width: ${(p) => p.theme.spacing.m};
 `;
 
-export const ActionItem = styled.li<{ disabled?: boolean; color?: boolean }>`
+const ActionItem = styled.li<{ disabled?: boolean; color?: boolean }>`
   display: flex;
   align-items: flex-start;
   ${(p) => p.theme.textStyle.uiM};
@@ -62,3 +67,5 @@ export const ActionItem = styled.li<{ disabled?: boolean; color?: boolean }>`
     }
   }
 `;
+
+export { Wrapper, IconActionWrapper, ActionMenu, ActionText, Label, HelpText, IconWrapper, ActionItem };