@griddo/ax 1.71.0 → 1.72.0

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

@@ -0,0 +1,164 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { CalledWithMock, mock } from "jest-mock-extended";
+
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import TypeFilter, { ITypeFilterProps } from "@ax/components/TableFilters/TypeFilter";
+import globalTheme from "@ax/themes/theme.json";
+import { parseTheme } from "@ax/helpers";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ITypeFilterProps>();
+describe("TypeFilter component rendering", () => {
+  it("should render type filter", () => {
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All content",
+      },
+      {
+        name: "unique",
+        value: "unique",
+        title: "Basic templates",
+      },
+      {
+        name: "structuredData",
+        value: "structuredData",
+        title: "Content types",
+      },
+    ];
+    defaultProps.pointer = "type";
+    defaultProps.filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TypeFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const typeFilter = screen.getByTestId("floating-menu");
+    expect(typeFilter).toBeTruthy();
+    expect(typeFilter.textContent).toEqual("Types");
+  });
+});
+
+describe("TypeFilter events", () => {
+  it("should render check group on click", () => {
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All content",
+      },
+      {
+        name: "unique",
+        value: "unique",
+        title: "Basic templates",
+      },
+      {
+        name: "structuredData",
+        value: "structuredData",
+        title: "Content types",
+      },
+    ];
+    defaultProps.pointer = "type";
+    defaultProps.filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TypeFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const typeFilterButton = screen.getByTestId("floating-menu-button");
+    expect(typeFilterButton).toBeTruthy();
+    fireEvent.click(typeFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const checkGroupFieldGroup = screen.getByTestId("check-group-field-group");
+    expect(checkGroupFieldGroup).toBeTruthy();
+    const checkFieldLabels = screen.getAllByTestId("check-field-label");
+    expect(checkFieldLabels).toHaveLength(3);
+  });
+
+  it("should check option on click", () => {
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All content",
+      },
+      {
+        name: "unique",
+        value: "unique",
+        title: "Basic templates",
+      },
+      {
+        name: "structuredData",
+        value: "structuredData",
+        title: "Content types",
+      },
+    ];
+    defaultProps.pointer = "type";
+    const onChangeMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.filterItems = onChangeMock;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TypeFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const typeFilterButton = screen.getByTestId("floating-menu-button");
+    expect(typeFilterButton).toBeTruthy();
+    fireEvent.click(typeFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const checkGroupFieldGroup = screen.getByTestId("check-group-field-group");
+    expect(checkGroupFieldGroup).toBeTruthy();
+    const checkFieldInputs = screen.getAllByTestId<HTMLInputElement>("check-field-input");
+    expect(checkFieldInputs).toHaveLength(3);
+    fireEvent.change(checkFieldInputs[1], { target: { checked: true, value: "unique" } });
+    expect(checkFieldInputs[1].checked).toBe(true);
+  });
+
+  it("should call filterItems action on change", async () => {
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All content",
+      },
+      {
+        name: "unique",
+        value: "unique",
+        title: "Basic templates",
+      },
+      {
+        name: "structuredData",
+        value: "structuredData",
+        title: "Content types",
+      },
+    ];
+    defaultProps.pointer = "type";
+    const onChangeMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.filterItems = onChangeMock;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TypeFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const typeFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(typeFilterButton).toBeTruthy();
+    fireEvent.click(typeFilterButton);
+    const checkFieldInputs = screen.queryAllByTestId("check-field-input");
+    fireEvent.click(checkFieldInputs[1]);
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(onChangeMock).toBeCalledWith("type", "unique");
+  });
+});

package/src/__tests__/components/TableList/TableList.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import { mock } from "jest-mock-extended";
 import configureStore from "redux-mock-store";
 
