@griddo/ax 11.1.7 → 11.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.1.7",
+  "version": "11.1.9",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -225,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dc9869a7fc62dcb58ae27afd05881e4e71fa8d96"
+  "gitHead": "6d0f91ca783b025364513319976c3e9873e76953"
 }

package/src/__tests__/components/Fields/TranslateButton/TranslateButton.test.tsx

@@ -21,9 +21,12 @@ describe("Translate Button component rendering", () => {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: false },
       structuredData: { form: null, isIATranslated: false },
+      forms: { formContent: null },
     };
     const store = mockStore(initialStore);
 
+    defaultProps.contentType = "page";
+
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <TranslateButton {...defaultProps} />
@@ -42,9 +45,12 @@ describe("Translate Button component rendering", () => {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: null, isIATranslated: false },
       structuredData: { form: { canBeTranslated: true }, isIATranslated: false },
+      forms: { formContent: null },
     };
     const store = mockStore(initialStore);
 
+    defaultProps.contentType = "data";
+
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <TranslateButton {...defaultProps} />
@@ -63,9 +69,12 @@ describe("Translate Button component rendering", () => {
       app: { globalSettings: { autoTranslation: false } },
       pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: false },
       structuredData: { form: null, isIATranslated: false },
+      forms: { formContent: null },
     };
     const store = mockStore(initialStore);
 
+    defaultProps.contentType = "page";
+
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <TranslateButton {...defaultProps} />
@@ -84,9 +93,12 @@ describe("Translate Button component rendering", () => {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: { canBeTranslated: false }, isIATranslated: false },
       structuredData: { form: null, isIATranslated: false },
+      forms: { formContent: null },
     };
     const store = mockStore(initialStore);
 
+    defaultProps.contentType = "page";
+
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <TranslateButton {...defaultProps} />
@@ -105,9 +117,12 @@ describe("Translate Button component rendering", () => {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: null, isIATranslated: false },
       structuredData: { form: { canBeTranslated: false }, isIATranslated: false },
+      forms: { formContent: null },
     };
     const store = mockStore(initialStore);
 
+    defaultProps.contentType = "data";
+
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <TranslateButton {...defaultProps} />
@@ -126,9 +141,12 @@ describe("Translate Button component rendering", () => {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: { canBeTranslated: false }, isIATranslated: true },
       structuredData: { form: null, isIATranslated: false },
+      forms: { formContent: null },
     };
     const store = mockStore(initialStore);
 
+    defaultProps.contentType = "page";
+
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <TranslateButton {...defaultProps} />
@@ -147,9 +165,12 @@ describe("Translate Button component rendering", () => {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: null, isIATranslated: false },
       structuredData: { form: { canBeTranslated: false }, isIATranslated: true },
+      forms: { formContent: null },
     };
     const store = mockStore(initialStore);
 
+    defaultProps.contentType = "data";
+
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <TranslateButton {...defaultProps} />
@@ -168,9 +189,12 @@ describe("Translate Button component rendering", () => {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: true },
       structuredData: { form: null, isIATranslated: false },
+      forms: { formContent: null },
     };
     const store = mockStore(initialStore);
 
