@griddo/ax 12.1.0 → 12.2.0-rc.0

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

@@ -1,8 +1,8 @@
 import type React from "react";
 import { useState } from "react";
 
-import { Icon } from "@ax/components";
-import { useModals } from "@ax/hooks";
+import { ContextMenu, Icon } from "@ax/components";
+import { useContextMenu, useModals } from "@ax/hooks";
 import type { IActionMenuOption, ICheck, IImage } from "@ax/types";
 
 import { DeleteFileModal, MoveItemModal } from "../atoms";
@@ -28,6 +28,7 @@ const GridItem = (props: IProps) => {
 
 	const [selectedFolder, setSelectedFolder] = useState<number | null>(currentFolderID || null);
 	const { isOpen, toggleModal } = useModals(["delete", "move"]);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const handleCheckClick = (isChecked: boolean) => (e: React.MouseEvent<HTMLDivElement>) => {
 		e.stopPropagation();
@@ -90,7 +91,7 @@ const GridItem = (props: IProps) => {
 
 	return (
 		<>
-			<S.ImageWrapper data-testid="image-item" onClick={handleClick} selected={isSelected}>
+			<S.ImageWrapper data-testid="image-item" onClick={handleClick} onContextMenu={handleContextMenu} selected={isSelected}>
 				<img src={thumb} alt={alt} />
 				<S.IconWrapper onClick={handleCheckClick(!isSelected)}>
 					<Icon name={isSelected ? "successSolid" : "emptyCheck"} size="24" />
@@ -117,6 +118,7 @@ const GridItem = (props: IProps) => {
 					isMoving={isSaving}
 				/>
 			)}
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

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

@@ -1,8 +1,8 @@
 import { useState } from "react";
 
-import { CheckField, ElementsTooltip, Tooltip } from "@ax/components";
+import { CheckField, ContextMenu, ElementsTooltip, Tooltip } from "@ax/components";
 import { formatBytes, getFileExtension, trimText } from "@ax/helpers";
-import { useModals } from "@ax/hooks";
+import { useContextMenu, useModals } from "@ax/hooks";
 import type { IActionMenuOption, ICheck, IImage } from "@ax/types";
 
 import { DeleteFileModal, MoveItemModal } from "../atoms";
@@ -29,6 +29,7 @@ const ListItem = (props: IProps) => {
 
 	const [selectedFolder, setSelectedFolder] = useState<number | null>(currentFolderID || null);
 	const { isOpen, toggleModal } = useModals(["delete", "move"]);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const handleChange = (value: ICheck) => onChange(value);
 	const handleClick = () => onClick(image);
@@ -89,7 +90,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>
@@ -147,6 +148,7 @@ const ListItem = (props: IProps) => {
 					isMoving={isSaving}
 				/>
 			)}
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Navigation/Defaults/Item/index.tsx

@@ -1,9 +1,9 @@
 import { connect } from "react-redux";
 
-import { CheckField } from "@ax/components";
+import { CheckField, ContextMenu } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { menuActions, navigationActions } from "@ax/containers/Navigation";
-import { useModals, usePermissions } from "@ax/hooks";
+import { useContextMenu, useModals, usePermissions } from "@ax/hooks";
 import type { ICheck, ILanguage, INavigation, INavigationLanguage, IRootState } from "@ax/types";
 
 import { DeleteModal, RenameModal, SetDefaultModal } from "../atoms";
@@ -36,6 +36,7 @@ const DefaultItem = (props: IProps): JSX.Element => {
 	} = props;
 
 	const { isOpen, toggleModal } = useModals(["rename", "default", "delete"]);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const { locale } = lang;
 	const { navigationLanguages, type } = defaultContent;
@@ -152,7 +153,7 @@ const DefaultItem = (props: IProps): JSX.Element => {
 
 	return (
 		<>
-			<S.DefaultRow role="rowgroup" selected={isSelected} clickable={isAllowedToEdit}>
+			<S.DefaultRow role="rowgroup" selected={isSelected} onContextMenu={handleContextMenu} clickable={isAllowedToEdit}>
 				<S.CheckCell role="cell">
 					<CheckField
 						name="check"
@@ -199,6 +200,7 @@ const DefaultItem = (props: IProps): JSX.Element => {
 				onDelete={handleDeleteConfirm}
 				isDeleting={isSaving}
 			/>
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Navigation/Menus/List/Table/Item/index.tsx

@@ -2,9 +2,9 @@ import type React from "react";
 import { useState } from "react";
 import { connect } from "react-redux";
 
-import { Icon, IconAction, Tooltip } from "@ax/components";
+import { ContextMenu, Icon, IconAction, Tooltip } from "@ax/components";
 import { menuActions } from "@ax/containers/Navigation";
-import { useModals, usePermission } from "@ax/hooks";
+import { useContextMenu, useModals, usePermission } from "@ax/hooks";
 import type { IMenuItem } from "@ax/types";
 
 import { type AnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
@@ -45,6 +45,7 @@ const Item = (props: IItemProps): JSX.Element => {
 
 	const { isOpen, toggleModal } = useModals(["sidePanel", "remove", "config"]);
 	const [isOpenedSecond, setIsOpenedSecond] = useState(false);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) => !(isSorting || wasDragging);
 
@@ -97,6 +98,7 @@ const Item = (props: IItemProps): JSX.Element => {
 			>
 				<S.Component
 					onClick={openModal}
+					onContextMenu={handleContextMenu}
 					isGroup={isGroupingElement}
 					ref={setDraggableNodeRef}
 					cssTransform={transform}
@@ -147,6 +149,7 @@ const Item = (props: IItemProps): JSX.Element => {
 				{isOpen("config") && <ConfigPanel isOpen={isOpen("config")} toggleModal={() => toggleModal("config")} />}
 			</S.Container>
 			<RemoveModal isOpen={isOpen("remove")} toggleModal={() => toggleModal("remove")} deleteItem={deleteItem} item={item} />
+			<ContextMenu position={contextMenu} options={actionMenuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Redirects/RedirectItem/index.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { connect } from "react-redux";
 
-import { CheckField, ElementsTooltip } from "@ax/components";
+import { CheckField, ContextMenu, ElementsTooltip } from "@ax/components";
 import { redirectsActions } from "@ax/containers/Redirects";
-import { useModals } from "@ax/hooks";
+import { useContextMenu, useModals } from "@ax/hooks";
 import type { ICheck, IRedirect, IRootState } from "@ax/types";
 
 import { format } from "date-fns";
@@ -30,6 +30,7 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 	} = props;
 
 	const { isOpen, toggleModal } = useModals(["edit", "delete"]);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 	const [isOpenedSecond, setIsOpenedSecond] = useState(false);
 
 	const toggleSecondaryPanel = () => setIsOpenedSecond(!isOpenedSecond);
@@ -84,7 +85,7 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 
 	return (
 		<>
-			<S.ItemRow role="rowgroup" selected={isSelected}>
+			<S.ItemRow role="rowgroup" selected={isSelected} onContextMenu={handleContextMenu}>
 				<S.CheckCell role="cell">
 					<CheckField
 						name="check"
@@ -131,6 +132,7 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 				onDelete={removeItem}
 				isDeleting={isSaving}
 			/>
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Settings/Integrations/IntegrationForm/VariableItem/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { useModal } from "@ax/hooks";
-import { Modal, Tooltip } from "@ax/components";
+import { useModal, useContextMenu } from "@ax/hooks";
+import { Modal, Tooltip, ContextMenu } from "@ax/components";
 import { IIntegrationVariable, ILanguage, IVariableLang } from "@ax/types";
 import { trimText } from "@ax/helpers";
 import VariablePanel from "../VariablePanel";
@@ -13,6 +13,7 @@ const VariableItem = (props: IProps): JSX.Element => {
 
 	const { isOpen, toggleModal } = useModal();
 	const { isOpen: isRemoveOpen, toggleModal: toggleRemoveModal } = useModal();
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const handleClick = () => toggleModal();
 
@@ -58,7 +59,7 @@ const VariableItem = (props: IProps): JSX.Element => {
 
 	return (
 		<>
-			<S.Component onClick={handleClick}>
+			<S.Component onClick={handleClick} onContextMenu={handleContextMenu}>
 				<S.Name>{item.variableName}</S.Name>
 				<VariableTitle />
 				<S.StyledActionMenu icon="more" options={variableOptions} tooltip="Variable actions" />
@@ -81,6 +82,7 @@ const VariableItem = (props: IProps): JSX.Element => {
 					</p>
 				</S.ModalContent>
 			</Modal>
+			<ContextMenu position={contextMenu} options={variableOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Settings/Integrations/IntegrationItem/CopyModal/index.tsx

@@ -26,6 +26,7 @@ const CopyModal = (props: ICopyModalProps): JSX.Element => {
 			mainAction={mainCopyModalAction}
 			size="S"
 			overflow="visible"
+			height="auto"
 		>
 			<S.ModalContent>
 				<S.Title>Select a site to copy this add-on.</S.Title>

package/src/modules/Settings/Integrations/IntegrationItem/index.tsx

@@ -1,12 +1,11 @@
-import { useState } from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 
 import { integrations } from "@ax/api";
-import { CheckField, Icon, Toast, ToggleField, Tooltip } from "@ax/components";
+import { CheckField, ContextMenu, Icon, Toast, ToggleField, Tooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { integrationsActions } from "@ax/containers/Integrations";
-import { useModals, usePermissions, useToast } from "@ax/hooks";
+import { useContextMenu, useModals, usePermissions, useToast } from "@ax/hooks";
 import type { ICheck, IIntegration, IRootState } from "@ax/types";
 
 import type { UniqueIdentifier } from "@dnd-kit/core";
@@ -32,6 +31,7 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 		isSaving,
 	} = props;
 
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 	const { isOpen, toggleModal } = useModals(["delete", "changeState", "copy"]);
 	const { isVisible: isVisibleCopy, toggleToast: toggleToastCopy, setIsVisible: setIsVisibleCopy } = useToast();
 
@@ -193,6 +193,7 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 				data-testid="integration-item-row"
 				disabled={!integration.editable}
 				onClick={handleClick}
+				onContextMenu={handleContextMenu}
 				clickable={isAllowedTo.manage}
 				ref={setNodeRef}
 				cssTransform={transform}
@@ -259,6 +260,7 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 			/>
 			<CopyModal isOpen={isOpen("copy")} hide={() => toggleModal("copy")} action={copyIntegration} />
 			{isVisibleCopy && <Toast {...copyToastProps} />}
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Settings/Languages/Table/Item/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { connect } from "react-redux";
 
-import { useModal, usePermission } from "@ax/hooks";
+import { ContextMenu, Flag } from "@ax/components";
+import { useContextMenu, useModal, usePermission } from "@ax/hooks";
 import { ILanguage, ISiteLanguage, IRootState, ISite } from "@ax/types";
 import { languagesActions } from "@ax/containers/Settings";
-import { Flag } from "@ax/components";
 import LanguagePanel from "../../LanguagePanel";
 
 import * as S from "./style";
@@ -19,6 +19,7 @@ const Item = (props: IItemProps): JSX.Element => {
 	const { isOpen, toggleModal } = useModal();
 	const isAllowedToEdit = usePermission("general.editLanguage");
 	const isAllowedToDelete = usePermission("general.deleteLanguages");
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const siteLanguage: ISiteLanguage = {
 		language: item.id,
@@ -51,7 +52,7 @@ const Item = (props: IItemProps): JSX.Element => {
 
 	return (
 		<>
-			<S.Component onClick={openModal} disabled={!isAllowedToEdit}>
+			<S.Component onClick={openModal} onContextMenu={handleContextMenu} disabled={!isAllowedToEdit}>
 				<S.FlagWrapper>
 					<Flag name={item.locale} />
 				</S.FlagWrapper>
@@ -60,6 +61,7 @@ const Item = (props: IItemProps): JSX.Element => {
 				<S.StyledActionMenu icon="more" options={menuOptions} />
 			</S.Component>
 			<LanguagePanel isOpen={isOpen} toggleModal={toggleModal} item={item} />
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Sites/SitesList/GridView/GridSiteItem/index.tsx

@@ -1,9 +1,10 @@
 import { connect } from "react-redux";
 
-import { FieldsBehavior, Icon, Modal, Tag, Tooltip } from "@ax/components";
+import { ContextMenu, FieldsBehavior, Icon, Modal, Tag, Tooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
 import { isDevelopment } from "@ax/helpers";
+import { useContextMenu } from "@ax/hooks";
 import type { IGetSitesParams, ISite } from "@ax/types";
 
 import { ItemName, ItemThumbnail, RepublishSiteModal } from "./../../atoms";
@@ -24,6 +25,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 		toggleToast,
 	} = props;
 	const { hidden } = site;
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const {
 		publishedState,
@@ -60,7 +62,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 
 	return (
 		<>
-			<S.SiteWrapper key={site.id} onClick={setSite} data-testid="grid-site-item">
+			<S.SiteWrapper key={site.id} onClick={setSite} onContextMenu={handleContextMenu} data-testid="grid-site-item">
 				<S.ImageContainer>
 					<Tooltip content={siteTooltip}>
 						<ItemThumbnail src={site.thumbnail} height={199} />
@@ -115,6 +117,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 			>
 				{isOpenPublish ? <S.ModalContent data-testid="publish-modal">{content}</S.ModalContent> : null}
 			</Modal>
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 			<RepublishSiteModal isOpen={isOpenRepublish} toggleModal={toggleRepublishModal} onRepublish={onRepublish} />
 		</>
 	);

package/src/modules/Sites/SitesList/ListView/ListSiteItem/index.tsx

@@ -1,9 +1,10 @@
 import { connect } from "react-redux";
 
-import { CheckField, FieldsBehavior, Icon, Modal, Tag, Tooltip } from "@ax/components";
+import { CheckField, ContextMenu, FieldsBehavior, Icon, Modal, Tag, Tooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
 import { getFormattedDateWithTimezone } from "@ax/helpers";
+import { useContextMenu } from "@ax/hooks";
 import type { ICheck, IGetSitesParams, ISite } from "@ax/types";
 
 import { ItemName, ItemThumbnail, RepublishSiteModal } from "./../../atoms";
@@ -28,6 +29,7 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 	} = props;
 
 	const { hidden } = site;
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const {
 		publishedState,
@@ -63,7 +65,7 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 
 	return (
 		<>
-			<S.SiteItemRow key={site.id} role="rowgroup" selected={isSelected} data-testid="list-site-item">
+			<S.SiteItemRow key={site.id} role="rowgroup" selected={isSelected} onContextMenu={handleContextMenu} data-testid="list-site-item">
 				<S.CheckCell role="cell">
 					<CheckField name="check" value={site.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
 				</S.CheckCell>
@@ -126,6 +128,7 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 				{isOpenPublish ? <S.ModalContent data-testid="publish-modal">{content}</S.ModalContent> : null}
 			</Modal>
 			<RepublishSiteModal isOpen={isOpenRepublish} toggleModal={toggleRepublishModal} onRepublish={() => null} />
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 
 import {
 	CheckField,
+	ContextMenu,
 	ElementsTooltip,
 	Flag,
 	FloatingMenu,
@@ -21,7 +22,7 @@ import {
 	getStructuredDataTitle,
 	trimText,
 } from "@ax/helpers";
-import { useModals, usePermissionsForPage } from "@ax/hooks";
+import { useContextMenu, useModals, usePermissionsForPage } from "@ax/hooks";
 import type {
 	IAvailableSites,
 	ICheck,
@@ -95,6 +96,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
 	const initValue = { title: "", slug: "" };
 	const [duplicateModalState, setDuplicateModalState] = useState(initValue);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 	const { isOpen, toggleModal } = useModals(["duplicate", "delete", "unpublish"]);
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 
@@ -386,7 +388,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
 	return (
 		<>
-			<S.StructuredDataRow role="rowgroup" selected={isSelected} disabled={!isEditable}>
+			<S.StructuredDataRow role="rowgroup" selected={isSelected} disabled={!isEditable} onContextMenu={handleContextMenu}>
 				<S.CheckCell role="cell">
 					<CheckField name="check" value={globalPage.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
 				</S.CheckCell>
@@ -448,6 +450,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 				isDeleting={isSaving}
 			/>
 			<UnpublishModal isOpen={isOpen("unpublish")} toggleModal={() => toggleModal("unpublish")} />
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { connect } from "react-redux";
 
-import { CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tooltip, TruncatedTooltip } from "@ax/components";
+import { CheckField, ContextMenu, Flag, FloatingMenu, Icon, LanguageMenu, Tooltip, TruncatedTooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import {
@@ -10,7 +10,7 @@ import {
 	getHumanLastModifiedDate,
 	getScheduleFormatDate,
 } from "@ax/helpers";
-import { useModal, usePermissionsForPage } from "@ax/hooks";
+import { useContextMenu, useModal, usePermissionsForPage } from "@ax/hooks";
 import type {
 	ICheck,
 	IColumn,
@@ -78,6 +78,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 
 	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const { locale } = lang;
 
@@ -237,7 +238,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 
 	return (
 		<>
-			<S.StructuredDataRow role="rowgroup" selected={isSelected} disabled={!isEditable}>
+			<S.StructuredDataRow role="rowgroup" selected={isSelected} disabled={!isEditable} onContextMenu={handleContextMenu}>
 				<S.CheckCell role="cell">
 					<CheckField
 						name="check"
@@ -279,6 +280,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 				onDelete={removeItem}
 				isDeleting={isSaving}
 			/>
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };

package/src/modules/Users/UserList/UserItem/index.tsx

@@ -1,9 +1,9 @@
 import { connect } from "react-redux";
 
-import { Avatar, CheckField, ElementsTooltip, Tag, Toast, Tooltip, TruncatedTooltip } from "@ax/components";
+import { Avatar, CheckField, ContextMenu, ElementsTooltip, Tag, Toast, Tooltip, TruncatedTooltip } from "@ax/components";
 import { usersActions } from "@ax/containers/Users";
 import { getDaysAgo } from "@ax/helpers";
-import { useModal, usePermission, useToast } from "@ax/hooks";
+import { useContextMenu, useModal, usePermission, useToast } from "@ax/hooks";
 import type { ICheck, IRole, IRootState, ISite, IUser } from "@ax/types";
 
 import { DeleteModal } from "../atoms";
@@ -31,6 +31,7 @@ const UserItem = (props: IUserItemProps): JSX.Element => {
 
 	const { isOpen, toggleModal } = useModal();
 	const { isVisible, toggleToast, setIsVisible } = useToast();
+	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
 	const isAllowedToRemoveUsers = usePermission("usersRoles.removeUsers");
 
@@ -141,7 +142,7 @@ const UserItem = (props: IUserItemProps): JSX.Element => {
 
 	return (
 		<>
-			<S.UserRow role="rowgroup" selected={isSelected} data-testid="user-item">
+			<S.UserRow role="rowgroup" selected={isSelected} onContextMenu={handleContextMenu} data-testid="user-item">
 				<S.CheckCell role="cell">
 					<CheckField
 						name={user.name}
@@ -208,6 +209,7 @@ const UserItem = (props: IUserItemProps): JSX.Element => {
 				isDeleting={isSaving}
 			/>
 			{isVisible && <Toast {...toastProps} />}
+			<ContextMenu position={contextMenu} options={menuOptions} onClose={closeContextMenu} />
 		</>
 	);
 };