@griddo/ax 10.3.24 → 10.3.25

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.3.24",
+  "version": "10.3.25",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -231,5 +231,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "84f8b78edde8afdb4eb3588d10a742cbd882b632"
+  "gitHead": "21631316b206fded39f6b4d430381952dffddc75"
 }

package/src/__tests__/components/Gallery/GalleryFilters/Orientation/Orientation.test.tsx

@@ -7,13 +7,16 @@ import "@testing-library/jest-dom";
 import { parseTheme } from "@ax/helpers";
 import Orientation, { IOrientationProps } from "@ax/components/Gallery/GalleryFilters/Orientation";
 import globalTheme from "@ax/themes/theme.json";
+import { IQueryValue } from "@ax/types";
 
 afterEach(() => {
   cleanup();
 });
 
 const defaultProps = mock<IOrientationProps>();
-const filterItemsMock = defaultProps.filterItems as jest.MockedFunction<(pointer: string, filter: string) => void>;
+const filterItemsMock = defaultProps.filterItems as jest.MockedFunction<
+  (pointer: string, filter: IQueryValue[]) => void
+>;
 
 describe("OrderBy filter component rendering", () => {
   it("should render the component", () => {
@@ -46,6 +49,6 @@ describe("OrderBy filter component rendering", () => {
     expect(listItem).toHaveLength(4);
     fireEvent.click(listItem[1]);
 
-    expect(filterItemsMock).toBeCalledWith("orientation", "landscape");
+    expect(filterItemsMock).toBeCalledWith("orientation", [{ label: "Horizontal", value: "landscape" }]);
   });
 });

package/src/__tests__/components/Gallery/GalleryFilters/SortBy/SortBy.test.tsx

@@ -7,6 +7,7 @@ import "@testing-library/jest-dom";
 import { parseTheme } from "@ax/helpers";
 import SortBy, { ISortByProps } from "@ax/components/Gallery/GalleryFilters/SortBy";
 import globalTheme from "@ax/themes/theme.json";
+import { IQueryValue } from "@ax/types";
 
 afterEach(() => {
   cleanup();
@@ -14,7 +15,7 @@ afterEach(() => {
 
 const defaultProps = mock<ISortByProps>();
 const sortItemsMock = defaultProps.sortItems as jest.MockedFunction<
-  (orderPointer: string, isAscendent: boolean) => void
+  (orderPointer: IQueryValue[], isAscendent: boolean) => void
 >;
 
 describe("Gallery component rendering", () => {
@@ -62,7 +63,7 @@ describe("Gallery component rendering", () => {
     expect(listItem).toHaveLength(6);
     fireEvent.click(listItem[0]);
 
-    expect(sortItemsMock).toBeCalledWith("name", true);
+    expect(sortItemsMock).toBeCalledWith([{ label: "name", value: "name" }], true);
   });
 
   it("should call the list item with date and descending", () => {
@@ -87,7 +88,7 @@ describe("Gallery component rendering", () => {
     expect(listItem).toHaveLength(6);
     fireEvent.click(listItem[2]);
 
-    expect(sortItemsMock).toBeCalledWith("date", false);
+    expect(sortItemsMock).toBeCalledWith([{ label: "date", value: "date" }], false);
   });
 
   it("should call the list item with size and ascending", () => {
@@ -112,6 +113,6 @@ describe("Gallery component rendering", () => {
     expect(listItem).toHaveLength(6);
     fireEvent.click(listItem[4]);
 
-    expect(sortItemsMock).toBeCalledWith("size", true);
+    expect(sortItemsMock).toBeCalledWith([{ label: "size", value: "size" }], true);
   });
 });

package/src/__tests__/components/Gallery/GalleryFilters/Type/Type.test.tsx

@@ -7,13 +7,16 @@ import "@testing-library/jest-dom";
 import { parseTheme } from "@ax/helpers";
 import Type, { ITypeProps } from "@ax/components/Gallery/GalleryFilters/Type";
 import globalTheme from "@ax/themes/theme.json";
+import { IQueryValue } from "@ax/types";
 
 afterEach(() => {
   cleanup();
 });
 
 const defaultProps = mock<ITypeProps>();
-const filterItemsMock = defaultProps.filterItems as jest.MockedFunction<(pointer: string, filter: string) => void>;
+const filterItemsMock = defaultProps.filterItems as jest.MockedFunction<
+  (pointer: string, filter: IQueryValue[]) => void
+>;
 
 describe("Type filter component rendering", () => {
   it("should render the component", () => {
@@ -46,6 +49,6 @@ describe("Type filter component rendering", () => {
     expect(listItem).toHaveLength(3);
     fireEvent.click(listItem[1]);
 
-    expect(filterItemsMock).toBeCalledWith("format", "bitmap");
+    expect(filterItemsMock).toBeCalledWith("format", [{ label: "Image", value: "bitmap" }]);
   });
 });

package/src/__tests__/components/TableFilters/CategoryFilter/CategoryFilter.test.tsx

@@ -8,6 +8,7 @@ import { render, screen, cleanup, fireEvent, act } from "@testing-library/react"
 import { parseTheme } from "@ax/helpers";
 import CategoryFilter, { ICategoryFilterProps } from "@ax/components/TableFilters/CategoryFilter";
 import globalTheme from "@ax/themes/theme.json";
+import { IQueryValue } from "@ax/types";
 
 afterEach(cleanup);
 
@@ -18,9 +19,9 @@ const defaultProps = mock<ICategoryFilterProps>();
 
 describe("Category filter component rendering", () => {
   it("should render category filter", async () => {
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
     defaultProps.filterItems = filterItemsMock;
-    defaultProps.value = "all";
+    defaultProps.value = [{ value: "all", label: "All" }];
     defaultProps.siteID = null;
     defaultProps.structuredData = {
       from: "profile",
@@ -59,9 +60,9 @@ describe("Category filter component rendering", () => {
   });
 
   it("should render the component with no options", async () => {
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
     defaultProps.filterItems = filterItemsMock;
-    defaultProps.value = "all";
+    defaultProps.value = [{ value: "all", label: "All" }];
     defaultProps.siteID = null;
     defaultProps.structuredData = {
       from: "profile",
@@ -103,9 +104,9 @@ describe("Category filter component rendering", () => {
 
 describe("CategoryFilter events", () => {
   it("should render check group on click floating menu button", async () => {
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
     defaultProps.filterItems = filterItemsMock;
-    defaultProps.value = "all";
+    defaultProps.value = [{ value: "all", label: "All" }];
     defaultProps.siteID = null;
     defaultProps.structuredData = {
       from: "profile",
@@ -150,9 +151,9 @@ describe("CategoryFilter events", () => {
   });
 
   it("should check option on click", async () => {
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
     defaultProps.filterItems = filterItemsMock;
-    defaultProps.value = "all";
+    defaultProps.value = [{ value: "all", label: "All" }];
     defaultProps.siteID = null;
     defaultProps.structuredData = {
       from: "profile",
@@ -199,9 +200,9 @@ describe("CategoryFilter events", () => {
   });
 
   it("should call filterItems action on change", async () => {
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
     defaultProps.filterItems = filterItemsMock;
-    defaultProps.value = "all";
+    defaultProps.value = [{ value: "all", label: "All" }];
     defaultProps.siteID = null;
     defaultProps.structuredData = {
       from: "profile",
@@ -241,6 +242,6 @@ describe("CategoryFilter events", () => {
     const checkFieldInputs = screen.queryAllByTestId("check-field-input");
     fireEvent.click(checkFieldInputs[1]);
     expect(filterItemsMock).toHaveBeenCalledTimes(1);
-    expect(filterItemsMock).toBeCalledWith("categories", "1");
+    expect(filterItemsMock).toBeCalledWith("categories", [{ label: "Mentor", value: 1 }]);
   });
 });

package/src/__tests__/components/TableFilters/DateFilter/DateFilter.test.tsx

@@ -9,6 +9,7 @@ import { parseTheme } from "@ax/helpers";
 
 import globalTheme from "@ax/themes/theme.json";
 import DateFilter, { IDateFilterProps } from "@ax/components/TableFilters/DateFilter";
+import { IQueryValue } from "@ax/types";
 
 afterEach(cleanup);
 const defaultProps = mock<IDateFilterProps>();
@@ -16,8 +17,8 @@ describe("DateFilter component rendering", () => {
   it("should render date filter", () => {
     const sortItemsMock = jest.fn();
     defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <DateFilter {...defaultProps} />
@@ -32,8 +33,8 @@ describe("DateFilter component rendering", () => {
   it("should render interactive arrow if not filter selected", () => {
     const sortItemsMock = jest.fn();
     defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <DateFilter {...defaultProps} />
@@ -47,8 +48,8 @@ describe("DateFilter component rendering", () => {
   it("should not render interactive arrow if filter selected", () => {
     const sortItemsMock = jest.fn();
     defaultProps.sortedState = { isAscending: false, sortedByDate: true };
-    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <DateFilter {...defaultProps} />
@@ -62,8 +63,8 @@ describe("DateFilter component rendering", () => {
   it("should render FullArrowUp icon if is filtered by ascending date", () => {
     const sortItemsMock = jest.fn();
     defaultProps.sortedState = { isAscending: true, sortedByDate: true };
-    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
@@ -80,8 +81,8 @@ describe("DateFilter events", () => {
   it("should render check group on click floating menu", () => {
     const sortItemsMock = jest.fn();
     defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <DateFilter {...defaultProps} />
@@ -102,8 +103,8 @@ describe("DateFilter events", () => {
   it("should call sortItems on click 'Most recent' option", async () => {
     const sortItemsMock = jest.fn();
     defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
@@ -120,14 +121,14 @@ describe("DateFilter events", () => {
     fireEvent.click(listItems[0]);
     expect(sortItemsMock).toHaveBeenCalledTimes(1);
     const isAscending = false;
-    expect(sortItemsMock).toBeCalledWith("date", isAscending);
+    expect(sortItemsMock).toBeCalledWith([{ label: "date", value: "date" }], isAscending);
   });
 
   it("should call sortItems ascending on click 'Oldest' option", async () => {
     const sortItemsMock = jest.fn();
     defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
@@ -143,6 +144,6 @@ describe("DateFilter events", () => {
     fireEvent.click(listItems[1]);
     expect(sortItemsMock).toHaveBeenCalledTimes(1);
     const isAscending = true;
-    expect(sortItemsMock).toBeCalledWith("date", isAscending);
+    expect(sortItemsMock).toBeCalledWith([{ label: "date", value: "date" }], isAscending);
   });
 });

package/src/__tests__/components/TableFilters/LiveFilter/LiveFilter.test.tsx

@@ -8,6 +8,7 @@ import { render, screen, cleanup, act, fireEvent } from "@testing-library/react"
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import LiveFilter, { ILiveFilterProps } from "@ax/components/TableFilters/LiveFilter";
+import { IQueryValue } from "@ax/types";
 
 afterEach(cleanup);
 jest.mock("axios");
@@ -17,8 +18,8 @@ const defaultProps = mock<ILiveFilterProps>();
 describe("LiveFilter component rendering", () => {
   it("should render live filter", async () => {
     defaultProps.hasBasicStatus = false;
-    defaultProps.value = "all";
-    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.value = [{ value: "all", label: "All" }];
+    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItems;
     const data = {
@@ -53,8 +54,8 @@ describe("LiveFilter component rendering", () => {
 
   it("should render the component with no options", async () => {
     defaultProps.hasBasicStatus = false;
-    defaultProps.value = "all";
-    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.value = [{ value: "all", label: "All" }];
+    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItems;
 
@@ -91,8 +92,8 @@ describe("LiveFilter component rendering", () => {
 describe("LiveFilter events", () => {
   it("should render check group on click", async () => {
     defaultProps.hasBasicStatus = false;
-    defaultProps.value = "all";
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.value = [{ value: "all", label: "All" }];
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItemsMock;
     const data = {
@@ -132,8 +133,8 @@ describe("LiveFilter events", () => {
 
   it("should check option on click", async () => {
     defaultProps.hasBasicStatus = false;
-    defaultProps.value = "all";
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.value = [{ value: "all", label: "All" }];
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItemsMock;
     const data = {
@@ -176,8 +177,8 @@ describe("LiveFilter events", () => {
 
   it("should uncheck selected option on click and select 'All' option", async () => {
     defaultProps.hasBasicStatus = false;
-    defaultProps.value = "all";
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.value = [{ value: "all", label: "All" }];
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItemsMock;
     const data = {
@@ -225,8 +226,8 @@ describe("LiveFilter events", () => {
 
   it("should call filterItems action on change", async () => {
     defaultProps.hasBasicStatus = false;
-    defaultProps.value = "all";
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.value = [{ value: "all", label: "All" }];
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItemsMock;
     const data = {
@@ -261,6 +262,6 @@ describe("LiveFilter events", () => {
     const checkFieldInputs = screen.queryAllByTestId("check-field-input");
     fireEvent.click(checkFieldInputs[1]);
     expect(filterItemsMock).toHaveBeenCalledTimes(1);
-    expect(filterItemsMock).toBeCalledWith("liveStatus", "offline");
+    expect(filterItemsMock).toBeCalledWith("liveStatus", [{ label: "Offline", value: "offline" }]);
   });
 });

package/src/__tests__/components/TableFilters/NameFilter/NameFilter.test.tsx

@@ -8,13 +8,14 @@ import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import NameFilter, { INameFilterProps } from "@ax/components/TableFilters/NameFilter";
+import { IQueryValue } from "@ax/types";
 
 afterEach(cleanup);
 const defaultProps = mock<INameFilterProps>();
 describe("NameFilter component rendering", () => {
   it("should render name filter", () => {
-    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
     defaultProps.sortedState = { isAscending: false, sortedByDate: false, sortedByTitle: false, sortedByURL: false };
     defaultProps.sortItems = onClickMock;
     defaultProps.urlSorting = false;
@@ -31,8 +32,8 @@ describe("NameFilter component rendering", () => {
   });
 
   it("should render URL on title if it is URL sorting", () => {
-    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
     defaultProps.sortedState = { isAscending: true, sortedByTitle: true };
     defaultProps.sortItems = onClickMock;
     defaultProps.urlSorting = true;
@@ -49,8 +50,8 @@ describe("NameFilter component rendering", () => {
   });
 
   it("should render URL sorting option if it is URL sorting", () => {
-    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
     defaultProps.sortedState = { isAscending: true, sortedByTitle: true };
     defaultProps.sortItems = onClickMock;
     defaultProps.urlSorting = true;
@@ -71,8 +72,8 @@ describe("NameFilter component rendering", () => {
   });
 
   it("should render interactive arrow if not filter selected", () => {
-    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
     defaultProps.sortedState = { isAscending: false, sortedByDate: false, sortedByTitle: false, sortedByURL: false };
     defaultProps.sortItems = onClickMock;
     defaultProps.urlSorting = false;
@@ -88,8 +89,8 @@ describe("NameFilter component rendering", () => {
   });
 
   it("should not render interactive arrow if not filter selected", () => {
-    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
     defaultProps.sortedState = { isAscending: false, sortedByTitle: true };
     defaultProps.sortItems = onClickMock;
     defaultProps.urlSorting = false;
@@ -105,8 +106,8 @@ describe("NameFilter component rendering", () => {
   });
 
   it("should render FullArrowUp icon if is filtered by ascending name", () => {
-    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
     defaultProps.sortedState = { isAscending: true, sortedByTitle: true };
     defaultProps.sortItems = onClickMock;
     defaultProps.urlSorting = false;
@@ -126,8 +127,8 @@ describe("NameFilter events", () => {
   it("should render check group on click", () => {
     const onClickMock = jest.fn();
     defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-    defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
@@ -149,8 +150,8 @@ describe("NameFilter events", () => {
   it("should call filterItems with isAscending on click 'Ascendent' option", async () => {
     const onClickMock = jest.fn();
     defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-    defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
@@ -167,14 +168,14 @@ describe("NameFilter events", () => {
     fireEvent.click(listItems[0]);
     expect(onClickMock).toHaveBeenCalledTimes(1);
     const isAscending = true;
-    expect(onClickMock).toBeCalledWith("title", isAscending);
+    expect(onClickMock).toBeCalledWith([{ label: "title", value: "title" }], isAscending);
   });
 
   it("should call filterItems with isAscending false on click 'Descendent' option", async () => {
     const onClickMock = jest.fn();
     defaultProps.sortedState = { isAscending: false, sortedByDate: false };
-    defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
-      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: IQueryValue[], isAscendent: boolean]> &
+      ((orderPointer: IQueryValue[], isAscendent: boolean) => any);
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
@@ -191,6 +192,6 @@ describe("NameFilter events", () => {
     fireEvent.click(listItems[1]);
     expect(onClickMock).toHaveBeenCalledTimes(1);
     const isAscending = false;
-    expect(onClickMock).toBeCalledWith("title", isAscending);
+    expect(onClickMock).toBeCalledWith([{ label: "title", value: "title" }], isAscending);
   });
 });

package/src/__tests__/components/TableFilters/RoleFilter/RoleFilter.test.tsx

@@ -7,6 +7,7 @@ import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import RoleFilter, { IRoleFilterProps } from "@ax/components/TableFilters/RoleFilter";
 import globalTheme from "@ax/themes/theme.json";
 import { parseTheme } from "@ax/helpers";
+import { IQueryValue } from "@ax/types";
 
 afterEach(cleanup);
 
@@ -31,7 +32,7 @@ describe("RoleFilter component rendering", () => {
       },
     ];
     defaultProps.pointer = "filterRoles";
-    defaultProps.filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
@@ -65,7 +66,7 @@ describe("RoleFilter events", () => {
       },
     ];
     defaultProps.pointer = "filterRoles";
-    defaultProps.filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
@@ -103,7 +104,7 @@ describe("RoleFilter events", () => {
       },
     ];
     defaultProps.pointer = "filterRoles";
-    const onChangeMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const onChangeMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
     defaultProps.filterItems = onChangeMock;
 
     render(
@@ -144,7 +145,7 @@ describe("RoleFilter events", () => {
       },
     ];
     defaultProps.pointer = "filterRoles";
-    const onChangeMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const onChangeMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
     defaultProps.filterItems = onChangeMock;
 
     render(
@@ -160,6 +161,6 @@ describe("RoleFilter events", () => {
     const checkFieldInputs = screen.queryAllByTestId("check-field-input");
     fireEvent.click(checkFieldInputs[1]);
     expect(onChangeMock).toHaveBeenCalledTimes(1);
-    expect(onChangeMock).toBeCalledWith("filterRoles", "1");
+    expect(onChangeMock).toBeCalledWith("filterRoles", [{ label: "Administrator", value: "1" }]);
   });
 });

package/src/__tests__/components/TableFilters/SiteFilter/SiteFilter.test.tsx

@@ -8,6 +8,7 @@ import { render, screen, cleanup, act, fireEvent } from "@testing-library/react"
 import { parseTheme } from "@ax/helpers";
 import SiteFilter, { ISiteFilterProps } from "@ax/components/TableFilters/SiteFilter";
 import globalTheme from "@ax/themes/theme.json";
+import { IQueryValue } from "@ax/types";
 
 afterEach(cleanup);
 jest.mock("axios");
@@ -28,7 +29,7 @@ describe("SiteFilter component rendering", () => {
         title: "All",
       },
     ];
-    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItems;
     const data = {
@@ -73,7 +74,7 @@ describe("SiteFilter component rendering", () => {
         title: "All",
       },
     ];
-    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItems;
 
@@ -121,7 +122,7 @@ describe("SiteFilter events", () => {
         title: "All",
       },
     ];
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItemsMock;
     const data = {
@@ -171,7 +172,7 @@ describe("SiteFilter events", () => {
         title: "All",
       },
     ];
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItemsMock;
     const data = {
@@ -224,7 +225,7 @@ describe("SiteFilter events", () => {
         title: "All",
       },
     ];
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItemsMock;
     const data = {
@@ -279,7 +280,7 @@ describe("SiteFilter events", () => {
         title: "All",
       },
     ];
-    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
     defaultProps.filterItems = filterItemsMock;
     const data = {
@@ -313,6 +314,6 @@ describe("SiteFilter events", () => {
     const checkFieldInputs = screen.queryAllByTestId("check-field-input");
     fireEvent.click(checkFieldInputs[1]);
     expect(filterItemsMock).toHaveBeenCalledTimes(1);
-    expect(filterItemsMock).toBeCalledWith("filterSites", "1");
+    expect(filterItemsMock).toBeCalledWith("filterSites", [{ label: "Site 1", value: 1 }]);
   });
 });