+    defaultProps.contentType = "page";
+
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <TranslateButton {...defaultProps} />
@@ -189,9 +213,12 @@ describe("Translate Button component rendering", () => {
       app: { globalSettings: { autoTranslation: true } },
       pageEditor: { editorContent: null, isIATranslated: false },
       structuredData: { form: { canBeTranslated: true }, isIATranslated: true },
+      forms: { formContent: null },
     };
     const store = mockStore(initialStore);
 
+    defaultProps.contentType = "data";
+
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <TranslateButton {...defaultProps} />

package/src/__tests__/components/MainWrapper/AppBar/AppBar.test.tsx

@@ -225,6 +225,22 @@ describe("AppBar component rendering", () => {
     const defaultProps: IAppBarProps = {
       title: "the title",
       language: { locale: "es_ES", id: 4 },
+      availableLanguages: [
+        {
+          id: 1,
+          locale: "en_GB",
+          language: "English",
+          label: "EN",
+          isDefault: true,
+        },
+        {
+          id: 2,
+          locale: "es_ES",
+          language: "Spanish",
+          label: "ES",
+          isDefault: false,
+        },
+      ],
     };
 
     render(

package/src/api/checkgroups.tsx

@@ -5,7 +5,7 @@ import { sendRequest, IServiceConfig } from "./utils";
 const SERVICES: { [key: string]: IServiceConfig } = {
   GET_STRUCTURED_DATA: {
     ...template,
-    endpoint: ["/site/", "/structured_data_contents"],
+    endpoint: ["/site/", "/structured_data_contents/", "/checkgroup"],
     method: "GET",
   },
   GET_LIVE_STATUS: {
@@ -13,25 +13,41 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/live-status",
     method: "GET",
   },
+  GET_FORM_CATEGORIES: {
+    ...template,
+    endpoint: ["/site/", "/form/categories/", "/checkgroup"],
+    method: "GET",
+  },
 };
 
 const getCheckGroupItems = async (
   siteId: number | string | null,
   source: string,
   allLanguages?: boolean
-): Promise<AxiosResponse<any>> => {
+): Promise<AxiosResponse> => {
   const {
     host,
-    endpoint: [prefix, suffix],
+    endpoint: [prefix, infix, suffix],
   } = SERVICES.GET_STRUCTURED_DATA;
 
   const allLanguagesQuery = allLanguages ? "&allLanguages=true" : "";
 
-  SERVICES.GET_STRUCTURED_DATA.dynamicUrl = `${host}${prefix}${siteId}${suffix}/${source}/checkgroup?groupingCategories=on&order=title-ASC${allLanguagesQuery}`;
+  SERVICES.GET_STRUCTURED_DATA.dynamicUrl = `${host}${prefix}${siteId}${infix}${source}${suffix}?groupingCategories=on&order=title-ASC${allLanguagesQuery}`;
 
   return sendRequest(SERVICES.GET_STRUCTURED_DATA);
 };
 
-const getLiveStatusItems = async (): Promise<AxiosResponse<any>> => sendRequest(SERVICES.GET_LIVE_STATUS);
+const getFormCategories = async (siteID: number | "global", categoriID: string): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, infix, suffix],
+  } = SERVICES.GET_FORM_CATEGORIES;
+
+  SERVICES.GET_FORM_CATEGORIES.dynamicUrl = `${host}${prefix}${siteID}${infix}${categoriID}${suffix}`;
+
+  return sendRequest(SERVICES.GET_FORM_CATEGORIES);
+};
+
+const getLiveStatusItems = async (): Promise<AxiosResponse> => sendRequest(SERVICES.GET_LIVE_STATUS);
 
-export default { getCheckGroupItems, getLiveStatusItems };
+export default { getCheckGroupItems, getLiveStatusItems, getFormCategories };

package/src/api/forms.tsx

@@ -45,6 +45,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/form/", "/state/"],
     method: "PUT",
   },
+  UPDATE_FORM_STATE_BULK: {
+    ...template,
+    endpoint: "/form/bulk/state/",
+    method: "PUT",
+  },
   GET_FORM_CATEGORIES: {
     ...template,
     endpoint: ["/site/", "/form/categories/"],
@@ -88,9 +93,11 @@ const getForms = async (siteID: number | "global", params: GetFormsParams) => {
     endpoint: [prefix, suffix],
   } = SERVICES.GET_FORMS;
 
-  const { page, itemsPerPage, pagination } = params;
+  const { page, itemsPerPage, pagination, query, filterQuery } = params;
+
+  const searchQuery = query?.length ? `&query=${query}` : "";
 
-  SERVICES.GET_FORMS.dynamicUrl = `${host}${prefix}${siteID}${suffix}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}`;
+  SERVICES.GET_FORMS.dynamicUrl = `${host}${prefix}${siteID}${suffix}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}${searchQuery}${filterQuery || ""}`;
   return sendRequest(SERVICES.GET_FORMS);
 };
 
@@ -128,6 +135,14 @@ const updateFormState = async (formID: number, state: FormState) => {
   return sendRequest(SERVICES.UPDATE_FORM_STATE);
 };
 
+const updateFormStateBulk = async (formIds: number[], state: FormState) => {
+  const { host, endpoint } = SERVICES.UPDATE_FORM_STATE_BULK;
+
+  SERVICES.UPDATE_FORM_STATE_BULK.dynamicUrl = `${host}${endpoint}${state}`;
+
+  return sendRequest(SERVICES.UPDATE_FORM_STATE_BULK, { formIds });
+};
+
 const deleteFormBulk = async (formIds: number[]) => {
   return sendRequest(SERVICES.DELETE_FORM_BULK, { formIds });
 };
