odaptos_design_system 2.0.5 → 2.0.7

package/src/Molecules/Thematic/Thematic.tsx

@@ -1,458 +1,458 @@
-import React, { useState } from 'react';
-import styles from './Thematic.modules.scss';
-import {
-  Badge,
-  Tag,
-  IconButton,
-  AddTagIcon,
-  ArrowLineRightIcon,
-  BinIcon,
-  EditIcon,
-  Text,
-  colors,
-  Button,
-  TextInput,
-  Tooltip,
-} from '../../';
-import { Popover } from '@mui/material';
-import { colord } from 'colord';
-import { changeColorLuminance } from '../../utils/changeColorLuminance';
-import { getReadableTextColor } from '../../utils/getReadableTextColor';
-
-export interface ThematicProps {
-  thematicId: string;
-  name: string;
-  definition: string;
-  color: string;
-  tagsList: Array<{
-    name: string;
-    color: string;
-    amount: number;
-    definition?: string;
-  }>;
-  otherThematicsList?: Array<{
-    _id: string;
-    name: string;
-    color: string;
-  }>;
-  onClickValidateAddTag?: (thematicId: string, tag: Object) => void;
-  onClickValidateEditTag?: (thematicId: string, tag: Object) => void;
-  onSelectThematicToMoveTag?: (
-    currentThematicId: string,
-    tag: Object,
-    newThematicId: string
-  ) => void;
-  onClickDeleteTag?: (thematicId: string, tag: Object) => void;
-  onClickEditThematic?: (thematicId: string) => void;
-  onClickDeleteThematic?: (thematicId: string) => void;
-  cmsContent?: {
-    addTag: string;
-    validate: string;
-    edit: string;
-    moveTo: string;
-    delete: string;
-  };
-  isAddTagHidden?: boolean;
-  isEditThematicHidden?: boolean;
-  isDeleteThematicHidden?: boolean;
-}
-
-export const Thematic = ({
-  thematicId,
-  name,
-  definition,
-  color,
-  tagsList = [],
-  otherThematicsList = [],
-  onClickValidateAddTag,
-  onClickValidateEditTag,
-  onSelectThematicToMoveTag,
-  onClickDeleteTag,
-  onClickEditThematic,
-  onClickDeleteThematic,
-  cmsContent,
-  isAddTagHidden = false,
-  isEditThematicHidden = false,
-  isDeleteThematicHidden = false,
-}: ThematicProps) => {
-  const [areActionsVisible, setAreActionsVisible] = useState(false);
-  const [newTagName, setNewTagName] = useState('');
-  const [selectedTag, setSelectedTag] = useState<Object | null>(null);
-  const [editedTagName, setEditedTagName] = useState('');
-
-  //----------------- Popover states ----------------- //
-  const [isAddTagPopoverOpen, setIsAddTagPopoverOpen] = useState(false);
-  const [isTagMenuPopoverOpen, setIsTagMenuPopoverOpen] = useState(false);
-  const [isEditTagPopoverOpen, setIsEditTagPopoverOpen] = useState(false);
-  const [isMoveTagPopoverOpen, setIsMoveTagPopoverOpen] = useState(false);
-
-  const [addTagPopoverAnchorPosition, setAddTagPopoverAnchorPosition] =
-    useState<HTMLElement | null>(null);
-  const [tagMenuPopoverAnchorPosition, setTagMenuPopoverAnchorPosition] =
-    useState<HTMLElement | null>(null);
-  const [editTagPopoverAnchorPosition, setEditTagPopoverAnchorPosition] =
-    useState<HTMLElement | null>(null);
-  const [moveTagPopoverAnchorPosition, setMoveTagPopoverAnchorPosition] =
-    useState<HTMLElement | null>(null);
-
-  //----------------- Color Calculations ----------------- //
-  const thematicColor = colord(color);
-
-  let tagColor = thematicColor;
-
-  const backgroundColor = changeColorLuminance(thematicColor, 97);
-  const badgeColor = changeColorLuminance(thematicColor, 90);
-  const iconsColor = changeColorLuminance(thematicColor, 40);
-  const borderColor = getReadableTextColor(colord(backgroundColor));
-
-  // If the contrast between the thematic color and the background color is too low, change the color of the tags to make them darker
-  if (thematicColor.contrast(backgroundColor) < 1.25) {
-    tagColor = colord(changeColorLuminance(thematicColor, 90));
-  }
-
-  // ----------------- Popover functions ----------------- //
-  const openAddTagPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAddTagPopoverAnchorPosition(event.currentTarget);
-    setIsAddTagPopoverOpen(true);
-  };
-  const closeAddTagPopover = () => {
-    setAddTagPopoverAnchorPosition(null);
-    setIsAddTagPopoverOpen(false);
-  };
-
-  const openTagMenuPopover = (event: React.MouseEvent<HTMLDivElement>) => {
-    setTagMenuPopoverAnchorPosition(event.currentTarget);
-    setIsTagMenuPopoverOpen(true);
-  };
-  const closeTagMenuPopover = () => {
-    setTagMenuPopoverAnchorPosition(null);
-    setIsTagMenuPopoverOpen(false);
-  };
-
-  const openEditTagPopover = (event: React.MouseEvent<HTMLDivElement>) => {
-    setEditTagPopoverAnchorPosition(event.currentTarget);
-    setIsEditTagPopoverOpen(true);
-  };
-  const closeEditTagPopover = () => {
-    setEditTagPopoverAnchorPosition(null);
-    setIsEditTagPopoverOpen(false);
-    setIsTagMenuPopoverOpen(false);
-    setEditedTagName('');
-  };
-
-  const openMoveTagPopover = (event: React.MouseEvent<HTMLDivElement>) => {
-    setMoveTagPopoverAnchorPosition(event.currentTarget);
-    setIsMoveTagPopoverOpen(true);
-  };
-  const closeMoveTagPopover = () => {
-    setMoveTagPopoverAnchorPosition(null);
-    setIsMoveTagPopoverOpen(false);
-    setIsTagMenuPopoverOpen(false);
-  };
-
-  // ----------------- Event handlers ----------------- //
-  const handleOnClickAddTag = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    openAddTagPopover(e);
-  };
-
-  const handleOnClickValidateAddTag = () => {
-    if (onClickValidateAddTag) {
-      onClickValidateAddTag(thematicId, {
-        name: newTagName,
-        color: thematicColor.toHex(),
-        definition: '',
-      });
-      setNewTagName('');
-    }
-    setNewTagName('');
-    closeAddTagPopover();
-  };
-
-  const handleOnClickEditThematic = (
-    e: React.MouseEvent<HTMLButtonElement>
-  ) => {
-    e.stopPropagation();
-    if (onClickEditThematic) {
-      onClickEditThematic(thematicId);
-    }
-  };
-
-  const handleOnClickDeleteThematic = (
-    e: React.MouseEvent<HTMLButtonElement>
-  ) => {
-    e.stopPropagation();
-    if (onClickDeleteThematic) {
-      onClickDeleteThematic(thematicId);
-    }
-  };
-  const handleOnClickTag = (
-    e: React.MouseEvent<HTMLDivElement>,
-    tag: { name: string }
-  ) => {
-    e.stopPropagation();
-    setSelectedTag(tag);
-    setEditedTagName(tag.name);
-    openTagMenuPopover(e);
-  };
-
-  const handleOnClickEditTag = (e: React.MouseEvent<HTMLDivElement>) => {
-    openEditTagPopover(e);
-  };
-
-  const handleOnClickValidateEditTag = () => {
-    if (onClickValidateEditTag && selectedTag) {
-      onClickValidateEditTag(thematicId, {
-        ...selectedTag,
-        name: editedTagName,
-      });
-    }
-    closeEditTagPopover();
-  };
-
-  const handleOnClickMoveTag = (e: React.MouseEvent<HTMLDivElement>) => {
-    openMoveTagPopover(e);
-  };
-
-  const handleOnSelectThematicToMoveTag = (newThematicId: string) => {
-    if (onSelectThematicToMoveTag && selectedTag) {
-      onSelectThematicToMoveTag(thematicId, selectedTag, newThematicId);
-    }
-    closeMoveTagPopover();
-  };
-
-  const handleOnClickDeleteTag = () => {
-    if (onClickDeleteTag && selectedTag) {
-      onClickDeleteTag(thematicId, selectedTag);
-    }
-    closeTagMenuPopover();
-  };
-
-  return (
-    <div
-      className={styles.thematic}
-      style={{
-        backgroundColor: backgroundColor,
-        borderColor: borderColor,
-      }}
-      onMouseEnter={(e) => {
-        // Show the actions menu on hover
-        e.stopPropagation();
-        setAreActionsVisible(true);
-      }}
-      onMouseLeave={(e) => {
-        // Hide the actions menu on hover
-        e.stopPropagation();
-        setAreActionsVisible(false);
-      }}
-    >
-      <div className={styles.thematic__header}>
-        <Tooltip
-          tooltipDescription={definition}
-          placement="top"
-          isTooltipActive={!!definition}
-          arrow
-        >
-          <div>
-            <Badge
-              text={name}
-              size="base"
-              status={'idle'}
-              customColor={badgeColor}
-              className={styles.overflow_badge}
-            />
-          </div>
-        </Tooltip>
-        {areActionsVisible && (
-          <div className={styles.thematic__header__actions}>
-            {/* Add tag */}
-            {!isAddTagHidden && (
-              <IconButton
-                icon={<AddTagIcon fill={iconsColor} stroke={iconsColor} />}
-                size="xs"
-                variant="tertiary"
-                onClick={handleOnClickAddTag}
-              />
-            )}
-            {/* Edit thematic */}
-            {!isEditThematicHidden && (
-              <IconButton
-                icon={<EditIcon fill={iconsColor} stroke={iconsColor} />}
-                size="xs"
-                variant="tertiary"
-                onClick={handleOnClickEditThematic}
-              />
-            )}
-            {/* Delete Tag */}
-            {!isDeleteThematicHidden && (
-              <IconButton
-                icon={<BinIcon fill={colors.red_500} stroke={colors.red_500} />}
-                size="xs"
-                variant="tertiary"
-                onClick={handleOnClickDeleteThematic}
-              />
-            )}
-          </div>
-        )}
-      </div>
-      {tagsList.length > 0 && (
-        <div className={styles.tagsContainer}>
-          {tagsList.map((tag, idx) => (
-            <div
-              key={`${tag}-${idx}`}
-              className={styles.tag}
-              onClick={(e) => handleOnClickTag(e, tag)}
-            >
-              <Tooltip
-                tooltipDescription={tag.definition}
-                placement="top"
-                isTooltipActive={!!tag.definition}
-                arrow
-              >
-                <div>
-                  <Tag
-                    text={tag.name}
-                    customColor={tagColor.toHex()}
-                    size="base"
-                    amountNumber={tag.amount}
-                    className={styles.overflow_tag}
-                  />
-                </div>
-              </Tooltip>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* -------------------------- Popovers ----------------------------------- */}
-
-      {/* Add Tag Popover */}
-      <Popover
-        open={isAddTagPopoverOpen}
-        anchorEl={addTagPopoverAnchorPosition}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        onClose={closeAddTagPopover}
-        className={styles.addTagPopover}
-      >
-        <div className={styles.content}>
-          <TextInput
-            placeholder={cmsContent ? cmsContent.addTag : 'Add tag'}
-            value={newTagName}
-            onChange={(e) => setNewTagName(e.target.value)}
-            onKeyDown={handleOnClickValidateAddTag}
-          />
-          <div className={styles.actions}>
-            <Button
-              text={cmsContent ? cmsContent.validate : 'Validate'}
-              size="sm"
-              onClick={handleOnClickValidateAddTag}
-              disabled={newTagName === ''}
-            />
-          </div>
-        </div>
-      </Popover>
-
-      {/* Tag Menu Popover */}
-      <Popover
-        open={isTagMenuPopoverOpen}
-        anchorEl={tagMenuPopoverAnchorPosition}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        onClose={closeTagMenuPopover}
-        className={styles.tagMenuPopover}
-      >
-        <div className={styles.dropdown}>
-          <div className={styles.item} onClick={(e) => handleOnClickEditTag(e)}>
-            <Text text={cmsContent ? cmsContent.edit : 'Edit'} size="sm" />
-            <ArrowLineRightIcon fill={colors.black} size="base" />
-          </div>
-          {otherThematicsList.length > 0 && (
-            <div
-              className={styles.item}
-              onClick={(e) => handleOnClickMoveTag(e)}
-            >
-              <Text
-                text={cmsContent ? cmsContent.moveTo : 'Move to'}
-                size="sm"
-              />
-              <ArrowLineRightIcon fill={colors.black} size="base" />
-            </div>
-          )}
-          <div className={styles.item} onClick={handleOnClickDeleteTag}>
-            <BinIcon fill={colors.red_500} size="base" />
-            <Text text={cmsContent ? cmsContent.delete : 'Delete'} size="sm" />
-          </div>
-        </div>
-      </Popover>
-
-      {/* Edit Tag Popover */}
-      <Popover
-        open={isEditTagPopoverOpen}
-        anchorEl={editTagPopoverAnchorPosition}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        onClose={closeEditTagPopover}
-        className={styles.editTagPopover}
-      >
-        <div className={styles.content}>
-          <TextInput
-            placeholder={cmsContent ? cmsContent.edit : 'Edit'}
-            value={editedTagName}
-            onChange={(e) => setEditedTagName(e.target.value)}
-            onKeyDown={handleOnClickValidateEditTag}
-          />
-          <div className={styles.actions}>
-            <Button
-              text={cmsContent ? cmsContent.validate : 'Validate'}
-              size="sm"
-              onClick={handleOnClickValidateEditTag}
-              disabled={editedTagName === ''}
-            />
-          </div>
-        </div>
-      </Popover>
-
-      {/* Move Tag Popover */}
-      <Popover
-        open={isMoveTagPopoverOpen}
-        anchorEl={moveTagPopoverAnchorPosition}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        onClose={closeMoveTagPopover}
-        className={styles.moveTagPopover}
-      >
-        <div className={styles.content}>
-          <div className={styles.otherThematicsContainer}>
-            {otherThematicsList.map((thematic, idx) => (
-              <div
-                key={`${thematic}-${idx}`}
-                className={styles.otherThematic}
-                onClick={() => handleOnSelectThematicToMoveTag(thematic._id)}
-              >
-                <div
-                  className={styles.color}
-                  style={{
-                    backgroundColor: thematic.color,
-                    height: '1rem',
-                    width: '1rem',
-                    borderRadius: '50%',
-                  }}
-                />
-                <Text text={thematic.name} size="sm" />
-              </div>
-            ))}
-          </div>
-        </div>
-      </Popover>
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import styles from './Thematic.modules.scss';
+import {
+  Badge,
+  Tag,
+  IconButton,
+  AddTagIcon,
+  ArrowLineRightIcon,
+  BinIcon,
+  EditIcon,
+  Text,
+  colors,
+  Button,
+  TextInput,
+  Tooltip,
+} from '../../';
+import { Popover } from '@mui/material';
+import { colord } from 'colord';
+import { changeColorLuminance } from '../../utils/changeColorLuminance';
+import { getReadableTextColor } from '../../utils/getReadableTextColor';
+
+export interface ThematicProps {
+  thematicId: string;
+  name: string;
+  definition: string;
+  color: string;
+  tagsList: Array<{
+    name: string;
+    color: string;
+    amount: number;
+    definition?: string;
+  }>;
+  otherThematicsList?: Array<{
+    _id: string;
+    name: string;
+    color: string;
+  }>;
+  onClickValidateAddTag?: (thematicId: string, tag: Object) => void;
+  onClickValidateEditTag?: (thematicId: string, tag: Object) => void;
+  onSelectThematicToMoveTag?: (
+    currentThematicId: string,
+    tag: Object,
+    newThematicId: string
+  ) => void;
+  onClickDeleteTag?: (thematicId: string, tag: Object) => void;
+  onClickEditThematic?: (thematicId: string) => void;
+  onClickDeleteThematic?: (thematicId: string) => void;
+  cmsContent?: {
+    addTag: string;
+    validate: string;
+    edit: string;
+    moveTo: string;
+    delete: string;
+  };
+  isAddTagHidden?: boolean;
+  isEditThematicHidden?: boolean;
+  isDeleteThematicHidden?: boolean;
+}
+
+export const Thematic = ({
+  thematicId,
+  name,
+  definition,
+  color,
+  tagsList = [],
+  otherThematicsList = [],
+  onClickValidateAddTag,
+  onClickValidateEditTag,
+  onSelectThematicToMoveTag,
+  onClickDeleteTag,
+  onClickEditThematic,
+  onClickDeleteThematic,
+  cmsContent,
+  isAddTagHidden = false,
+  isEditThematicHidden = false,
+  isDeleteThematicHidden = false,
+}: ThematicProps) => {
+  const [areActionsVisible, setAreActionsVisible] = useState(false);
+  const [newTagName, setNewTagName] = useState('');
+  const [selectedTag, setSelectedTag] = useState<Object | null>(null);
+  const [editedTagName, setEditedTagName] = useState('');
+
+  //----------------- Popover states ----------------- //
+  const [isAddTagPopoverOpen, setIsAddTagPopoverOpen] = useState(false);
+  const [isTagMenuPopoverOpen, setIsTagMenuPopoverOpen] = useState(false);
+  const [isEditTagPopoverOpen, setIsEditTagPopoverOpen] = useState(false);
+  const [isMoveTagPopoverOpen, setIsMoveTagPopoverOpen] = useState(false);
+
+  const [addTagPopoverAnchorPosition, setAddTagPopoverAnchorPosition] =
+    useState<HTMLElement | null>(null);
+  const [tagMenuPopoverAnchorPosition, setTagMenuPopoverAnchorPosition] =
+    useState<HTMLElement | null>(null);
+  const [editTagPopoverAnchorPosition, setEditTagPopoverAnchorPosition] =
+    useState<HTMLElement | null>(null);
+  const [moveTagPopoverAnchorPosition, setMoveTagPopoverAnchorPosition] =
+    useState<HTMLElement | null>(null);
+
+  //----------------- Color Calculations ----------------- //
+  const thematicColor = colord(color);
+
+  let tagColor = thematicColor;
+
+  const backgroundColor = changeColorLuminance(thematicColor, 97);
+  const badgeColor = changeColorLuminance(thematicColor, 90);
+  const iconsColor = changeColorLuminance(thematicColor, 40);
+  const borderColor = getReadableTextColor(colord(backgroundColor));
+
+  // If the contrast between the thematic color and the background color is too low, change the color of the tags to make them darker
+  if (thematicColor.contrast(backgroundColor) < 1.25) {
+    tagColor = colord(changeColorLuminance(thematicColor, 90));
+  }
+
+  // ----------------- Popover functions ----------------- //
+  const openAddTagPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAddTagPopoverAnchorPosition(event.currentTarget);
+    setIsAddTagPopoverOpen(true);
+  };
+  const closeAddTagPopover = () => {
+    setAddTagPopoverAnchorPosition(null);
+    setIsAddTagPopoverOpen(false);
+  };
+
+  const openTagMenuPopover = (event: React.MouseEvent<HTMLDivElement>) => {
+    setTagMenuPopoverAnchorPosition(event.currentTarget);
+    setIsTagMenuPopoverOpen(true);
+  };
+  const closeTagMenuPopover = () => {
+    setTagMenuPopoverAnchorPosition(null);
+    setIsTagMenuPopoverOpen(false);
+  };
+
+  const openEditTagPopover = (event: React.MouseEvent<HTMLDivElement>) => {
+    setEditTagPopoverAnchorPosition(event.currentTarget);
+    setIsEditTagPopoverOpen(true);
+  };
+  const closeEditTagPopover = () => {
+    setEditTagPopoverAnchorPosition(null);
+    setIsEditTagPopoverOpen(false);
+    setIsTagMenuPopoverOpen(false);
+    setEditedTagName('');
+  };
+
+  const openMoveTagPopover = (event: React.MouseEvent<HTMLDivElement>) => {
+    setMoveTagPopoverAnchorPosition(event.currentTarget);
+    setIsMoveTagPopoverOpen(true);
+  };
+  const closeMoveTagPopover = () => {
+    setMoveTagPopoverAnchorPosition(null);
+    setIsMoveTagPopoverOpen(false);
+    setIsTagMenuPopoverOpen(false);
+  };
+
+  // ----------------- Event handlers ----------------- //
+  const handleOnClickAddTag = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    openAddTagPopover(e);
+  };
+
+  const handleOnClickValidateAddTag = () => {
+    if (onClickValidateAddTag) {
+      onClickValidateAddTag(thematicId, {
+        name: newTagName,
+        color: thematicColor.toHex(),
+        definition: '',
+      });
+      setNewTagName('');
+    }
+    setNewTagName('');
+    closeAddTagPopover();
+  };
+
+  const handleOnClickEditThematic = (
+    e: React.MouseEvent<HTMLButtonElement>
+  ) => {
+    e.stopPropagation();
+    if (onClickEditThematic) {
+      onClickEditThematic(thematicId);
+    }
+  };
+
+  const handleOnClickDeleteThematic = (
+    e: React.MouseEvent<HTMLButtonElement>
+  ) => {
+    e.stopPropagation();
+    if (onClickDeleteThematic) {
+      onClickDeleteThematic(thematicId);
+    }
+  };
+  const handleOnClickTag = (
+    e: React.MouseEvent<HTMLDivElement>,
+    tag: { name: string }
+  ) => {
+    e.stopPropagation();
+    setSelectedTag(tag);
+    setEditedTagName(tag.name);
+    openTagMenuPopover(e);
+  };
+
+  const handleOnClickEditTag = (e: React.MouseEvent<HTMLDivElement>) => {
+    openEditTagPopover(e);
+  };
+
+  const handleOnClickValidateEditTag = () => {
+    if (onClickValidateEditTag && selectedTag) {
+      onClickValidateEditTag(thematicId, {
+        ...selectedTag,
+        name: editedTagName,
+      });
+    }
+    closeEditTagPopover();
+  };
+
+  const handleOnClickMoveTag = (e: React.MouseEvent<HTMLDivElement>) => {
+    openMoveTagPopover(e);
+  };
+
+  const handleOnSelectThematicToMoveTag = (newThematicId: string) => {
+    if (onSelectThematicToMoveTag && selectedTag) {
+      onSelectThematicToMoveTag(thematicId, selectedTag, newThematicId);
+    }
+    closeMoveTagPopover();
+  };
+
+  const handleOnClickDeleteTag = () => {
+    if (onClickDeleteTag && selectedTag) {
+      onClickDeleteTag(thematicId, selectedTag);
+    }
+    closeTagMenuPopover();
+  };
+
+  return (
+    <div
+      className={styles.thematic}
+      style={{
+        backgroundColor: backgroundColor,
+        borderColor: borderColor,
+      }}
+      onMouseEnter={(e) => {
+        // Show the actions menu on hover
+        e.stopPropagation();
+        setAreActionsVisible(true);
+      }}
+      onMouseLeave={(e) => {
+        // Hide the actions menu on hover
+        e.stopPropagation();
+        setAreActionsVisible(false);
+      }}
+    >
+      <div className={styles.thematic__header}>
+        <Tooltip
+          tooltipDescription={definition}
+          placement="top"
+          isTooltipActive={!!definition}
+          arrow
+        >
+          <div>
+            <Badge
+              text={name}
+              size="base"
+              status={'idle'}
+              customColor={badgeColor}
+              className={styles.overflow_badge}
+            />
+          </div>
+        </Tooltip>
+        {areActionsVisible && (
+          <div className={styles.thematic__header__actions}>
+            {/* Add tag */}
+            {!isAddTagHidden && (
+              <IconButton
+                icon={<AddTagIcon fill={iconsColor} stroke={iconsColor} />}
+                size="xs"
+                variant="tertiary"
+                onClick={handleOnClickAddTag}
+              />
+            )}
+            {/* Edit thematic */}
+            {!isEditThematicHidden && (
+              <IconButton
+                icon={<EditIcon fill={iconsColor} stroke={iconsColor} />}
+                size="xs"
+                variant="tertiary"
+                onClick={handleOnClickEditThematic}
+              />
+            )}
+            {/* Delete Tag */}
+            {!isDeleteThematicHidden && (
+              <IconButton
+                icon={<BinIcon fill={colors.red_500} stroke={colors.red_500} />}
+                size="xs"
+                variant="tertiary"
+                onClick={handleOnClickDeleteThematic}
+              />
+            )}
+          </div>
+        )}
+      </div>
+      {tagsList.length > 0 && (
+        <div className={styles.tagsContainer}>
+          {tagsList.map((tag, idx) => (
+            <div
+              key={`${tag}-${idx}`}
+              className={styles.tag}
+              onClick={(e) => handleOnClickTag(e, tag)}
+            >
+              <Tooltip
+                tooltipDescription={tag.definition}
+                placement="top"
+                isTooltipActive={!!tag.definition}
+                arrow
+              >
+                <div>
+                  <Tag
+                    text={tag.name}
+                    customColor={tagColor.toHex()}
+                    size="base"
+                    amountNumber={tag.amount}
+                    className={styles.overflow_tag}
+                  />
+                </div>
+              </Tooltip>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* -------------------------- Popovers ----------------------------------- */}
+
+      {/* Add Tag Popover */}
+      <Popover
+        open={isAddTagPopoverOpen}
+        anchorEl={addTagPopoverAnchorPosition}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        onClose={closeAddTagPopover}
+        className={styles.addTagPopover}
+      >
+        <div className={styles.content}>
+          <TextInput
+            placeholder={cmsContent ? cmsContent.addTag : 'Add tag'}
+            value={newTagName}
+            onChange={(e) => setNewTagName(e.target.value)}
+            onKeyDown={handleOnClickValidateAddTag}
+          />
+          <div className={styles.actions}>
+            <Button
+              text={cmsContent ? cmsContent.validate : 'Validate'}
+              size="sm"
+              onClick={handleOnClickValidateAddTag}
+              disabled={newTagName === ''}
+            />
+          </div>
+        </div>
+      </Popover>
+
+      {/* Tag Menu Popover */}
+      <Popover
+        open={isTagMenuPopoverOpen}
+        anchorEl={tagMenuPopoverAnchorPosition}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        onClose={closeTagMenuPopover}
+        className={styles.tagMenuPopover}
+      >
+        <div className={styles.dropdown}>
+          <div className={styles.item} onClick={(e) => handleOnClickEditTag(e)}>
+            <Text text={cmsContent ? cmsContent.edit : 'Edit'} size="sm" />
+            <ArrowLineRightIcon fill={colors.black} size="base" />
+          </div>
+          {otherThematicsList.length > 0 && (
+            <div
+              className={styles.item}
+              onClick={(e) => handleOnClickMoveTag(e)}
+            >
+              <Text
+                text={cmsContent ? cmsContent.moveTo : 'Move to'}
+                size="sm"
+              />
+              <ArrowLineRightIcon fill={colors.black} size="base" />
+            </div>
+          )}
+          <div className={styles.item} onClick={handleOnClickDeleteTag}>
+            <BinIcon fill={colors.red_500} size="base" />
+            <Text text={cmsContent ? cmsContent.delete : 'Delete'} size="sm" />
+          </div>
+        </div>
+      </Popover>
+
+      {/* Edit Tag Popover */}
+      <Popover
+        open={isEditTagPopoverOpen}
+        anchorEl={editTagPopoverAnchorPosition}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        onClose={closeEditTagPopover}
+        className={styles.editTagPopover}
+      >
+        <div className={styles.content}>
+          <TextInput
+            placeholder={cmsContent ? cmsContent.edit : 'Edit'}
+            value={editedTagName}
+            onChange={(e) => setEditedTagName(e.target.value)}
+            onKeyDown={handleOnClickValidateEditTag}
+          />
+          <div className={styles.actions}>
+            <Button
+              text={cmsContent ? cmsContent.validate : 'Validate'}
+              size="sm"
+              onClick={handleOnClickValidateEditTag}
+              disabled={editedTagName === ''}
+            />
+          </div>
+        </div>
+      </Popover>
+
+      {/* Move Tag Popover */}
+      <Popover
+        open={isMoveTagPopoverOpen}
+        anchorEl={moveTagPopoverAnchorPosition}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        onClose={closeMoveTagPopover}
+        className={styles.moveTagPopover}
+      >
+        <div className={styles.content}>
+          <div className={styles.otherThematicsContainer}>
+            {otherThematicsList.map((thematic, idx) => (
+              <div
+                key={`${thematic}-${idx}`}
+                className={styles.otherThematic}
+                onClick={() => handleOnSelectThematicToMoveTag(thematic._id)}
+              >
+                <div
+                  className={styles.color}
+                  style={{
+                    backgroundColor: thematic.color,
+                    height: '1rem',
+                    width: '1rem',
+                    borderRadius: '50%',
+                  }}
+                />
+                <Text text={thematic.name} size="sm" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </Popover>
+    </div>
+  );
+};