@griddo/ax 10.4.36 → 10.5.0

package/package.json

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

package/src/api/checkgroups.tsx

@@ -27,7 +27,7 @@ const getCheckGroupItems = async (
 
   const allLanguagesQuery = allLanguages ? "&allLanguages=true" : "";
 
-  SERVICES.GET_STRUCTURED_DATA.dynamicUrl = `${host}${prefix}${siteId}${suffix}/${source}/checkgroup?order=title-ASC${allLanguagesQuery}`;
+  SERVICES.GET_STRUCTURED_DATA.dynamicUrl = `${host}${prefix}${siteId}${suffix}/${source}/checkgroup?groupingCategories=on&order=title-ASC${allLanguagesQuery}`;
 
   return sendRequest(SERVICES.GET_STRUCTURED_DATA);
 };

package/src/api/structuredData.tsx

@@ -1,6 +1,6 @@
 import { template } from "./config";
 import { IServiceConfig, sendRequest, sendInitialRequest } from "./utils";
-import { IGetStructuredDataParams } from "@ax/types";
+import { ICategoryGroupParams, IGetStructuredDataParams, IOrderCategoryParams } from "@ax/types";
 import { AxiosResponse } from "axios";
 
 const SERVICES: { [key: string]: IServiceConfig } = {
@@ -84,9 +84,39 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/translations/structured_data_content/",
     method: "POST",
   },
+  CREATE_GROUP: {
+    ...template,
+    endpoint: "/categories/group",
+    method: "POST",
+  },
+  GET_GROUP: {
+    ...template,
+    endpoint: "/categories/group/",
+    method: "GET",
+  },
+  EDIT_GROUP: {
+    ...template,
+    endpoint: "/categories/group/",
+    method: "PUT",
+  },
+  DELETE_GROUP: {
+    ...template,
+    endpoint: ["/categories/", "/site/", "/group/"],
+    method: "DELETE",
+  },
+  DELETE_GROUP_BULK: {
+    ...template,
+    endpoint: ["/categories/", "/site/", "/group/bulk"],
+    method: "DELETE",
+  },
+  ORDER_CATEGORY: {
+    ...template,
+    endpoint: "/categories/order/",
+    method: "PUT",
+  },
 };
 
