@griddo/ax 12.1.0 → 12.2.0-rc.0

package/src/components/ContextMenu/index.tsx

@@ -0,0 +1,102 @@
+import { useLayoutEffect, useRef, useState } from "react";
+
+import { ActionMenuContent } from "@ax/components";
+import { useHandleClickOutside } from "@ax/hooks";
+import type { IActionMenuOption } from "@ax/types";
+
+import * as S from "./style";
+
+const ContextMenu = (props: IContextMenuProps): JSX.Element | null => {
+	const { position, options, onClose } = props;
+	const menuRef = useRef<HTMLDivElement>(null);
+	const [adjustedPosition, setAdjustedPosition] = useState<{ x: number; y: number } | null>(null);
+	const [isVisible, setIsVisible] = useState(false);
+
+	// Maneja los clicks fuera del menú para cerrarlo
+	const handleClickOutside = (event: MouseEvent) => {
+		// No cerrar si el click fue dentro del menú
+		if (menuRef.current?.contains(event.target as Node)) {
+			return;
+		}
+
+		event.stopPropagation();
+		onClose?.();
+	};
+
+	useHandleClickOutside(!!position, handleClickOutside);
+
+	useLayoutEffect(() => {
+		if (!position || !menuRef.current) {
+			setAdjustedPosition(null);
+			setIsVisible(false);
+			return;
+		}
+
+		const calculatePosition = () => {
+			const menuRect = menuRef.current?.getBoundingClientRect();
+			if (!menuRect || menuRect.width === 0 || menuRect.height === 0) return;
+
+			const viewportWidth = window.innerWidth;
+			const viewportHeight = window.innerHeight;
+			const padding = 8;
+
+			let x = position.x;
+			let y = position.y;
+
+			// Ajustar si se sale por la derecha
+			if (x + menuRect.width > viewportWidth - padding) {
+				x = viewportWidth - menuRect.width - padding;
+			}
+
+			// Ajustar si se sale por abajo
+			if (y + menuRect.height > viewportHeight - padding) {
+				y = viewportHeight - menuRect.height - padding;
+			}
+
+			// Asegurar que no esté fuera de los bordes izquierdo y superior
+			x = Math.max(padding, x);
+			y = Math.max(padding, y);
+
+			setAdjustedPosition({ x, y });
+			setIsVisible(true);
+		};
+
+		calculatePosition();
+	}, [position]);
+
+	if (!position) return null;
+
+	const handleActionClick = (action: () => void) => {
+		return () => {
+			action();
+			onClose?.();
+		};
+	};
+
+	const wrappedOptions = options.map((option) => {
+		if (!option) return null;
+		return {
+			...option,
+			action: handleActionClick(option.action),
+		};
+	});
+
+	return (
+		<S.ContextMenuContainer
+			ref={menuRef}
+			x={adjustedPosition?.x ?? 0}
+			y={adjustedPosition?.y ?? 0}
+			isVisible={isVisible}
+		>
+			<ActionMenuContent options={wrappedOptions} />
+		</S.ContextMenuContainer>
+	);
+};
+
+interface IContextMenuProps {
+	position: { x: number; y: number } | null;
+	options: (IActionMenuOption | undefined | null)[];
+	onClose?: () => void;
+}
+
+export default ContextMenu;

package/src/components/ContextMenu/style.tsx

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+const ContextMenuContainer = styled.div<{ x: number; y: number; isVisible: boolean }>`
+	position: fixed;
+	top: ${(p) => p.y}px;
+	left: ${(p) => p.x}px;
+	z-index: 1000;
+	box-shadow: ${(p) => p.theme.shadow.shadowL};
+	visibility: ${(p) => (p.isVisible ? "visible" : "hidden")};
+	opacity: ${(p) => (p.isVisible ? 1 : 0)};
+	transition: opacity 0.1s ease-in-out;
+	border-radius: ${(p) => p.theme.radii.s};
+`;
+
+export { ContextMenuContainer };

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

@@ -1,8 +1,8 @@
 import type React from "react";
 
-import { CheckField, Icon, SideModal } from "@ax/components";
+import { CheckField, ContextMenu, Icon, SideModal } from "@ax/components";
 import { getDisplayName, isEmptyContainer, trimText } from "@ax/helpers";