@@ -178,6 +193,7 @@ export default {
   getForm,
   createForm,
   updateForm,
+  updateFormStateBulk,
   deleteForm,
   deleteFormBulk,
   getFormCategories,

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

@@ -7,7 +7,18 @@ import { ISite, ICheck } from "@ax/types";
 import * as S from "./style";
 
 const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
-  const { onChange, value, site, source, disabled, error, handleValidation, fullHeight, allLanguages = false } = props;
+  const {
+    onChange,
+    value,
+    site,
+    source,
+    disabled,
+    error,
+    handleValidation,
+    fullHeight,
+    allLanguages = false,
+    contentType = "data",
+  } = props;
 
   const [options, setOptions] = useState<ICheckValue[]>([]);
   const safeValue = value && Array.isArray(value) ? value : [];
@@ -32,7 +43,10 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
       try {
         let result = null;
         const siteID = site ? site.id : "global";
-        result = await checkgroups.getCheckGroupItems(siteID, source, allLanguages);
+        result =
+          contentType === "formCategory"
+            ? await checkgroups.getFormCategories(siteID, source)
+            : await checkgroups.getCheckGroupItems(siteID, source, allLanguages);
         if (result && isReqOk(result.status)) {
           return result.data;
         }
@@ -158,6 +172,7 @@ export interface IAsyncCheckGroup {
   validators?: Record<string, unknown>;
   fullHeight?: boolean;
   allLanguages?: boolean;
+  contentType: "data" | "formCategory";
 }
 
 export default AsyncCheckGroup;

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { getSchemaFormCategories } from "@ax/helpers";
+
+import MultiCheckSelectGroup, { IMultiCheckSelectGroupProps } from "../MultiCheckSelectGroup";
+
+const FormCategorySelect = (props: IFormCategorySelectProps): JSX.Element => {
+  const { categories } = props;
+
+  const schemaCategories = getSchemaFormCategories();
+
+  const elements: IElement[] = categories
+    ? categories.reduce((acc: IElement[], curr: string) => {
+        const schemaCategory = schemaCategories.find((category) => category.value === curr);
+        if (schemaCategory) {
+          acc.push({ key: schemaCategory.value, source: schemaCategory.value, placeholder: schemaCategory.label });
+        }
+        return acc;
+      }, [])
+    : schemaCategories.map((cat) => {
+        return { key: cat.value, source: cat.value, placeholder: cat.label };
+      });
+
+  const formCategorySelectProps: IMultiCheckSelectGroupProps = {
+    ...props,
+    elements,
+    contentType: "formCategory",
+  };
+
+  return <MultiCheckSelectGroup {...formCategorySelectProps} />;
+};
+
+interface IElement {
+  key: string;
+  placeholder: string;
+  source: string;
+}
+
+interface IFormCategorySelectProps {
+  value: Record<string, unknown[]> | Record<string, never> | undefined | null;
+  onChange: (value: Record<string, unknown[]> | Record<string, never>) => void;
+  categories?: string[];
+}
+
+export default FormCategorySelect;

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

@@ -19,6 +19,7 @@ const MultiCheckSelect = (props: IMultiCheckSelectProps) => {
     selectAllOption,
     floating,
     disabled,
+    contentType = "data",
   } = props;
 
   const [isOpen, setIsOpen] = useState(false);
@@ -32,27 +33,30 @@ const MultiCheckSelect = (props: IMultiCheckSelectProps) => {
       <S.Field isOpen={isOpen} onClick={handleClick} disabled={disabled} data-testid="field">
         {placeholder} <Asterisk />
       </S.Field>
-      {isOpen && <S.DropDown floating={floating} isOpen={isOpen}>
-        {options && (
-          <CheckGroup
-            options={options}
-            value={value}
-            onChange={onChange}
-            selectAllOption={selectAllOption}
-            disabled={disabled}
-          />
-        )}
-        {source && !options && (
-          <AsyncCheckGroup
-            source={source}
-            site={site}
-            value={value}
-            onChange={onChange}
-            fullHeight={true}
-            disabled={disabled}
-          />
-        )}
-      </S.DropDown>}
+      {isOpen && (
+        <S.DropDown floating={floating} isOpen={isOpen}>
+          {options && (
+            <CheckGroup
+              options={options}
+              value={value}
+              onChange={onChange}
+              selectAllOption={selectAllOption}
+              disabled={disabled}
+            />
+          )}
+          {source && !options && (
+            <AsyncCheckGroup
+              source={source}
+              site={site}
+              value={value}
+              onChange={onChange}
+              fullHeight={true}
+              disabled={disabled}
+              contentType={contentType}
+            />
+          )}
+        </S.DropDown>
+      )}
     </S.Wrapper>
   );
 };
@@ -69,6 +73,7 @@ export interface IMultiCheckSelectProps {
   selectAllOption?: string;
   floating?: boolean;
   disabled?: boolean;
+  contentType: "data" | "formCategory";
 }
 
 export default memo(MultiCheckSelect);

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

@@ -5,7 +5,7 @@ import { ISite } from "@ax/types";
 import * as S from "./style";
 
 const MultiCheckSelectGroup = (props: IMultiCheckSelectGroupProps) => {
-  const { value, onChange, site, elements, note, disabled, error, handleValidation } = props;
+  const { value, onChange, site, elements, note, disabled, error, handleValidation, contentType = "data" } = props;
 
   const completedValue = value ? value : {};
 
@@ -41,6 +41,7 @@ const MultiCheckSelectGroup = (props: IMultiCheckSelectGroupProps) => {
               placeholder={placeholder}
               source={source}
               disabled={disabled}
+              contentType={contentType}
             />
           );
         })}