@@ -101,7 +101,7 @@ describe("TableList", () => {
   });
 
   it("should display paginator when totalItems is greater than itemsPerPage", async () => {
-    defaultProps.pagination = { currPage: 1, itemsPerPage: 50, setPage: setPage, totalItems: 60 }
+    defaultProps.pagination = { currPage: 1, itemsPerPage: 50, setPage: setPage, totalItems: 60 };
     defaultProps.hasFixedHeader = true;
     const store = mockStore(initialStore);
     const initialState = { ...initialStore, ...defaultProps };

package/src/__tests__/components/Tabs/Tabs.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Tabs, { ITabsProps } from "@ax/components/Tabs";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { mock } from "jest-mock-extended";
@@ -65,24 +65,6 @@ describe("Tabs component rendering", () => {
     expect(setSelectedTabAction).toBeCalled();
   });
 
-  it("should set tab as active on click", async () => {
-    defaultProps.tabs = ["tab1", "tab2"];
-    defaultProps.active = "tab1";
-    const setSelectedTabAction = jest.fn();
-    defaultProps.setSelectedTab = setSelectedTabAction;
-
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <Tabs {...defaultProps} />
-      </ThemeProvider>
-    );
-    const tabs = screen.getAllByTestId("tab");
-    fireEvent.click(tabs[1]);
-    expect(setSelectedTabAction).toBeCalled();
-    expect(tabs[0]).toHaveStyleRule("cursor", "initial");
-    expect(tabs[1]).toHaveStyleRule("cursor", "pointer");
-  });
-
   it("should render tabs row with icons if icons available", async () => {
     defaultProps.tabs = undefined;
     defaultProps.icons = [
@@ -139,9 +121,9 @@ describe("Tabs component rendering", () => {
     expect(tooltips[1].textContent).toBe("Preview mode");
   });
 
-  it("should call set selected tab action on click icon tab", async () => {
+  it("should not display icon if doesn't exist", async () => {
     defaultProps.icons = [
-      { name: "edit", text: "Edit mode" },
+      { name: "failed-icon", text: "Edit mode" },
       { name: "view", text: "Preview mode" },
     ];
     defaultProps.active = "edit";
@@ -153,12 +135,35 @@ describe("Tabs component rendering", () => {
         <Tabs {...defaultProps} />
       </ThemeProvider>
     );
-    const tabs = screen.getAllByTestId("icon-tab");
+    const tooltips = screen.getAllByTestId("tooltip-component");
+    expect(tooltips[0]).toBeTruthy();
+    expect(tooltips[1]).toBeTruthy();
+    const tooltipIcons = screen.getAllByTestId("icon-component");
+    expect(tooltipIcons.length).toEqual(1);
+  });
+});
+
+describe("Tabs component events", () => {
+  it("should set tab as active on click", async () => {
+    defaultProps.tabs = ["tab1", "tab2"];
+    defaultProps.active = "tab1";
+    const setSelectedTabAction = jest.fn();
+    defaultProps.setSelectedTab = setSelectedTabAction;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Tabs {...defaultProps} />
+      </ThemeProvider>
+    );
+    const tabs = screen.getAllByTestId("tab");
     fireEvent.click(tabs[1]);
     expect(setSelectedTabAction).toBeCalled();
+    expect(tabs[0]).toHaveStyleRule("cursor", "initial");
+    expect(tabs[1]).toHaveStyleRule("cursor", "pointer");
   });
 
-  it("should set icon tab as active on click", async () => {
+  it("should call set selected tab action on click icon tab", async () => {
+    defaultProps.tabs = undefined;
     defaultProps.icons = [
       { name: "edit", text: "Edit mode" },
       { name: "view", text: "Preview mode" },
@@ -175,13 +180,11 @@ describe("Tabs component rendering", () => {
     const tabs = screen.getAllByTestId("icon-tab");
     fireEvent.click(tabs[1]);
     expect(setSelectedTabAction).toBeCalled();
-    expect(tabs[0]).toHaveStyleRule("cursor", "initial");
-    expect(tabs[1]).toHaveStyleRule("cursor", "pointer");
   });
 
-  it("should not display icon if doesn't exist", async () => {
+  it("should set icon tab as active on click", async () => {
     defaultProps.icons = [
-      { name: "failed-icon", text: "Edit mode" },
+      { name: "edit", text: "Edit mode" },
       { name: "view", text: "Preview mode" },
     ];
     defaultProps.active = "edit";
@@ -193,10 +196,10 @@ describe("Tabs component rendering", () => {
         <Tabs {...defaultProps} />
       </ThemeProvider>
     );
-    const tooltips = screen.getAllByTestId("tooltip-component");
-    expect(tooltips[0]).toBeTruthy();
-    expect(tooltips[1]).toBeTruthy();
-    const tooltipIcons = screen.getAllByTestId("icon-component");
-    expect(tooltipIcons.length).toEqual(1);
+    const tabs = screen.getAllByTestId("icon-tab");
+    fireEvent.click(tabs[1]);
+    expect(setSelectedTabAction).toBeCalled();
+    expect(tabs[0]).toHaveStyleRule("cursor", "initial");
+    expect(tabs[1]).toHaveStyleRule("cursor", "pointer");
   });
-});
+});

package/src/__tests__/components/Tag/Tag.test.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "styled-components";
 import { mock } from "jest-mock-extended";
 
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 
 import globalTheme from "@ax/themes/theme.json";
 import Tag, { ITagProps } from "@ax/components/Tag";
@@ -100,7 +100,9 @@ describe("Tag component rendering", () => {
     const deleteIconWrapper = screen.getByTestId("delete-icon-wrapper");
     expect(deleteIconWrapper).toBeTruthy();
   });
+});
 
+describe("Tag component events", () => {
   it("should called deleteAction when click delete button", () => {
     defaultProps.type = "fixed";
     defaultProps.text = "Modules";
@@ -135,4 +137,4 @@ describe("Tag component rendering", () => {
     const styles = getComputedStyle(tagFixed);
     expect(styles.backgroundColor).toEqual("rgba(80, 87, 255, 0.16)");
   });
-});
+});

package/src/__tests__/components/Toast/Toast.test.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import { mock } from "jest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 
 import Toast, { IToastProps } from "@ax/components/Toast";
 import globalTheme from "@ax/themes/theme.json";
@@ -54,7 +54,9 @@ describe("Toast component rendering", () => {
     const button = screen.queryByTestId("button-line-inverse");
     expect(button).toBeFalsy();
   });
+});
 
+describe("Toast component events", () => {
   it("should render the undo button when action", () => {
     defaultProps.message = "1 module copied to clipboard";
     defaultProps.action = jest.fn();
@@ -92,7 +94,7 @@ describe("Toast component rendering", () => {
     );
 
     const toastWrapper = screen.getByTestId("toast-wrapper");
-    const closeButton = screen.getByTestId("iconActionComponent");
+    const closeButton = screen.getByTestId("icon-action-component");
     expect(closeButton).toBeTruthy();
     fireEvent.click(closeButton);
     expect(toastWrapper.classList.contains("close-animation")).toBeTruthy();

package/src/components/FieldContainer/index.tsx

@@ -5,7 +5,7 @@ import { getNullValue, getDefaultSchema, getDefaultTemplate } from "@ax/helpers"
 
 import { FieldsBehavior, HiddenField } from "@ax/components";
 
-const FieldContainer = (props: IProps) => {
+const FieldContainer = (props: IFieldContainerProps) => {
   const { selectedContent, updateValue, field, goTo, objKey, lang } = props;
 
   const { type, key, title, hideable, slugTo } = field;
@@ -28,9 +28,9 @@ const FieldContainer = (props: IProps) => {
   };
 
   const hasMultipleOptions = field.whiteList && field.whiteList.length > 1;
-
   const nullValue = isContainer ? getNullValue(containerValue, hasMultipleOptions) : null;
   const hasNullValue = JSON.stringify(containerValue) === JSON.stringify(nullValue);
+
   const getField = () => <FieldsBehavior {...fieldProps} key={key} />;
 
   const getDefaultValue = () => {
@@ -56,7 +56,7 @@ const FieldContainer = (props: IProps) => {
 
 export default FieldContainer;
 
-interface IProps {
+export interface IFieldContainerProps {
   key: string;
   field: any;
   selectedContent: any;

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

@@ -24,9 +24,9 @@ const CheckField = ({
 
   return (
     <S.Wrapper>
-      <S.Label data-testid={"checkFieldLabel"} disabled={disabled}>
+      <S.Label data-testid="check-field-label" disabled={disabled}>
         {icon ? (
-          <S.IconLabelWrapper data-testid={"checkFieldIconLabel"}>
+          <S.IconLabelWrapper data-testid="check-field-icon-label">
             <S.IconWrapper>
               <Icon name={icon} />
             </S.IconWrapper>
@@ -36,7 +36,7 @@ const CheckField = ({
           title
         )}
         <S.Input
-          data-testid={"checkFieldInput"}
+          data-testid="check-field-input"
           type="checkbox"
           name={`${name}`}
           value={value || ""}

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

@@ -38,7 +38,7 @@ const CheckGroup = (props: ICheckGroupProps): JSX.Element => {
   const checks = options
     ? options.map((item: ICheckFieldProps) => (
         <CheckField
-          data-testid="CheckGroupCheckfield"
+          data-testid="check-group-checkfield"
           key={item.name}
           onChange={handleChange}
           checked={valueArray.includes(item.name)}
@@ -52,7 +52,7 @@ const CheckGroup = (props: ICheckGroupProps): JSX.Element => {
       ))
     : "";
 
-  return <S.FieldGroup data-testid="CheckGroupFieldgroup">{checks}</S.FieldGroup>;
+  return <S.FieldGroup data-testid="check-group-field-group">{checks}</S.FieldGroup>;
 };
 
 interface ICheckGroupProps {

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

@@ -16,7 +16,7 @@ const HeadingField = (props: IHeadingFieldProps): JSX.Element => {
     <>
       <TextField {...props} value={contentValue} onChange={handleChange} />
       {showAdvanced && (
-        <S.AdvancedWrapper data-testid="textFieldAdvancedWrapper">
+        <S.AdvancedWrapper data-testid="text-field-advanced-wrapper">
           <FieldsBehavior fieldType="Select" options={options} value={value.tag} onChange={handleSelectChange} />
         </S.AdvancedWrapper>
       )}

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

@@ -47,7 +47,7 @@ const Select = (props: ISelectProps): JSX.Element => {
   const searchable = type === "inline" ? false : true;
 
   return (
-    <div data-testid="selectComponent">
+    <div data-testid="select-component">
       <S.StyledSelect
         name={name}
         value={getObjectValue(value, optionValues)}

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

@@ -78,7 +78,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
   const inputValue = !autoComplete ? state : value || "";
 
   return (
-    <S.FieldWrapper data-testid="textFieldContainer" error={error} className={className}>
+    <S.FieldWrapper data-testid="text-field-container" error={error} className={className}>
       {prefix && <Prefix />}
       <S.Input
         data-testid="inputComponent"
@@ -104,12 +104,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
       )}
       {hasButton && (
         <S.IconWrapper data-testid="iconWrapperComponent" readonly={readonly} error={error}>
-          <IconAction            
-            icon={icon || ""}
-            onClick={onClickIcon}
-            disabled={disabled}
-            size="s"
-          />
+          <IconAction icon={icon || ""} onClick={onClickIcon} disabled={disabled} size="s" />
         </S.IconWrapper>
       )}
     </S.FieldWrapper>

package/src/components/FieldsBehavior/index.tsx

@@ -80,7 +80,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
 
   return (
     <S.Wrapper className={wrapperClass} showTitle={showTitle} id={objKey}>
-      <S.Content error={errorField} data-testid="contentWrapper">
+      <S.Content error={errorField} data-testid="fields-behavior-wrapper">
         <Field
           {...props}
           showAdvanced={showAdvanced}

package/src/components/FloatingMenu/index.tsx

@@ -68,7 +68,7 @@ const FloatingMenu = (props: IProps) => {
         <Button />
       </S.ButtonWrapper>
       {isOpen && (
-        <S.MenuWrapper isInAppBar={isInAppBar} ref={menuOptions} position={position} offset={offset}>
+        <S.MenuWrapper isInAppBar={isInAppBar} ref={menuOptions} position={position} offset={offset} data-testid="floating-menu-wrapper">
           <S.Menu>{children}</S.Menu>
         </S.MenuWrapper>
       )}

package/src/components/IconAction/index.tsx

@@ -14,7 +14,7 @@ const IconAction = (props: IIconActionProps): JSX.Element => {
 
   return (
     <S.Button
-      data-testid="iconActionComponent"
+      data-testid="icon-action-component"
       disabled={disabled}
       onClick={handleOnClick}
       size={size}

package/src/components/Lists/index.tsx

@@ -7,7 +7,7 @@ const ListItem = (props: ListItemProps): JSX.Element => {
   const { isSelected, children, onClick } = props;
 
   return (
-    <S.StyledListItem isSelected={isSelected} onClick={onClick}>
+    <S.StyledListItem isSelected={isSelected} onClick={onClick} data-testid="list-item">
       {children}
       {isSelected && <Icon name="Done" size="16" />}
     </S.StyledListItem>

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

@@ -75,7 +75,7 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
 
   return (
     <FloatingMenu Button={Header} position="left" closeOnSelect={false} isCheckGroup={true}>
-      <ListTitle>Filter by Category</ListTitle>
+      <ListTitle data-testid="category-filter-title">Filter by Category</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup options={options} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />
       </S.ChecksWrapper>
@@ -83,7 +83,7 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
   );
 };
 
-interface ICategoryFilterProps {
+export interface ICategoryFilterProps {
   filterItems(pointer: string, filter: string): void;
   value: string;
   structuredData: any;

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

@@ -19,18 +19,9 @@ const IconsWrapper = styled.div`
   }
 `;
 
-const InteractiveArrow = styled.div`
-  display: flex;
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.interactive01};
-    }
-  }
-`;
-
 const ChecksWrapper = styled.div`
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
   overflow-y: auto;
 `;
 
-export { HeaderWrapper, IconsWrapper, InteractiveArrow, ChecksWrapper };
+export { HeaderWrapper, IconsWrapper, ChecksWrapper };

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

@@ -6,7 +6,6 @@ import * as S from "./style";
 
 const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
   const { columns, setColumns, value } = props;
-
   const options = Object.keys(columns).map((col: string) => {
     const disabled = value.length >= 5 && !value.includes(col);
     return { name: col, title: columns[col].title, value: col, disabled };
@@ -31,7 +30,7 @@ const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
   );
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="customize-filters-wrapper">
       <FloatingMenu Button={Button} position="right" closeOnSelect={false}>
         <ListTitle>Customize filters</ListTitle>
         <S.Note>You can select up to five options</S.Note>
@@ -43,7 +42,7 @@ const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
   );
 };
 
-interface ICustomizeFiltersProps {
+export interface ICustomizeFiltersProps {
   setColumns(newValue: any): void;
   columns: Record<string, IColumn>;
   value: string[];

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

@@ -4,7 +4,7 @@ import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
 
 import * as S from "./style";
 
-const DateFilter = (props: IStatusFilterProps): JSX.Element => {
+const DateFilter = (props: IDateFilterProps): JSX.Element => {
   const { sortItems, sortedState } = props;
   const { isAscending, sortedByDate } = sortedState;
   const sortByModifiedDate = (isAscending: boolean) => sortItems("date", isAscending);
@@ -16,13 +16,13 @@ const DateFilter = (props: IStatusFilterProps): JSX.Element => {
     isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
 
   const Header = () => (
-    <S.Date isActive={sortedByDate}>
+    <S.Date isActive={sortedByDate} data-testid="date-filter">
       Date
       <S.IconsWrapper>
         {sortedByDate ? (
           <SortedStateArrow />
         ) : (
-          <S.InteractiveArrow>
+          <S.InteractiveArrow data-testid="date-filter-interactive-arrow">
             <Icon name="DownArrow" size="16" />
           </S.InteractiveArrow>
         )}
@@ -43,7 +43,7 @@ const DateFilter = (props: IStatusFilterProps): JSX.Element => {
   );
 };
 
-interface IStatusFilterProps {
+export interface IDateFilterProps {
   sortedState: any;
   sortItems(orderPointer: string, isAscendent: boolean): any;
 }

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

@@ -104,7 +104,7 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
   );
 };
 
-interface ILiveFilterProps {
+export interface ILiveFilterProps {
   filterItems(pointer: string, filter: string): void;
   value: string;
   isStructuredData?: boolean;

package/src/components/TableFilters/LiveFilter/style.tsx

@@ -19,15 +19,6 @@ const IconsWrapper = styled.div`
   }
 `;
 
-const InteractiveArrow = styled.div`
-  display: flex;
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.interactive01};
-    }
-  }
-`;
-
 const ChecksWrapper = styled.div`
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s} 0;
 `;
@@ -35,4 +26,5 @@ const ChecksWrapper = styled.div`
 const MenuWrapper = styled.div`
   position: relative;
 `;
-export { LiveOptions, IconsWrapper, InteractiveArrow, ChecksWrapper, MenuWrapper };
+
+export { LiveOptions, IconsWrapper, ChecksWrapper, MenuWrapper };