-import { useModal } from "@ax/hooks";
+import { useContextMenu, useModal } from "@ax/hooks";
 import type { ICheck, IComponent, ModuleCategoryInfo } from "@ax/types";
 
 import { useSortable } from "@dnd-kit/sortable";
@@ -48,6 +48,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
 		actions || {};
 
 	const { isOpen, toggleModal } = useModal();
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
 		id: editorID,
@@ -180,6 +181,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
 				disabled={disabled}
 				className={`editorId-${editorID} ${className}`}
 				onClick={handleClick}
+				onContextMenu={handleContextMenu}
 				isActive={isActive}
 				cssTransform={transform}
 				transition={transition}
@@ -231,6 +233,11 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
 					theme={theme}
 				/>
 			)}
+			<ContextMenu
+				position={contextMenu}
+				options={isArray ? actionArrayMenuOptions : actionMenuOptions}
+				onClose={closeContextMenu}
+			/>
 		</>
 	);
 };

package/src/components/FloatingMenu/index.tsx

@@ -1,5 +1,5 @@
 import type React from "react";
-import { useCallback, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { type ReactNode, useCallback, useLayoutEffect, useRef, useState } from "react";
 
 import { useHandleClickOutside } from "@ax/hooks";
 

package/src/components/FloatingMenu/style.tsx

@@ -41,7 +41,7 @@ const Menu = styled.div<{ hasMargin: boolean; width?: number }>`
   min-width: ${(p) => `calc(${p.theme.spacing.m} * 7)`};
   background: ${(p) => p.theme.color.uiBackground02};
   box-shadow: ${(p) => p.theme.shadow.shadowL};
-  border-radius: ${(p) => p.theme.spacing.xxs};
+  border-radius: ${(p) => p.theme.radii.s};
 `;
 
 export { Wrapper, ButtonWrapper, MenuWrapper, Menu };

package/src/components/index.tsx

@@ -1,4 +1,4 @@
-import ActionMenu from "./ActionMenu";
+import ActionMenu, { ActionMenuContent } from "./ActionMenu";
 import Avatar from "./Avatar";
 import BackFolder from "./BackFolder";
 import Breadcrumb from "./Breadcrumb";
@@ -10,6 +10,7 @@ import CategoryCell from "./CategoryCell";
 import Circle from "./Circle";
 import ContentItem from "./ContentItem";
 import ConfigPanel from "./ConfigPanel";
+import ContextMenu from "./ContextMenu";
 import DragAndDrop from "./DragAndDrop";
 import ElementsTooltip from "./ElementsTooltip";
 import EmptyState from "./EmptyState";
@@ -133,6 +134,7 @@ import UserRolesAndSites from "./UserRolesAndSites";
 
 export {
 	ActionMenu,
+	ActionMenuContent,
 	AIReferenceField,
 	ArrayFieldGroup,
 	AsyncCheckGroup,
@@ -156,6 +158,7 @@ export {
 	ContentItem,
 	ConditionalField,
 	ConfigPanel,
+	ContextMenu,
 	CustomizeFilters,
 	DateField,
 	DateFilter,

package/src/hooks/index.tsx

@@ -10,7 +10,7 @@ import {
 } from "./forms";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
 import { useURLSearchParam } from "./location";
-import { useHandleClickOutside, useModal, useModals, useToast } from "./modals";
+import { useContextMenu, useHandleClickOutside, useModal, useModals, useToast } from "./modals";
 import { useNetworkStatus } from "./network";
 import { useResizable } from "./resize";
 import { useGlobalPermission, usePermission, usePermissions, usePermissionsForPage, usePermissionsForSite } from "./users";
@@ -20,6 +20,7 @@ export {
 	useAdaptiveText,
 	useBulkSelection,
 	useCategoryColors,
+	useContextMenu,
 	useDebounce,
 	useDebouncedCallback,
 	useEmptyState,

package/src/hooks/modals.tsx

@@ -84,13 +84,13 @@ const useModals = <T extends string>(modalKeys: readonly T[], bodyBlock = true)
 const useHandleClickOutside = (isOpen: boolean, handleClickOutside: (e: MouseEvent) => void) => {
 	useEffect(() => {
 		if (isOpen) {
-			document.addEventListener("mousedown", handleClickOutside);
+			document.addEventListener("click", handleClickOutside, true);
 		} else {
-			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("click", handleClickOutside, true);
 		}
 
 		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("click", handleClickOutside, true);
 		};
 	}, [isOpen, handleClickOutside]);
 };
@@ -126,4 +126,51 @@ const useToast = () => {
 	return { isVisible, setIsVisible, toggleToast, state };
 };
 
-export { useModal, useModals, useHandleClickOutside, useToast };
+const useContextMenu = () => {
+	const [contextMenu, setContextMenu] = useState<IContextMenuPosition | null>(null);
+
+	const closeContextMenu = useCallback(() => {
+		setContextMenu(null);
+	}, []);
+
+	const handleContextMenu = (e: React.MouseEvent) => {
+		e.preventDefault();
+		setContextMenu({ x: e.clientX, y: e.clientY });
+	};
+
+	// Registra este context menu como el activo y cierra el anterior si existe
+	useEffect(() => {
+		if (contextMenu) {
+			const unregister = registerContextMenu(closeContextMenu);
+			return unregister;
+		}
+	}, [contextMenu, closeContextMenu]);
+
+	return {
+		contextMenu,
+		handleContextMenu,
+		closeContextMenu,
+	};
+};
+
+let activeContextMenuClose: (() => void) | null = null;
+
+const registerContextMenu = (onClose: () => void) => {
+	if (activeContextMenuClose) {
+		activeContextMenuClose();
+	}
+	activeContextMenuClose = onClose;
+
+	return () => {
+		if (activeContextMenuClose === onClose) {
+			activeContextMenuClose = null;
+		}
+	};
+};
+
+interface IContextMenuPosition {
+	x: number;
+	y: number;
+}
+
+export { useModal, useModals, useHandleClickOutside, useToast, useContextMenu };

package/src/modules/Analytics/DimensionItem/index.tsx

@@ -1,6 +1,6 @@
-import { Modal } from "@ax/components";
+import { Modal, ContextMenu } from "@ax/components";
 import { splitAndJoin, trimText } from "@ax/helpers";
-import { useModal } from "@ax/hooks";
+import { useModal, useContextMenu } from "@ax/hooks";
 import type { IDimension } from "@ax/types";
 
 import DimensionPanel from "../DimensionPanel";
@@ -12,6 +12,7 @@ const Item = (props: IProps): JSX.Element => {
 
 	const { isOpen, toggleModal } = useModal();
 	const { isOpen: isRemoveOpen, toggleModal: toggleRemoveModal } = useModal();
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const handleClick = () => toggleModal();
 
@@ -36,7 +37,7 @@ const Item = (props: IProps): JSX.Element => {
 
 	return (
 		<>
-			<S.Component onClick={handleClick}>
+			<S.Component onClick={handleClick} onContextMenu={handleContextMenu}>
 				<S.Name>{item.name}</S.Name>
 				<S.Values>{trimText(valuesText, 70)}</S.Values>
 				<S.StyledActionMenu icon="more" options={dimensionOptions} tooltip="Dimension actions" />
@@ -59,6 +60,7 @@ const Item = (props: IProps): JSX.Element => {
 					</p>
 				</S.ModalContent>
 			</Modal>
+			<ContextMenu position={contextMenu} options={dimensionOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Analytics/GroupItem/index.tsx

@@ -1,6 +1,6 @@
-import { Modal } from "@ax/components";
+import { Modal, ContextMenu } from "@ax/components";
 import { splitAndJoin } from "@ax/helpers";
-import { useModal } from "@ax/hooks";
+import { useModal, useContextMenu } from "@ax/hooks";
 import type { IDimension, IDimensionsGroup } from "@ax/types";
 
 import GroupPanel from "../GroupPanel";
@@ -12,6 +12,7 @@ const Item = (props: IProps): JSX.Element => {
 
 	const { isOpen, toggleModal } = useModal();
 	const { isOpen: isRemoveOpen, toggleModal: toggleRemoveModal } = useModal();
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const handleClick = () => toggleModal();
 
@@ -36,7 +37,7 @@ const Item = (props: IProps): JSX.Element => {
 
 	return (
 		<>
-			<S.Component onClick={handleClick}>
+			<S.Component onClick={handleClick} onContextMenu={handleContextMenu}>
 				<S.Name>{item.name}</S.Name>
 				<S.ComponentInfo>
 					<S.Values>
@@ -70,6 +71,7 @@ const Item = (props: IProps): JSX.Element => {
 					</p>
 				</S.ModalContent>
 			</Modal>
+			<ContextMenu position={contextMenu} options={groupOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Categories/CategoriesList/CategoryItem/index.tsx

@@ -3,10 +3,10 @@ import { useState } from "react";
 import { connect } from "react-redux";
 
 import { structuredData } from "@ax/api";
-import { CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tag, TruncatedTooltip } from "@ax/components";
+import { CheckField, ContextMenu, Flag, FloatingMenu, Icon, LanguageMenu, Tag, TruncatedTooltip } from "@ax/components";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { isReqOk } from "@ax/helpers";
-import { useModals, usePermissions } from "@ax/hooks";
+import { useContextMenu, useModals, usePermissions } from "@ax/hooks";
 import type { ICategoryGroup, ICheck, IDataLanguage, ILanguage, IRootState, IStructuredDataCategory } from "@ax/types";
 
 import { type AnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
@@ -39,6 +39,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 	} = props;
 
 	const { isOpen, toggleModal } = useModals(["panel", "delete", "group"]);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 	const [deleteGroupCategories, setDeleteGroupCategories] = useState(false);
 	const [translation, setTranslation] = useState<{
 		lang: { locale: string; id: number };
@@ -190,6 +191,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 				<S.CategoryRow
 					selected={isSelected}
 					onClick={handleClick}
+					onContextMenu={handleContextMenu}
 					ref={setDraggableNodeRef}
 					cssTransform={transform}
 					transition={transition}
@@ -273,6 +275,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 					isLoading={isSaving}
 				/>
 			)}
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Content/PageItem/index.tsx

@@ -1,7 +1,17 @@
 import { useState } from "react";
 import { connect } from "react-redux";
 
-import { CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tag, Tooltip, TruncatedTooltip } from "@ax/components";
+import {
+	CheckField,
+	ContextMenu,
+	Flag,
+	FloatingMenu,
+	Icon,
+	LanguageMenu,
+	Tag,
+	Tooltip,
+	TruncatedTooltip,
+} from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { type ISetCurrentPageIDAction, pageStatus } from "@ax/containers/PageEditor/interfaces";
@@ -12,7 +22,7 @@ import {
 	getTemplateDisplayName,
 	slugify,
 } from "@ax/helpers";
-import { useModals, usePermissionsForPage } from "@ax/hooks";
+import { useContextMenu, useModals, usePermissionsForPage } from "@ax/hooks";
 import type {
 	ICheck,
 	IColumn,
@@ -94,6 +104,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 	const [site, setSite] = useState(null);
 	const [modalState, setModalState] = useState(initValue);
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 	const { toggleModal, isOpen } = useModals(["duplicate", "remove", "unpublish", "delete", "copy"]);
 
 	const isAllowedTo = usePermissionsForPage(
@@ -465,7 +476,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
 	return (
 		<>
-			<S.PageRow role="rowgroup" selected={isSelected} global={isGlobal}>
+			<S.PageRow role="rowgroup" selected={isSelected} global={isGlobal} onContextMenu={handleContextMenu}>
 				<S.CheckCell role="cell">
 					<CheckField name="check" value={page.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
 				</S.CheckCell>
@@ -555,6 +566,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 				onDelete={handleDeleteItem}
 				{...{ isTranslated, deleteAllVersions, setDeleteAllVersions, title: page.title, isDeleting: isSaving }}
 			/>
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/FileDrive/FolderItem/index.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
 import { connect } from "react-redux";
 
-import { Icon, Tooltip } from "@ax/components";
+import { ContextMenu, Icon, Tooltip } from "@ax/components";
 import { fileDriveActions } from "@ax/containers/FileDrive";
 import { trimText } from "@ax/helpers";
-import { useModals } from "@ax/hooks";
+import { useContextMenu, useModals } from "@ax/hooks";
 import type { IActionMenuOption, IFolder, IRootState } from "@ax/types";
 
 import { DeleteFolderModal, MoveItemModal, RenameFolderModal } from "../atoms";
@@ -28,6 +28,7 @@ const FolderItem = (props: IProps) => {
 	const initState = { folderName, parentId };
 	const [folderForm, setFolderForm] = useState(initState);
 	const { isOpen, toggleModal } = useModals(["delete", "rename", "move"]);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const setName = (name: string) => setFolderForm({ ...folderForm, folderName: name });
 	const setParent = (folderID: number) => setFolderForm({ ...folderForm, parentId: folderID });
@@ -102,7 +103,7 @@ const FolderItem = (props: IProps) => {
 
 	return (
 		<>
-			<S.Wrapper onClick={handleClick}>
+			<S.Wrapper onClick={handleClick} onContextMenu={handleContextMenu}>
 				<S.IconWrapper>
 					<Icon name="project" size="24" />
 				</S.IconWrapper>
@@ -141,6 +142,7 @@ const FolderItem = (props: IProps) => {
 					isMoving={isSaving}
 				/>
 			)}
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/FileDrive/GridItem/index.tsx

@@ -1,9 +1,9 @@
 import type React from "react";
 import { useState } from "react";
 
-import { CheckField, Tag, Tooltip } from "@ax/components";
+import { CheckField, ContextMenu, Tag, Tooltip } from "@ax/components";
 import { formatBytes, getFileIcon, getFormattedDateWithTimezone, trimText } from "@ax/helpers";
-import { useModals } from "@ax/hooks";
+import { useContextMenu, useModals } from "@ax/hooks";
 import type { IActionMenuOption, ICheck, IFile } from "@ax/types";
 
 import { DeleteFileModal, MoveItemModal } from "../atoms";
@@ -31,6 +31,7 @@ const GridItem = (props: IProps) => {
 	const [selectedFolder, setSelectedFolder] = useState<number>(currentFolderID || 0);
 	const [isDeleting, setIsDeleting] = useState(false);
 	const { isOpen, toggleModal } = useModals(["delete", "move"]);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const handleChange = (value: ICheck) => onChange(value);
 	const handleClick = () => onClick(file);
@@ -117,7 +118,7 @@ const GridItem = (props: IProps) => {
 
 	return (
 		<>
-			<S.Wrapper onClick={handleClick} isTall={isSearching}>
+			<S.Wrapper onClick={handleClick} onContextMenu={handleContextMenu} isTall={isSearching}>
 				<S.Header>
 					<S.CheckWrapper onClick={handleCheckClick}>
 						<CheckField name="check" value={id} checked={isSelected} onChange={handleChange} />
@@ -158,6 +159,7 @@ const GridItem = (props: IProps) => {
 					isMoving={isSaving}
 				/>
 			)}
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/FileDrive/ListItem/index.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 
-import { CheckField, ElementsTooltip, Tag, Tooltip } from "@ax/components";
+import { CheckField, ContextMenu, ElementsTooltip, Tag, Tooltip } from "@ax/components";
 import { formatBytes, getFileIcon, getFormattedDateWithTimezone, trimText } from "@ax/helpers";
-import { useModals } from "@ax/hooks";
+import { useContextMenu, useModals } from "@ax/hooks";
 import type { IActionMenuOption, ICheck, IFile } from "@ax/types";
 
 import { DeleteFileModal, MoveItemModal } from "../atoms";
@@ -30,6 +30,7 @@ const ListItem = (props: IProps) => {
 	const [selectedFolder, setSelectedFolder] = useState<number>(currentFolderID || 0);
 	const [isDeleting, setIsDeleting] = useState(false);
 	const { isOpen, toggleModal } = useModals(["delete", "move"]);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const handleChange = (value: ICheck) => onChange(value);
 	const handleClick = () => onClick(file);
@@ -109,7 +110,7 @@ const ListItem = (props: IProps) => {
 
 	return (
 		<>
-			<S.ItemRow role="rowgroup" selected={isSelected}>
+			<S.ItemRow role="rowgroup" selected={isSelected} onContextMenu={handleContextMenu}>
 				<S.CheckCell role="cell">
 					<CheckField name="check" value={id} checked={isSelected || hoverCheck} onChange={handleChange} />
 				</S.CheckCell>
@@ -170,6 +171,7 @@ const ListItem = (props: IProps) => {
 					isMoving={isSaving}
 				/>
 			)}
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Forms/FormCategoriesList/CategoryItem/index.tsx

@@ -1,9 +1,9 @@
 import type React from "react";
 import { connect } from "react-redux";
 
-import { CheckField, Icon, TruncatedTooltip } from "@ax/components";
+import { CheckField, ContextMenu, Icon, TruncatedTooltip } from "@ax/components";
 import { formsActions } from "@ax/containers/Forms";
-import { useModals, usePermissions } from "@ax/hooks";
+import { useContextMenu, useModals, usePermissions } from "@ax/hooks";
 import type { FormCategory, ICheck, IRootState } from "@ax/types";
 
 import { useSortable } from "@dnd-kit/sortable";
@@ -27,6 +27,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 	} = props;
 
 	const { isOpen, toggleModal } = useModals(["edit", "delete"]);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const isAllowedTo = usePermissions({
 		editSiteCategory: "forms.editFormsCategories",
@@ -78,6 +79,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 			<S.CategoryRow
 				selected={isSelected}
 				onClick={handleClick}
+				onContextMenu={handleContextMenu}
 				ref={setNodeRef}
 				cssTransform={transform}
 				transition={transition}
@@ -121,6 +123,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 				onDelete={removeCategory}
 				isDeleting={isSaving}
 			/>
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Forms/FormList/FormItem/index.tsx

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import {
 	CategoryCell,
 	CheckField,
+	ContextMenu,
 	Flag,
 	FloatingMenu,
 	Icon,
@@ -16,7 +17,7 @@ import { appActions } from "@ax/containers/App";
 import { formsActions } from "@ax/containers/Forms";
 import { findFieldsErrors } from "@ax/forms";
 import { findObjectValue, getHumanLastModifiedDate } from "@ax/helpers";
-import { useModals, usePermissions } from "@ax/hooks";
+import { useContextMenu, useModals, usePermissions } from "@ax/hooks";
 import type {
 	FormContent,
 	FormLanguage,
@@ -74,6 +75,7 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 	const [duplicateTitle, setDuplicateTitle] = useState("");
 	const [site, setSite] = useState<number | null>(null);
 	const { isOpen, toggleModal } = useModals(["delete", "unpublish", "duplicate", "copy", "use"]);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const isAllowedTo = usePermissions({
 		createForms: isSiteView ? "forms.createForms" : "global.forms.createForms",
@@ -260,7 +262,7 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 
 	return (
 		<>
-			<S.FormRow role="rowgroup" selected={isSelected} onClick={handleClick} clickable={isAllowedTo.editForms}>
+			<S.FormRow role="rowgroup" selected={isSelected} onClick={handleClick} onContextMenu={handleContextMenu} clickable={isAllowedTo.editForms}>
 				<S.CheckCell role="cell" onClick={handleCheckClick}>
 					<CheckField name={`form-${id}`} value={id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
 				</S.CheckCell>
@@ -322,6 +324,7 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 					formInUse={formInUse}
 				/>
 			)}
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/MediaGallery/FolderItem/index.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
 import { connect } from "react-redux";
 
-import { Icon, Tooltip } from "@ax/components";
+import { ContextMenu, Icon, Tooltip } from "@ax/components";
 import { galleryActions } from "@ax/containers/Gallery";
 import { trimText } from "@ax/helpers";
-import { useModals } from "@ax/hooks";
+import { useContextMenu, useModals } from "@ax/hooks";
 import type { IActionMenuOption, IFolder, IGetFolderParams, IRootState } from "@ax/types";
 
 import { DeleteFolderModal, MoveItemModal, RenameFolderModal } from "../atoms";
@@ -29,6 +29,7 @@ const FolderItem = (props: IProps) => {
 	const initState = { folderName, parentId };
 	const [folderForm, setFolderForm] = useState(initState);
 	const { isOpen, toggleModal } = useModals(["delete", "rename", "move"]);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const setName = (name: string) => setFolderForm({ ...folderForm, folderName: name });
 	const setParent = (folderID: number) => setFolderForm({ ...folderForm, parentId: folderID });
@@ -104,7 +105,7 @@ const FolderItem = (props: IProps) => {
 
 	return (
 		<>
-			<S.Wrapper onClick={handleClick}>
+			<S.Wrapper onClick={handleClick} onContextMenu={handleContextMenu}>
 				<S.IconWrapper>
 					<Icon name="project" size="24" />
 				</S.IconWrapper>
@@ -143,6 +144,7 @@ const FolderItem = (props: IProps) => {
 					isMoving={isSaving}
 				/>
 			)}
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };