@griddo/ax 11.4.11 → 11.4.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.4.11",
+  "version": "11.4.12",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -220,5 +220,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1d5a2a3a6993bf8dd81a9e351b261a69b7ae40f1"
+  "gitHead": "11ecbd2d13ead48984d887f30d684f739e50176d"
 }

package/src/helpers/index.tsx

@@ -39,6 +39,7 @@ import {
   hasProps,
   encodeData,
   findObjectValue,
+  removeDuplicatesByProperty,
 } from "./objects";
 
 import {
@@ -228,4 +229,5 @@ export {
   getMaxColumns,
   updateColumns,
   findObjectValue,
+  removeDuplicatesByProperty,
 };

package/src/helpers/objects.tsx

@@ -129,6 +129,18 @@ const findObjectValue = (obj: Record<string, any>, key: string): any | undefined
   return undefined;
 };
 
+const removeDuplicatesByProperty = <T, K extends keyof T>(items: T[], key: K): T[] => {
+  const seen = new Set<T[K]>();
+  return items.filter((item) => {
+    const value = item[key];
+    if (seen.has(value)) {
+      return false;
+    }
+    seen.add(value);
+    return true;
+  });
+};
+
 export {
   isEmptyObj,
   deepClone,
@@ -144,4 +156,5 @@ export {
   hasProps,
   encodeData,
   findObjectValue,
+  removeDuplicatesByProperty,
 };

package/src/modules/App/Routing/NavMenu/NavItem/index.tsx

@@ -53,7 +53,9 @@ const NavItem = (props: IProps) => {
         )}
       </S.NavLink>
       <S.Dropdown isSubmenu={hasSubmenu} isSubmenuOpen={state[name]} className={DropdownClass} type={type}>
-        <S.Heading>{name}</S.Heading>
+        <S.Heading onClick={handleClick}>
+          <div>{name}</div>
+        </S.Heading>
         {routesGroups &&
           routesGroups.map((subGroup: any, groupI: any) => (
             <React.Fragment key={groupI}>

package/src/modules/App/Routing/NavMenu/NavItem/style.tsx

@@ -2,7 +2,10 @@ import styled from "styled-components";
 
 export const Heading = styled.li`
   ${(p) => p.theme.textStyle.headingXXS};
-  cursor: default;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
 `;
 
 export const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean; type: string }>`
@@ -18,6 +21,7 @@ export const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean;
 
   ${Heading} {
     margin-bottom: ${(p) => (p.isSubmenu ? p.theme.spacing.xs : "0")};
+    cursor: ${(p) => (p.isSubmenu ? "default" : "pointer")};
   }
 
   &.floating {
@@ -63,23 +67,24 @@ export const Arrow = styled.div`
 export const LinkName = styled.span<{ active: boolean }>`
   white-space: nowrap;
   overflow: hidden;
-  color: ${(p) => p.active ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse};
+  color: ${(p) => (p.active ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse)};
 `;
 
 export const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen: boolean; active: boolean }>`
   position: relative;
-  margin-left: ${(p) => p.isSubmenuOpen ? "0" : p.theme.spacing.s};
-  margin-right: ${(p) => p.isOpened && !p.isSubmenuOpen ? p.theme.spacing.s : "0"};
-  padding-left: ${(p) => p.isSubmenuOpen ? p.theme.spacing.s : "0"};
-  padding-right: ${(p) => p.isOpened && !p.isSubmenuOpen ? "0" : p.theme.spacing.s};
-  border-radius: ${(p) => p.isOpened ? p.theme.radii.s : `${p.theme.radii.s} 0 0 ${p.theme.radii.s}`};
-  background-color: ${(p) => p.isSubmenuOpen ? p.theme.color.overlayHoverDark : "transparent" };
-  color: ${(p) => p.isSubmenuOpen ? p.theme.color.textHighEmphasisInverse : "inherit" };
+  margin-left: ${(p) => (p.isSubmenuOpen ? "0" : p.theme.spacing.s)};
+  margin-right: ${(p) => (p.isOpened && !p.isSubmenuOpen ? p.theme.spacing.s : "0")};
+  padding-left: ${(p) => (p.isSubmenuOpen ? p.theme.spacing.s : "0")};
+  padding-right: ${(p) => (p.isOpened && !p.isSubmenuOpen ? "0" : p.theme.spacing.s)};
+  border-radius: ${(p) => (p.isOpened ? p.theme.radii.s : `${p.theme.radii.s} 0 0 ${p.theme.radii.s}`)};
+  background-color: ${(p) => (p.isSubmenuOpen ? p.theme.color.overlayHoverDark : "transparent")};
+  color: ${(p) => (p.isSubmenuOpen ? p.theme.color.textHighEmphasisInverse : "inherit")};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 
   svg {
     path {
-      fill: ${(p) => (p.isSubmenuOpen || p.active) ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse };
+      fill: ${(p) =>
+        p.isSubmenuOpen || p.active ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse};
     }
   }
 
@@ -120,7 +125,7 @@ export const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen:
     cursor: pointer;
 
     &.selected {
-      background-color: ${(p) => p.isSubmenuOpen ? "transparent" : p.theme.color.overlayPressedDark };
+      background-color: ${(p) => (p.isSubmenuOpen ? "transparent" : p.theme.color.overlayPressedDark)};
       color: ${(p) => p.theme.color.textHighEmphasisInverse};
 
       path {

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

@@ -2,7 +2,7 @@ import React, { useReducer, useEffect } from "react";
 import { connect } from "react-redux";
 
 import { IRootState, IStructuredData, ITemplateOption, IThemeElements } from "@ax/types";
-import { filterThemeTemplates, getThumbnailProps } from "@ax/helpers";
+import { filterThemeTemplates, getThumbnailProps, removeDuplicatesByProperty } from "@ax/helpers";
 import { MenuItem, RadioGroup } from "@ax/components";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { SecondaryActionButton, MainActionButton } from "./../atoms";
@@ -43,8 +43,8 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
   const currentType = currentStructuredData
     ? currentStructuredData.dataPacks[0]
     : filters.length
-    ? filters[0].value
-    : "";
+      ? filters[0].value
+      : "";
 
   const initialState: IOptionTableStore = {
     columnValues: filterOptions(currentType, "type"),
@@ -123,6 +123,8 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
       }
     });
 
+    filteredOptionsByDataPack = removeDuplicatesByProperty(filteredOptionsByDataPack, "type");
+
     filteredOptionsByDataPack.sort((ele, comp) => {
       // Use localeCompare to compare strings alphabetically
       return ele.title.localeCompare(comp.title);

package/src/modules/Settings/ContentTypes/DataPacks/AddModal/index.tsx

@@ -83,6 +83,7 @@ const AddModal = (props: IProps) => {
               items.map((item: IDataPack, index: number) => {
                 const isSelected = state.packsSelected.find((i: IDataPack) => i.id === item.id);
                 const schema = getDataPackSchema(item.id);
+                if (!schema) return <></>;
                 const { image } = schema;
                 const imageUrl = typeof image === "string" ? image : image[currentSiteInfo.theme];