@griddo/ax 10.5.4 → 10.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.5.4",
+  "version": "10.6.1",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -232,5 +232,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "aee8c57f859479efdec9e7e1d1acfdcd4caa34b8"
+  "gitHead": "7c09ff5f84d88f828072c1e328345173f2cdf992"
 }

package/src/__tests__/components/Fields/ComponentArray/MixableComponentArray/MixableComponentArray.test.tsx

@@ -37,7 +37,7 @@ const testModule = {
 // @ts-ignore
 mixableProps.value = testModule;
 mixableProps.activatedModules = ["HeroSection"];
-mixableProps.whiteList = [];
+mixableProps.whiteList = ["Module1"];
 mixableProps.moduleCopy = null;
 
 describe("ComponentArraySelector component rendering", () => {
@@ -123,7 +123,7 @@ describe("ComponentArraySelector component rendering", () => {
     otherMixableModule.component = "HeroCard";
     otherMixableModule.title = "Hero Section";
     otherMixableModule.modules = [];
-    mixableProps.whiteList = [];
+    mixableProps.whiteList = ["Module1"];
     mixableProps.value = [mixableModule, otherMixableModule];
     mixableProps.field = {
       contentType: "modules",
@@ -302,7 +302,7 @@ describe("ComponentArraySelector component events trigger", () => {
     mixableProps.field = { type: "components", title: "", key: "elements" };
     mixableProps.value = [mixableModule];
     mixableProps.activatedModules = ["HeroSection"];
-    mixableProps.whiteList = [];
+    mixableProps.whiteList = ["Module1"];
     mixableProps.moduleCopy = null;
     mixableProps.actions = {
       addModuleAction: jest.fn(),

package/src/components/Button/style.tsx

@@ -148,4 +148,4 @@ const Label = styled.span<{ icon?: string; backIcon?: string }>`
   padding-right: ${(p) => (p.backIcon ? p.theme.spacing.s : `0`)};
 `;
 
-export { Button, TextButton, LineButton, MinimalButton, Label }
+export { Button, TextButton, LineButton, MinimalButton, Label };

package/src/components/ConfigPanel/Form/ConnectedField/NavConnectedField/index.tsx

@@ -5,7 +5,7 @@ import { FieldContainer } from "@ax/components";
 import { navigationActions } from "@ax/containers/Navigation";
 import { getInnerFields } from "@ax/forms";
 import { IRootState } from "@ax/types";
-import { areEqual, filterThemeElements } from "@ax/helpers";
+import { areEqual, filterThemeModules } from "@ax/helpers";
 
 const NavConnectedField = (props: any) => {
   const {
@@ -69,7 +69,7 @@ const NavConnectedField = (props: any) => {
     );
   }
 
-  const filteredWhiteList = whiteList ? filterThemeElements(themeElements, whiteList, "modules") : whiteList;
+  const filteredWhiteList = whiteList ? filterThemeModules(themeElements, whiteList) : whiteList;
 
   return (
     <FieldContainer

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { IDataPack, IErrorItem, IRootState, ISchemaField, ISite, IThemeElements } from "@ax/types";
-import { filterThemeElements, getModuleCategories } from "@ax/helpers";
+import { filterThemeModules, getModuleCategories } from "@ax/helpers";
 import Field from "../Field";
 
 import * as S from "./style";
@@ -61,7 +61,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     }, []);
 
     const mappedWhiteList: string[] = whiteList ? [...whiteList, ...addedModules].sort() : [...addedModules.sort()];
-    const filteredWhiteList = filterThemeElements(themeElements, mappedWhiteList, "modules");
+    const filteredWhiteList = filterThemeModules(themeElements, mappedWhiteList);
     const categories = getModuleCategories(filteredWhiteList);
 
     return {

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -6,7 +6,7 @@ import {
   isModuleDisabled,
   slugify,
   areEqual,
-  filterThemeElements,
+  filterThemeModules,
   isTemplateExcludedFromTheme,
 } from "@ax/helpers";
 import { IRootState } from "@ax/types";
@@ -82,8 +82,8 @@ const PageConnectedField = (props: any) => {
 
   const isFieldReadOnly = (["parent", "slug"].includes(objKey) && isPageHome) || parentIsReadOnly || field.readonly;
 
-  const filteredActivatedModules = filterThemeElements(themeElements, activatedModules, "modules");
-  const filteredWhiteList = whiteList ? filterThemeElements(themeElements, whiteList, "modules") : whiteList;
+  const filteredActivatedModules = filterThemeModules(themeElements, activatedModules);
+  const filteredWhiteList = whiteList ? filterThemeModules(themeElements, whiteList) : whiteList;
 
   const isDisabled =
     (!isGlobal &&

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -50,6 +50,9 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   const fixedValue = Array.isArray(value) ? value : containerToComponentArray(value);
   const componentIDs: number[] = fixedValue.map((element: any) => element.editorID);
 
+  const type = getTypefromKey(objKey);
+  const { contentType = type } = field;
+
   const { modulesToPaste, unavailableModules } = getModulesToPaste(
     moduleCopy,
     whiteList,
@@ -58,8 +61,6 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     field
   );
 
-  const type = getTypefromKey(objKey);
-  const { contentType = type } = field;
   const { isOpen, toggleModal } = useModal();
   const [isBulkOpen, setIsBulkOpen] = useState(false);
   const [draggingId, setDraggingId] = useState<number | null>(null);
@@ -102,7 +103,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   const selectItems = () => (checkState.isAllSelected ? resetBulkSelection() : selectAllItems());
 
-  const showAddItemButton = (!maxItems || fixedValue.length < maxItems) && !disabled;
+  const showAddItemButton = (!maxItems || fixedValue.length < maxItems) && !disabled && whiteList.length > 0;
 
   const showPasteModuleButton =
     showAddItemButton &&

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

@@ -4,6 +4,7 @@ import { Icon, IconAction, Gallery, Modal, Image, FieldsBehavior } from "@ax/com
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
 import { IImage, ISite } from "@ax/types";
 import { useModal } from "@ax/hooks";
+import GalleryDragAndDrop from "@ax/components/Gallery/GalleryPanel/GalleryDragAndDrop";
 
 import * as S from "./style";
 
@@ -20,17 +21,21 @@ const ImageField = (props: IImageFieldProps) => {
     setIsGalleryOpened,
     cropPreview = false,
     fullWidth = false,
+    noGallery = false,
   } = props;
 
   const isLinkableImage = selectedContent && selectedContent.component === "LinkableImage";
   const hasImage = value && Object.prototype.hasOwnProperty.call(value, "url");
   const isModalOpen = isLinkableImage && !hasImage;
   const { isOpen, toggleModal } = useModal(isModalOpen);
+  const { isOpen: isOpenDD, toggleModal: toggleModalDD } = useModal(isModalOpen);
   const [previewSrc, setPreviewSrc] = useState<string>();
   const [previewHeight, setPreviewHeight] = useState<{ height: string | number }>({ height: "auto" });
   const previewRef = useRef<HTMLDivElement>(null);
   const [imageLoaded, setImageLoaded] = useState(false);
 
+  const validFormats = ["jpeg", "jpg", "png", "svg", "gif"];
+
   const imageUrl = value ? (typeof value === "string" ? value : value.url) : "";
   const imagePosition = value && typeof value === "object" ? value.position : "center";
 
@@ -73,20 +78,21 @@ const ImageField = (props: IImageFieldProps) => {
       onChange(img);
       setIsGalleryOpened && setIsGalleryOpened();
       error && handleValidation && handleValidation(url, validators);
+      isOpenDD && toggleModalDD();
     }
   };
 
   const handleClick = () => {
     if (!disabled) {
       setIsGalleryOpened && setIsGalleryOpened();
-      toggleModal();
+      noGallery ? toggleModalDD() : toggleModal();
     }
   };
 
   const handleChange = () => {
     if (!disabled) {
       setIsGalleryOpened && setIsGalleryOpened();
-      toggleModal();
+      noGallery ? toggleModalDD() : toggleModal();
     }
   };
 
@@ -172,6 +178,16 @@ const ImageField = (props: IImageFieldProps) => {
       <Modal isOpen={isOpen} hide={toggleModal} size="XL" title="Select image">
         <Gallery getImageSelected={getImageSelected} toggleModal={toggleModal} site={site} />
       </Modal>
+      <Modal isOpen={isOpenDD} hide={toggleModalDD} size="M" title="Upload Media">
+        <GalleryDragAndDrop
+          site={site ? site.id : "global"}
+          isImageSelected={false}
+          allowUpload={true}
+          selectImage={getImageSelected}
+          validFormats={validFormats}
+          visible={false}
+        />
+      </Modal>
     </>
   );
 };
@@ -188,6 +204,7 @@ export interface IImageFieldProps {
   site: ISite;
   cropPreview?: boolean;
   fullWidth?: boolean;
+  noGallery?: boolean;
 }
 
 export default memo(ImageField);

package/src/components/Gallery/GalleryPanel/DetailPanel/index.tsx

@@ -35,13 +35,16 @@ const GalleryDetailPanel = (props: IProps) => {
   const [addToGlobal, setAddToGlobal] = useState({ value: "addToGlobal", isChecked: false });
   const [deletedToast, setDeletedToast] = useState(false);
 
+  const isAllowedtoDeleteGlobalImagesInSite = usePermission("mediaGallery.deleteGlobalImagesInSite");
+  const isAllowedtoDeleteSiteImages = usePermission("mediaGallery.deleteImages");
+  const isAllowedtoEditGlobalImagesInSite = usePermission("mediaGallery.editGlobalImagesInSite");
+  const isAllowedtoEditSiteImages = usePermission("mediaGallery.editImages");
+  const isAllowedToUploadGlobal = usePermission("mediaGallery.addGlobalImagesFromSite");
+
   const isAllowedToDelete =
-    (isGlobalTab && usePermission("mediaGallery.deleteGlobalImagesInSite")) ||
-    (!isGlobalTab && usePermission("mediaGallery.deleteImages"));
+    (isGlobalTab && isAllowedtoDeleteGlobalImagesInSite) || (!isGlobalTab && isAllowedtoDeleteSiteImages);
   const isAllowedToEdit =
-    (isGlobalTab && usePermission("mediaGallery.editGlobalImagesInSite")) ||
-    (!isGlobalTab && usePermission("mediaGallery.editImages"));
-  const isAllowedToUploadGlobal = usePermission("mediaGallery.addGlobalImagesFromSite");
+    (isGlobalTab && isAllowedtoEditGlobalImagesInSite) || (!isGlobalTab && isAllowedtoEditSiteImages);
 
   const setInitForm = (imageSelected: IImage) => {
     const form = {

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useRef, useState } from "react";
+import React, { memo, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
 import { galleryActions } from "@ax/containers/Gallery";
@@ -21,6 +21,8 @@ const GalleryDragAndDrop = (props: IProps) => {
     errorMsg,
     uploadImage,
     selectImage,
+    visible,
+    resetGalleryState,
   } = props;
   const validExtensions = validFormats.map((format) => `.${format}`).join(",");
 
@@ -31,6 +33,10 @@ const GalleryDragAndDrop = (props: IProps) => {
   const [uploadingState, setUploadingState] = useState({ total: 0, ready: 0 });
   const [progress, setProgress] = useState(0);
 
+  useEffect(() => {
+    resetGalleryState();
+  }, [resetGalleryState]);
+
   const handleDragEnter = () => {
     setDropDepth((depth) => depth + 1);
   };
@@ -75,14 +81,14 @@ const GalleryDragAndDrop = (props: IProps) => {
       let lastImage: IImage | undefined;
       while (files.length) {
         const file = files.shift();
-        lastImage = file && (await uploadImage(file, site, setProgress));
+        lastImage = file && (await uploadImage(file, site, setProgress, visible));
         setUploadingState((state) => ({ total: state.total, ready: state.ready + 1 }));
       }
 
       setInDropZone(false);
       setUploadingState({ total: 0, ready: 0 });
       setTimeout(async () => {
-        await refreshImages();
+        refreshImages && (await refreshImages());
         lastImage && selectImage(lastImage);
       }, 3000);
     } catch (error) {
@@ -191,11 +197,12 @@ export interface IGalleryDragAndDropProps {
   validFormats: string[];
   site: number | "global";
   allowUpload: boolean;
-  refreshImages: () => Promise<void>;
+  refreshImages?: () => Promise<void>;
   isUploading: boolean;
   isSuccess: boolean;
   isError: boolean;
   errorMsg: string;
+  visible?: boolean;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -208,16 +215,19 @@ const mapStateToProps = (state: IRootState) => ({
 export interface IDispatchProps {
   selectImage(item: IImage | null): void;
   uploadError: (error: boolean, msg?: string) => Promise<void>;
+  resetGalleryState: () => Promise<void>;
   uploadImage: (
     imageFiles: File | File[],
     site: number | string,
-    setProgress?: (progress: number) => void
+    setProgress?: (progress: number) => void,
+    visible?: boolean
   ) => Promise<IImage>;
 }
 
 const mapDispatchToProps = {
   uploadError: galleryActions.uploadError,
   uploadImage: galleryActions.uploadImage,
+  resetGalleryState: galleryActions.resetGalleryState,
 };
 
 type IProps = IGalleryDragAndDropProps & IDispatchProps;

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/style.tsx

@@ -10,6 +10,7 @@ export const Wrapper = styled.div<{ hidden: boolean }>`
   height: 100%;
   width: 100%;
   padding: ${(p) => p.theme.spacing.m};
+  background-color: ${(p) => p.theme.color.uiBarBackground};
 `;
 
 export const StatusWrapper = styled.div`

package/src/components/Gallery/GalleryPanel/index.tsx

@@ -8,17 +8,8 @@ import DetailPanel from "./DetailPanel";
 import * as S from "./style";
 
 const GalleryPanel = (props: IGalleryPanelProps) => {
-  const {
-    imageSelected,
-    validFormats,
-    setImage,
-    isGlobalTab,
-    scope,
-    selectedTab,
-    site,
-    refreshImages,
-    selectImage
-  } = props;
+  const { imageSelected, validFormats, setImage, isGlobalTab, scope, selectedTab, site, refreshImages, selectImage } =
+    props;
 
   const isAllowedToUpload = usePermission("mediaGallery.addImages");
 

package/src/components/MenuGroup/index.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+import { NavLink } from "react-router-dom";
+
+import { Icon, MenuItem, Tooltip } from "@ax/components";
+import { IContentFilter } from "@ax/types";
+
+import * as S from "./style";
+
+const MenuGroup = (props: IProps): JSX.Element => {
+  const { filter, current, isAllowedToCreate, onClick, addNew } = props;
+
+  const [isOpen, setIsOpen] = useState(true);
+  const [isSelected, setIsSelected] = useState(false);
+
+  useEffect(() => {
+    const selected = filter.items && filter.items.some((filter) => filter.value === current);
+    if (selected) {
+      setIsSelected(true);
+    } else {
+      setIsSelected(false);
+    }
+  }, [current, filter]);
+
+  const toggleOpen = () => setIsOpen(!isOpen);
+
+  const handleClick = (value: string, fromPage = false, firstTemplate: string | null = null) =>
+    onClick(value, fromPage, firstTemplate);
+
+  const icon = isOpen ? "UpArrow" : "DownArrow";
+
+  const extendedAction = {
+    icon: "add",
+    action: addNew,
+    onlyOnHover: false,
+  };
+
+  return (
+    <S.Item>
+      <Tooltip content={filter.description}>
+        <S.NavLink onClick={toggleOpen} selected={isSelected && !isOpen}>
+          <S.Title>{filter.label}</S.Title>
+          <S.Arrow>
+            <Icon name={icon} />
+          </S.Arrow>
+        </S.NavLink>
+      </Tooltip>
+      <S.Dropdown isOpen={isOpen}>
+        {filter.items &&
+          filter.items.map((filter) => {
+            const { label, value, fromPage, firstTemplate, editable } = filter;
+
+            const isSelected = value === current;
+            const selectedClass = isSelected ? "selected" : "";
+
+            return (
+              <MenuItem
+                key={filter.value}
+                onClick={() => handleClick(value, fromPage, firstTemplate)}
+                extendedAction={editable && isAllowedToCreate ? extendedAction : null}
+                className={selectedClass}
+              >
+                <NavLink to="#">
+                  <S.Link active={isSelected}>{label}</S.Link>
+                </NavLink>
+              </MenuItem>
+            );
+          })}
+      </S.Dropdown>
+    </S.Item>
+  );
+};
+
+interface IProps {
+  filter: IContentFilter;
+  current: string | undefined;
+  isAllowedToCreate: boolean;
+  onClick: (value: string, fromPage: boolean, firstTemplate: string | null) => void;
+  addNew: () => void;
+}
+
+export default MenuGroup;

package/src/components/MenuGroup/style.tsx

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+
+const Item = styled.li`
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  margin-top: ${(p) => p.theme.spacing.xxs};
+`;
+
+const NavLink = styled.div<{ selected: boolean }>`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  align-items: center;
+  height: 35px;
+  cursor: pointer;
+  border-radius: ${(p) => p.theme.radii.s};
+  background-color: ${(p) => (p.selected ? p.theme.color.overlayPressedPrimary : "transparent")};
+  padding: ${(p) => `0 ${p.theme.spacing.xs}`};
+  color: ${(p) => (p.selected ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+`;
+
+const Arrow = styled.div`
+  margin-left: auto;
+  height: ${(p) => p.theme.spacing.m};
+  width: ${(p) => p.theme.spacing.m};
+`;
+
+const Dropdown = styled.ul<{ isOpen: boolean }>`
+  display: ${(p) => (p.isOpen ? "flex" : "none")};
+  transition: all 0.5s ease-in-out;
+  opacity: ${(p) => (p.isOpen ? "1" : "0")};
+  flex-direction: column;
+  border-left: 1px solid ${(p) => p.theme.color.uiLine};
+  padding-left: ${(p) => p.theme.spacing.xxs};
+  margin-left: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const Link = styled.div<{ active: boolean }>`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
+`;
+
+export { Item, NavLink, Title, Arrow, Dropdown, Link };

package/src/components/MenuItem/index.tsx

@@ -4,7 +4,7 @@ import { IconAction } from "@ax/components";
 import * as S from "./style";
 
 const MenuItem = (props: IMenuItemProps): JSX.Element => {
-  const { children, onClick, active = false, extendedAction } = props;
+  const { children, onClick, extendedAction, className } = props;
 
   const handleOnClick = (e: React.MouseEvent<HTMLLIElement>) => {
     if (onClick !== undefined) {
@@ -19,12 +19,19 @@ const MenuItem = (props: IMenuItemProps): JSX.Element => {
   };
 
   return (
-    <S.SubItem onClick={handleOnClick} active={active} data-testid="menu-subitem">
-      {children}
+    <S.SubItem
+      onClick={handleOnClick}
+      className={className}
+      onlyOnHover={(extendedAction && extendedAction.onlyOnHover) ?? true}
+      data-testid="menu-subitem"
+    >
+      <div>{children}</div>
       {extendedAction && (
-        <S.ExtendedAction onlyOnHover={extendedAction.onlyOnHover ?? true} data-testid="menu-extended-action">
-          <IconAction icon={extendedAction.icon} size="s" onClick={handleExtendedAction} />
-        </S.ExtendedAction>
+        <S.ExtendedWrapper>
+          <S.ExtendedAction data-testid="menu-extended-action">
+            <IconAction icon={extendedAction.icon} size="s" onClick={handleExtendedAction} />
+          </S.ExtendedAction>
+        </S.ExtendedWrapper>
       )}
     </S.SubItem>
   );
@@ -32,9 +39,9 @@ const MenuItem = (props: IMenuItemProps): JSX.Element => {
 
 export interface IMenuItemProps {
   children: JSX.Element | string;
-  active?: boolean;
   onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
   extendedAction?: { icon: string; action: () => void; onlyOnHover?: boolean } | null;
+  className?: string;
 }
 
 export default MenuItem;

package/src/components/MenuItem/style.tsx

@@ -1,49 +1,71 @@
 import styled from "styled-components";
 
-const ExtendedAction = styled.div<{ onlyOnHover: boolean }>`
-  display: ${(p) => (p.onlyOnHover ? "none" : "block")};
-  position: absolute;
-  right: ${(p) => p.theme.spacing.xxs};
-  top: 50%;
-  transform: translateY(-50%);
+const ExtendedWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
 `;
 
-const SubItem = styled.li<{ active: boolean }>`
-  background-color: ${(p) => (p.active ? p.theme.color.overlayPressedPrimary : `transparent`)};
-  display: block;
+const ExtendedAction = styled.div`
+  display: none;
+`;
+
+const SubItem = styled.li<{ onlyOnHover: boolean }>`
   ${(p) => p.theme.textStyle.uiM};
+  display: flex;
+  align-items: center;
   color: ${(p) => p.theme.color.textHighEmphasis};
-  clear: both;
   width: 100%;
   margin-bottom: ${(p) => p.theme.spacing.xxs};
   margin-top: ${(p) => p.theme.spacing.xxs};
   position: relative;
+  padding: ${(p) => `${p.theme.spacing.xxs} ${p.theme.spacing.xs}`};
+  border-radius: ${(p) => p.theme.radii.s};
+  min-height: 32px;
+  :before {
+    content: "";
+    border-radius: ${(p) => p.theme.radii.s};
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.1s;
+  }
 
-  &:hover {
+  :hover {
     cursor: pointer;
-
     ${ExtendedAction} {
-      display: block;
+      display: ${(p) => (p.onlyOnHover ? "block" : "none")};
     }
   }
 
-  > a {
-    display: flex;
-    padding: ${(p) => p.theme.spacing.xs};
-    border-radius: ${(p) => p.theme.radii.s};
-    color: inherit;
+  :hover:before {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    opacity: 1;
+  }
 
-    &.selected {
-      background-color: ${(p) => p.theme.color.overlayHoverPrimary};
-    }
+  :active:before {
+    background-color: ${(p) => p.theme.color.overlayPressedPrimary};
+    opacity: 1;
+  }
 
-    &:hover {
-      background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+  &.selected {
+    ${ExtendedAction} {
+      display: ${(p) => (p.onlyOnHover ? "none" : "block")};
     }
-    &:active {
-      background-color: ${(p) => p.theme.color.overlayPressedPrimary};
+    :hover {
+      ${ExtendedAction} {
+        display: block;
+      }
     }
   }
+
+  &.selected:before {
+    background-color: ${(p) => p.theme.color.overlayPressedPrimary};
+    opacity: 1;
+  }
 `;
 
-export { ExtendedAction, SubItem };
+export { ExtendedAction, SubItem, ExtendedWrapper };

package/src/components/Nav/index.tsx

@@ -19,8 +19,8 @@ const Nav = (props: INavProps): JSX.Element => {
           const handleClick = () => onClick(item.path);
 
           const menuItem = (
-            <MenuItem onClick={handleClick} key={key}>
-              <NavLink to="#" className={selectedClass}>
+            <MenuItem onClick={handleClick} key={key} className={selectedClass}>
+              <NavLink to="#">
                 <S.Link active={isSelected} data-testid="nav-link">
                   {item.title}
                 </S.Link>

package/src/components/SideModal/index.tsx

@@ -89,9 +89,10 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     const { value, label } = category;
     const filterOptions = () => filterOptionsByCategory(value);
     const isSelected = value === options.category;
+    const selectedClass = isSelected ? "selected" : "";
 
     return (
-      <MenuItem key={`${value}${i}`} active={isSelected}>
+      <MenuItem key={`${value}${i}`} className={selectedClass}>
         <S.NavLink onClick={filterOptions} data-testid="side-modal-nav-link">
           <S.Link data-testid="side-modal-link" active={isSelected}>
             {label}

package/src/components/Tooltip/index.tsx

@@ -112,7 +112,7 @@ interface IState {
 }
 
 export interface ITooltipProps {
-  content?: string | boolean | JSX.Element[];
+  content?: string | boolean | JSX.Element[] | JSX.Element;
   children: any;
   hideOnClick?: boolean;
   bottom?: boolean;

package/src/components/index.tsx

@@ -89,6 +89,7 @@ import Loading from "./Loading";
 import Login from "./Login";
 import MainWrapper from "./MainWrapper";
 import MenuItem from "./MenuItem";
+import MenuGroup from "./MenuGroup";
 import Modal from "./Modal";
 import Nav from "./Nav";
 import Notification from "./Notification";
@@ -200,6 +201,7 @@ export {
   Login,
   MainWrapper,
   MenuItem,
+  MenuGroup,
   Modal,
   Nav,
   Notification,