@@ -48,15 +49,23 @@ const MultiCheckSelectGroup = (props: IMultiCheckSelectGroupProps) => {
   );
 };
 
+interface IElement {
+  key: string;
+  placeholder: string;
+  source: string;
+  mandatory?: boolean;
+}
+
 export interface IMultiCheckSelectGroupProps {
-  value: Record<string, any[]> | Record<string, never> | undefined | null;
-  elements: any[];
-  onChange: (value: Record<string, any[]> | Record<string, never>) => void;
+  value: Record<string, unknown[]> | Record<string, never> | undefined | null;
+  elements: IElement[];
+  onChange: (value: Record<string, unknown[]> | Record<string, never>) => void;
   site?: ISite;
   note?: string;
   error?: boolean;
   handleValidation?: (value: Record<string, unknown>, validators?: Record<string, unknown>) => void;
   disabled?: boolean;
+  contentType: "data" | "formCategory";
 }
 
 export default memo(MultiCheckSelectGroup);

package/src/components/Fields/index.tsx

@@ -12,6 +12,7 @@ import DateField from "./DateField";
 import FieldGroup from "./FieldGroup";
 import FieldsDivider from "./FieldsDivider";
 import FileField from "./FileField";
+import FormCategorySelect from "./FormCategorySelect";
 import FormFieldArray from "./FormFieldArray";
 import HeadingField from "./HeadingField";
 import HiddenField from "./HiddenField";
@@ -56,6 +57,7 @@ export {
   FieldGroup,
   FieldsDivider,
   FileField,
+  FormCategorySelect,
   FormFieldArray,
   HeadingField,
   HiddenField,

package/src/components/FloatingMenu/index.tsx

@@ -65,7 +65,7 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
   const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) =>
     reactiveToHover && !isOpen ? handleClick(e) : null;
 
-  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => reactiveToHover && isOpen && setOpen(false);
+  const handleMouseLeave = () => reactiveToHover && isOpen && setOpen(false);
 
   useHandleClickOutside(isOpen, handleClickOutside);
 