-const getData = (token: string | null, siteID?: number | null) => {
+const getData = (token: string | null, siteID?: number | null): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.GET_DATA;
 
   if (siteID) {
@@ -102,7 +132,7 @@ const getData = (token: string | null, siteID?: number | null) => {
   }
 };
 
-const getDataContent = (dataContentId: number, langID: number | null) => {
+const getDataContent = (dataContentId: number, langID: number | null): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.GET_DATA_CONTENT;
 
   const config = langID ? { lang: langID } : {};
@@ -112,7 +142,7 @@ const getDataContent = (dataContentId: number, langID: number | null) => {
   return sendRequest(SERVICES.GET_DATA_CONTENT, {}, config);
 };
 
-const getDataContents = (params: IGetStructuredDataParams, siteID?: number | null) => {
+const getDataContents = (params: IGetStructuredDataParams, siteID?: number | null): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.GET_DATA_CONTENTS;
   const {
     dataID,
@@ -125,12 +155,14 @@ const getDataContents = (params: IGetStructuredDataParams, siteID?: number | nul
     filterQuery,
     relatedFields = false,
     order,
-    lang
+    lang,
+    groupingCategories,
   } = params;
 
   const url = siteID ? `${host}/site/${siteID}${endpoint}` : `${host}${endpoint}`;
 
   SERVICES.GET_DATA_CONTENTS.dynamicUrl = `${url}${dataID}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}&deleted=${deleted}&includeDraft=${include_draft}`;
+  if (groupingCategories) SERVICES.GET_DATA_CONTENTS.dynamicUrl += `&groupingCategories=on`;
   if (relatedFields) SERVICES.GET_DATA_CONTENTS.dynamicUrl += `&relatedFields=true`;
   if (query && query.trim() !== "") SERVICES.GET_DATA_CONTENTS.dynamicUrl += `&query=${query}`;
   if (order) SERVICES.GET_DATA_CONTENTS.dynamicUrl += `&order=${order}`;
@@ -140,14 +172,14 @@ const getDataContents = (params: IGetStructuredDataParams, siteID?: number | nul
     ...(lang && { lang }),
   };
 
-  return sendRequest(SERVICES.GET_DATA_CONTENTS, null,  dataHeader);
+  return sendRequest(SERVICES.GET_DATA_CONTENTS, null, dataHeader);
 };
 
-const createDataContent = (data: any) => {
+const createDataContent = (data: any): Promise<AxiosResponse> => {
   return sendRequest(SERVICES.CREATE_DATA_CONTENT, { ...data });
 };
 
-const updateDataContent = (dataContentId: number, data: any) => {
+const updateDataContent = (dataContentId: number, data: any): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.UPDATE_DATA_CONTENT;
 
   SERVICES.UPDATE_DATA_CONTENT.dynamicUrl = `${host}${endpoint}${dataContentId}`;
@@ -155,14 +187,14 @@ const updateDataContent = (dataContentId: number, data: any) => {
   return sendRequest(SERVICES.UPDATE_DATA_CONTENT, { ...data });
 };
 
-const deleteDataContent = async (dataContentId: number) => {
+const deleteDataContent = async (dataContentId: number): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.DELETE_DATA_CONTENT;
 
   SERVICES.DELETE_DATA_CONTENT.dynamicUrl = `${host}${endpoint}${dataContentId}`;
   return sendRequest(SERVICES.DELETE_DATA_CONTENT);
 };
 
-const getDataContentBulk = (dataContentIDs: number[], siteID?: number) => {
+const getDataContentBulk = (dataContentIDs: number[], siteID?: number): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.GET_DATA_CONTENT_BULK;
   const url = siteID ? `${host}/site/${siteID}${endpoint}` : `${host}${endpoint}`;
   const ids = dataContentIDs.join(",");
@@ -170,11 +202,11 @@ const getDataContentBulk = (dataContentIDs: number[], siteID?: number) => {
   return sendRequest(SERVICES.GET_DATA_CONTENT_BULK);
 };
 
-const deleteDataContentBulk = (dataContentID: number[]) => {
+const deleteDataContentBulk = (dataContentID: number[]): Promise<AxiosResponse> => {
   return sendRequest(SERVICES.DELETE_DATA_CONTENT_BULK, { ids: dataContentID });
 };
 
-const restoreDataContent = (dataContentId: number) => {
+const restoreDataContent = (dataContentId: number): Promise<AxiosResponse> => {
   const {
     host,
     endpoint: [prefix, suffix],
@@ -185,11 +217,11 @@ const restoreDataContent = (dataContentId: number) => {
   return sendRequest(SERVICES.RESTORE_DATA_CONTENT);
 };
 
-const restoreDataContentBulk = (dataContentId: number[]) => {
+const restoreDataContentBulk = (dataContentId: number[]): Promise<AxiosResponse> => {
   return sendRequest(SERVICES.RESTORE_DATA_CONTENT_BULK, { ids: dataContentId });
 };
 
-const getDistributorContent = async (siteID: number | string, data: any) => {
+const getDistributorContent = async (siteID: number | string, data: any): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.GET_DISTRIBUTOR_CONTENT;
   const [prefix, suffix] = endpoint;
 
@@ -198,7 +230,7 @@ const getDistributorContent = async (siteID: number | string, data: any) => {
   return sendRequest(SERVICES.GET_DISTRIBUTOR_CONTENT, { ...data });
 };
 
-const getDataTitles = async (data: string[]) => {
+const getDataTitles = async (data: string[]): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.GET_DATA_TITLES;
 
   const dataString = data.join(",");
@@ -207,7 +239,7 @@ const getDataTitles = async (data: string[]) => {
   return sendRequest(SERVICES.GET_DATA_TITLES);
 };
 
-const setDataStatus = (dataContentId: number, status: string) => {
+const setDataStatus = (dataContentId: number, status: string): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.SET_DATA_STATUS;
 
   SERVICES.SET_DATA_STATUS.dynamicUrl = `${host}${endpoint}${dataContentId}/${status}`;
@@ -215,7 +247,7 @@ const setDataStatus = (dataContentId: number, status: string) => {
   return sendRequest(SERVICES.SET_DATA_STATUS);
 };
 
-const setDataStatusBulk = (dataContentID: number[], status: string) => {
+const setDataStatusBulk = (dataContentID: number[], status: string): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.SET_DATA_STATUS_BULK;
   const [prefix, suffix] = endpoint;
 
@@ -236,13 +268,66 @@ const getContentTypes = (siteID: number | null, lang?: number): Promise<AxiosRes
   return sendRequest(SERVICES.GET_CONTENT_TYPES, null, dataHeader);
 };
 
-const getDataContentTranslation = async (data: any, langID: number) => {
+const getDataContentTranslation = async (data: any, langID: number): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.CONTENT_AI_TRANSLATION;
   SERVICES.CONTENT_AI_TRANSLATION.dynamicUrl = `${host}${endpoint}${langID}`;
 
   return sendRequest(SERVICES.CONTENT_AI_TRANSLATION, { ...data });
 };
 
+const createGroup = (data: ICategoryGroupParams): Promise<AxiosResponse> => {
+  return sendRequest(SERVICES.CREATE_GROUP, { ...data });
+};
+
+const getGroup = (groupId: number): Promise<AxiosResponse> => {
+  const { host, endpoint } = SERVICES.GET_GROUP;
+  SERVICES.GET_GROUP.dynamicUrl = `${host}${endpoint}${groupId}`;
+  return sendRequest(SERVICES.GET_GROUP);
+};
+
+const updateGroup = (groupID: number, data: ICategoryGroupParams): Promise<AxiosResponse> => {
+  const { host, endpoint } = SERVICES.EDIT_GROUP;
+  SERVICES.EDIT_GROUP.dynamicUrl = `${host}${endpoint}${groupID}`;
+
+  return sendRequest(SERVICES.EDIT_GROUP, { ...data });
+};
+
+const deleteGroup = (
+  structuredDataID: string,
+  siteID: number | "global",
+  groupID: number,
+  deleteChildren: boolean
+): Promise<AxiosResponse> => {
+  const { host, endpoint } = SERVICES.DELETE_GROUP;
+  const [prefix, infix, suffix] = endpoint;
+
+  const children = deleteChildren === false ? "?deleteChildren=off" : "";
+
+  SERVICES.DELETE_GROUP.dynamicUrl = `${host}${prefix}${structuredDataID}${infix}${siteID}${suffix}${groupID}${children}`;
+
+  return sendRequest(SERVICES.DELETE_GROUP);
+};
+
+const deleteGroupBulk = (
+  structuredDataID: string,
+  siteID: number | "global",
+  groupID: number[],
+  deleteChildren: boolean
+): Promise<AxiosResponse> => {
+  const { host, endpoint } = SERVICES.DELETE_GROUP_BULK;
+  const [prefix, infix, suffix] = endpoint;
+
+  const children = deleteChildren === false ? "?deleteChildren=off" : "";
+
+  SERVICES.DELETE_GROUP_BULK.dynamicUrl = `${host}${prefix}${structuredDataID}${infix}${siteID}${suffix}${children}`;
+
+  return sendRequest(SERVICES.DELETE_GROUP_BULK, { groups: groupID });
+};
+
+const orderCategory = (data: IOrderCategoryParams): Promise<AxiosResponse> => {
+  return sendRequest(SERVICES.ORDER_CATEGORY, { ...data });
+};
+
 export default {
   getData,
   getDataContent,
@@ -260,4 +345,10 @@ export default {
   getContentTypes,
   getDataContentBulk,
   getDataContentTranslation,
+  createGroup,
+  updateGroup,
+  deleteGroup,
+  deleteGroupBulk,
+  orderCategory,
+  getGroup,
 };

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

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 
 import { checkgroups } from "@ax/api";
 import { isReqOk } from "@ax/helpers";
-import CheckField from "@ax/components/Fields/CheckField";
 import { ISite, ICheck } from "@ax/types";
 
 import * as S from "./style";
@@ -15,6 +14,17 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
 
   const isCheckValue = (object: any): object is ICheckValue => "value" in object;
 
+  const getAllIds = (results: ICheckValue[]) => {
+    return results.reduce((acc: number[], current) => {
+      acc.push(current.value);
+      const children = getAllIds(current.children || []);
+      if (children.length) {
+        acc = [...acc, ...children];
+      }
+      return acc;
+    }, []);
+  };
+
   useEffect((): any => {
     let isSubscribed = true;
 
@@ -38,7 +48,7 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
           setOptions(result);
           if (safeValue.length > 0 && isCheckValue(safeValue[0])) {
             // clean array of old values and set translations
-            const resultIDs = result && result.map((opt: ICheckValue) => opt.value);
+            const resultIDs = result && getAllIds(result);
             const fixedState = safeValue.reduce((acc: ICheckValue[], current: ICheckValue) => {
               if (resultIDs.includes(current.value)) {
                 return [...acc, current];
@@ -60,8 +70,22 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
       .catch((apiError) => console.log(apiError));
 
     return () => (isSubscribed = false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [site, source, allLanguages]);
 
+  const filterOptions = (options: ICheckValue[], ids: number[]) => {
+    return options.reduce((acc: ICheckValue[], current) => {
+      if (ids.includes(current.value)) {
+        acc.push(current);
+      }
+      const children = filterOptions(current.children || [], ids);
+      if (children.length) {
+        acc = [...acc, ...children];
+      }
+      return acc;
+    }, []);
+  };
+
   const handleChange = (newValue: ICheck) => {
     const arrayIds = safeValue.map((e: any) => (typeof e === "number" ? e : e.value));
 
@@ -76,7 +100,7 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
       newArray = [...arrayIds, newValue.value];
     }
 
-    const newArrayObject = options.filter((e: ICheckValue) => newArray.includes(e.value));
+    const newArrayObject = filterOptions(options, newArray);
 
     onChange(newArrayObject);
     error && handleValidation && handleValidation(newArrayObject);
@@ -85,22 +109,30 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
   const isChecked = (id: number): boolean =>
     !!safeValue.find((e: ICheckValue | number) => (typeof e === "number" ? e === id : e.value === id));
 
-  const checks =
-    options &&
-    options.map((item: any) => (
-      <CheckField
-        key={item.name}
-        onChange={handleChange}
-        checked={isChecked(item.value)}
-        value={item.value}
-        title={item.title}
-        name={item.name}
-        disabled={item.disabled || disabled}
-        error={item.error}
-      />
-    ));
-
-  return <S.FieldGroup full={fullHeight}>{checks}</S.FieldGroup>;
+  const renderChecks = (options: ICheckValue[]): JSX.Element[] => {
+    return options.map((item) => {
+      return (
+        <React.Fragment key={`${item.name}${item.value}`}>
+          {item.type === "group" ? (
+            <S.GroupTitle>{item.title}</S.GroupTitle>
+          ) : (
+            <S.StyledCheckField
+              onChange={handleChange}
+              checked={isChecked(item.value)}
+              value={item.value}
+              title={item.title}
+              name={item.name}
+              disabled={item.disabled || disabled}
+              error={item.error}
+            />
+          )}
+          {item.children && <S.GroupWrapper>{renderChecks(item.children)}</S.GroupWrapper>}
+        </React.Fragment>
+      );
+    });
+  };
+
+  return <S.FieldGroup full={fullHeight}>{renderChecks(options)}</S.FieldGroup>;
 };
 
 interface ICheckValue {
@@ -108,6 +140,11 @@ interface ICheckValue {
   name: string;
   title: string;
   dataLanguages?: { id: number; language: number }[];
+  type: "category" | "group";
+  children?: ICheckValue[];
+  selectable?: boolean;
+  disabled?: boolean;
+  error?: boolean;
 }
 
 export interface IAsyncCheckGroup {

package/src/components/Fields/AsyncCheckGroup/style.tsx

@@ -1,12 +1,29 @@
+import React from "react";
 import styled from "styled-components";
+import CheckField from "../CheckField";
 
-export const FieldGroup = styled.div<{ full?: boolean }>`
+const FieldGroup = styled.div<{ full?: boolean }>`
   width: 100%;
   max-width: calc(${(p) => p.theme.spacing.xl} * 5);
   max-height: ${(p) => (p.full ? "auto" : `calc(${p.theme.spacing.l} * 3)`)};
   overflow: auto;
   margin-bottom: ${(p) => p.theme.spacing.xxs};
-  & > div {
-    margin-bottom: ${p => p.theme.spacing.xxs}
-  }
 `;
+
+const GroupWrapper = styled.div`
+  padding-left: ${(p) => p.theme.spacing.s};
+  padding-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const GroupTitle = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  font-style: italic;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const StyledCheckField = styled((props) => <CheckField {...props} />)`
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+export { FieldGroup, GroupWrapper, GroupTitle, StyledCheckField };

package/src/components/Fields/CheckField/style.tsx

@@ -14,7 +14,7 @@ const Label = styled.label<{ disabled: boolean | undefined; inversed: boolean; h
       ? p.theme.color.interactiveDisabled
       : p.inversed
       ? p.theme.color.textHighEmphasisInverse
-      : p.theme.color.textMediumEmphasis};
+      : p.theme.color.textHighEmphasis};
 `;
 
 const CheckMark = styled.span<{

package/src/components/Fields/NoteField/style.tsx

@@ -7,7 +7,7 @@ const Wrapper = styled.div`
 `;
 
 const Title = styled.div`
-  ${(p) => p.theme.textStyle.headingXS};
+  ${(p) => p.theme.textStyle.fieldLabel};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;

package/src/components/Fields/ReferenceField/AutoPanel/AutoItem/index.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { structuredData, selects } from "@ax/api";
 import { isReqOk } from "@ax/helpers";
 import { IGetStructuredDataParams, IDataSource, ISite, IStructuredData } from "@ax/types";
-import { Button, CheckField, FieldsBehavior, IconAction, Select, SearchField, Tag, Tooltip } from "@ax/components";
+import { Button, FieldsBehavior, IconAction, Select, SearchField, Tag, Tooltip } from "@ax/components";
 import { useCategoryColors } from "@ax/hooks";
 
 import { ISource, IFilter } from "../../Context";
@@ -68,6 +68,7 @@ const AutoItem = (props: IProps): JSX.Element => {
       deleted: false,
       include_draft: false,
       order: "alpha-asc",
+      groupingCategories: true,
     };
 
     const site = getIsGlobal(newValue) ? null : siteID;
@@ -117,9 +118,15 @@ const AutoItem = (props: IProps): JSX.Element => {
     }
   };
 
+  const find = (options: IOption[], id: number): IOption | undefined => {
+    let result;
+    options.some((o) => (result = o.id === id ? o : find(o.children || [], id)));
+    return result;
+  };
+
   const handleCheckChange = (checkValue: any) => {
     if (checkValue.isChecked) {
-      const newFilter: any = state.options.find((f: any) => checkValue.value === f.id);
+      const newFilter = find(state.options, checkValue.value);
       if (newFilter) {
         const filterCategory = state.categories.find((cat: ICategory) => cat.value === newFilter.structuredData);
         const selectedCategories =
@@ -207,10 +214,21 @@ const AutoItem = (props: IProps): JSX.Element => {
     addFilter(updatedSource);
   };
 
+  const filterOptions = (options: IOption[], query: string) => {
+    return options.reduce((acc: IOption[], current) => {
+      if (current.content.title.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
+        acc.push(current);
+      }
+      const children = filterOptions(current.children || [], query);
+      if (children.length) {
+        acc = [...acc, ...children];
+      }
+      return acc;
+    }, []);
+  };
+
   const handleSearchChange = (query: string) => {
-    const filteredOptions = state.options.filter(
-      (option) => option.content.title.toLowerCase().indexOf(query.toLowerCase()) !== -1
-    );
+    const filteredOptions = query.trim() !== "" ? filterOptions(state.options, query) : state.options;
     setState({ ...state, filteredOptions });
   };
 
@@ -228,6 +246,28 @@ const AutoItem = (props: IProps): JSX.Element => {
     { value: "AND", label: "AND" },
   ];
 
+  const renderChecks = (options: IOption[]): JSX.Element[] => {
+    return options.map((item) => {
+      return (
+        <React.Fragment key={item.id}>
+          {item.type === "group" ? (
+            <S.GroupTitle>{item.content.title}</S.GroupTitle>
+          ) : (
+            <S.StyledCheckField
+              key={item.id}
+              title={item.content.title}
+              name={item.id}
+              value={item.id}
+              checked={isChecked(item.id)}
+              onChange={handleCheckChange}
+            />
+          )}
+          {item.children && <S.GroupWrapper>{renderChecks(item.children)}</S.GroupWrapper>}
+        </React.Fragment>
+      );
+    });
+  };
+
   return (
     <S.TypeContainer key={source.id}>
       <S.TypeWrapper data-testid="item-type-wrapper">
@@ -321,19 +361,7 @@ const AutoItem = (props: IProps): JSX.Element => {
             <SearchField onChange={handleSearchChange} searchOnEnter={false} size="XS" />
           </S.SearchWrapper>
         )}
-        <S.ChecksWrapper>
-          {state.filteredOptions &&
-            state.filteredOptions.map((option: any) => (
-              <CheckField
-                key={option.content.title}
-                title={option.content.title}
-                name={option.id}
-                value={option.id}
-                checked={isChecked(option.id)}
-                onChange={handleCheckChange}
-              />
-            ))}
-        </S.ChecksWrapper>
+        <S.ChecksWrapper>{state.filteredOptions && renderChecks(state.filteredOptions)}</S.ChecksWrapper>
       </S.ActionsFilterWrapper>
     </S.TypeContainer>
   );
@@ -341,12 +369,12 @@ const AutoItem = (props: IProps): JSX.Element => {
 
 interface IState {
   selected: string;
-  options: any[];
+  options: IOption[];
   isOpen: boolean;
   isAdvancedOpen: boolean;
   categories: ICategory[];
   selectedCategories: ICategory[];
-  filteredOptions: any[];
+  filteredOptions: IOption[];
 }
 
 interface ICategory {
@@ -354,6 +382,16 @@ interface ICategory {
   label: string;
 }
 
+interface IOption {
+  id: number;
+  content: { title: string; code: string };
+  dataLanguages?: { id: number; language: number }[];
+  type: "category" | "group";
+  children?: IOption[];
+  selectable?: boolean;
+  structuredData: string;
+}
+
 interface IProps {
   source: IDataSource;
   canDelete: boolean;

package/src/components/Fields/ReferenceField/AutoPanel/AutoItem/style.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { ActionMenu } from "@ax/components";
+import { ActionMenu, CheckField } from "@ax/components";
 
 const ActionsWrapper = styled.div`
   position: absolute;
@@ -86,6 +86,22 @@ const ClearWrapper = styled.div`
   margin-top: ${(p) => p.theme.spacing.xs};
 `;
 
+const StyledCheckField = styled((props) => <CheckField {...props} />)`
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const GroupWrapper = styled.div`
+  padding-left: ${(p) => p.theme.spacing.s};
+  padding-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const GroupTitle = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  font-style: italic;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
 export {
   IconWrapper,
   TypeContainer,
@@ -101,4 +117,7 @@ export {
   ActionsWrapper,
   SearchWrapper,
   ClearWrapper,
+  StyledCheckField,
+  GroupTitle,
+  GroupWrapper,
 };

package/src/components/Fields/ReferenceField/Context/index.tsx

@@ -100,15 +100,15 @@ export interface IReferenceState {
 
 export interface IRefField {
   mode?: string;
-	order?: string;
-	fixed?: number[];
-	sources?: ISource[];
-	quantity?: number;
-	fullRelations?: boolean;
-	allLanguages?: boolean;
-	preferenceLanguage?: boolean;
-	lang?: number;
-	site?: number;
+  order?: string;
+  fixed?: number[];
+  sources?: ISource[];
+  quantity?: number;
+  fullRelations?: boolean;
+  allLanguages?: boolean;
+  preferenceLanguage?: boolean;
+  lang?: number;
+  site?: number;
 }
 
 export interface IFilter {

package/src/components/LanguageMenu/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
 import { Flag, Icon } from "@ax/components";
+import { ILanguage } from "@ax/types";
 
 import * as S from "./style";
-import { ILanguage } from "@ax/types";
 
 const LanguageMenu = (props: ILanguageMenuProps): JSX.Element => {
   const { availableLanguages, language, setLanguage, isInAppBar, currentLanguages } = props;