@@ -97,7 +97,7 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 };
 
 export interface IFloatingProps {
-  children: any;
+  children: JSX.Element | (JSX.Element | boolean | JSX.Element[])[] | boolean;
   Button: any;
   isInAppBar?: boolean;
   position?: string;

package/src/components/Loading/style.tsx

@@ -1,18 +1,15 @@
 import styled from "styled-components";
 
 export const Wrapper = styled.section`
-  background: ${p => p.theme.color.uiBackground01};
-  height: 100vh;
+  background: ${(p) => p.theme.color.uiBackground01};
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 
 export const LoadingWrapper = styled.div`
   position: relative;
-  width: 100%;
-  height: 100%;
-  svg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
+  width: 70px;
+  height: 70px;
 `;

package/src/components/MainWrapper/style.tsx

@@ -13,6 +13,8 @@ const Main = styled.article<{ fullWidth: boolean | undefined }>`
   background: ${(p) => p.theme.color.uiBackground01};
   margin-top: -1px;
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 `;
 
 const LoginAnimation = keyframes`
@@ -41,7 +43,9 @@ const BackgroundAnimation = styled.div`
   width: 100%;
   background-color: ${(p) => p.theme.color.uiMainMenuBackground};
   z-index: 10;
-  animation: ${LoginAnimation} 1.2s ease-in, ${OpacityAnimation} 1s ease-in 1.2s;
+  animation:
+    ${LoginAnimation} 1.2s ease-in,
+    ${OpacityAnimation} 1s ease-in 1.2s;
   animation-fill-mode: forwards;
 `;
 

package/src/components/TableFilters/CategoryFilter/index.tsx

@@ -8,7 +8,7 @@ import { IFilterValue, IQueryValue } from "@ax/types";
 import * as S from "./style";
 
 const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
-  const { filterItems, value, structuredData, siteID } = props;
+  const { filterItems, value, structuredData, siteID, formCategory, pointer = "categories" } = props;
 
   const filters: IFilterValue[] = [
     {
@@ -22,11 +22,14 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
   const parsedValue = Array.isArray(value) && value.length ? value.map((val) => val.value) : [selectAllOption];
   const [selectedValue, setSelectedValue] = useState(parsedValue);
   const [options, setOptions] = useState(filters);
+  const title = formCategory ? formCategory.label : structuredData.title;
 
   const getSelectCategories = async () => {
     try {
       const site = siteID ? siteID : "global";
-      const items = await checkgroups.getCheckGroupItems(site, structuredData.source);
+      const items = formCategory
+        ? await checkgroups.getFormCategories(site, formCategory.value)
+        : await checkgroups.getCheckGroupItems(site, structuredData.source);
       if (items && isReqOk(items.status)) {
         return items.data;
       }
@@ -67,14 +70,14 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
       const label = options.find((opt: IFilterValue) => opt.value === value);
       return { value, label: label?.title || "" };
     });
-    filterItems("categories", queryFilters);
+    filterItems(pointer, queryFilters);
   };
 
   const isActive = !areEquals(selectedValue, [selectAllOption]);
 
   const Header = () => (
     <S.HeaderWrapper isActive={isActive}>
-      {trimText(structuredData.title, 23)}
+      {trimText(title, 23)}
       <S.IconsWrapper>
         {isActive ? <Icon name="Filter" size="16" /> : <Icon name="DownArrow" size="16" />}
       </S.IconsWrapper>
@@ -94,8 +97,10 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
 export interface ICategoryFilterProps {
   filterItems(pointer: string, filter: IQueryValue[]): void;
   value: IQueryValue[];
-  structuredData: any;
+  structuredData?: any;
   siteID: number | null;
+  formCategory?: { value: string; label: string };
+  pointer?: string;
 }
 
 export default CategoryFilter;

package/src/components/TableFilters/CheckGroupFilter/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
 import { areEquals } from "@ax/helpers";
-import { IQueryValue } from "@ax/types";
+import { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -16,6 +16,7 @@ const CheckGroupFilter = (props: ITypeFilterProps): JSX.Element => {
     selectAllOption,
     initialState,
     multipleSelection = true,
+    menuPosition = "center",
   } = props;
 
   const arrayValues = Array.isArray(value) && value.length ? value.map((val) => val.value) : initialState;
@@ -32,7 +33,7 @@ const CheckGroupFilter = (props: ITypeFilterProps): JSX.Element => {
     }
     setSelectedValue(selection);
     const queryFilters: IQueryValue[] = selection.map((value: string | number) => {
-      const label = filters.find((opt: IFilter) => opt.value === value);
+      const label = filters.find((opt) => opt.value === value);
       return { value, label: label?.title || "" };
     });
     filterItems(pointer, queryFilters);
@@ -50,7 +51,7 @@ const CheckGroupFilter = (props: ITypeFilterProps): JSX.Element => {
   );
 
   return (
-    <FloatingMenu Button={Header} closeOnSelect={!multipleSelection} isCheckGroup={true} position="center">
+    <FloatingMenu Button={Header} closeOnSelect={!multipleSelection} isCheckGroup={true} position={menuPosition}>
       <ListTitle>{description}</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup
@@ -65,22 +66,17 @@ const CheckGroupFilter = (props: ITypeFilterProps): JSX.Element => {
   );
 };
 
-interface IFilter {
-  name: string;
-  value: string;
-  title: string;
-}
-
 interface ITypeFilterProps {
   label: string;
   description: string;
   filterItems(pointer: string, filter: IQueryValue[]): void;
-  filters: IFilter[];
+  filters: IFilterValue[];
   pointer: string;
   value: IQueryValue[];
   selectAllOption: string;
   initialState: string[];
   multipleSelection?: boolean;
+  menuPosition?: string;
 }
 
 export default CheckGroupFilter;