From 6b9fcd098b594f1e6d7cb193dde13fbcbc23ef15 Mon Sep 17 00:00:00 2001
From: Ddouglasz <douglas.egiemeh@gmail.com>
Date: Tue, 8 Oct 2024 19:27:59 +0200
Subject: [PATCH 1/6] feat(filters): implement filter menu header

---
 .changeset/dirty-coins-begin.md               |  5 ++
 .../filters/src/filter-menu/filter-menu.tsx   | 18 +++-
 .../src/filter-menu/header/header.spec.tsx    | 83 +++++++++++++++++--
 .../filters/src/filter-menu/header/header.tsx | 82 +++++++++++++++++-
 .../filters/src/filters.stories.tsx           |  4 +-
 5 files changed, 180 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/dirty-coins-begin.md

diff --git a/.changeset/dirty-coins-begin.md b/.changeset/dirty-coins-begin.md
new file mode 100644
index 0000000000..66e8daab2c
--- /dev/null
+++ b/.changeset/dirty-coins-begin.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/filters': minor
+---
+
+Implement FilterMenu header component.
diff --git a/packages/components/filters/src/filter-menu/filter-menu.tsx b/packages/components/filters/src/filter-menu/filter-menu.tsx
index 806723e49b..809e27bee6 100644
--- a/packages/components/filters/src/filter-menu/filter-menu.tsx
+++ b/packages/components/filters/src/filter-menu/filter-menu.tsx
@@ -12,7 +12,23 @@ export type TFilterMenuProps = {
 function FilterMenu(props: TFilterMenuProps) {
   return (
     <DropdownMenu triggerElement={<TriggerButton label={props.label} />}>
-      <Header />
+      <Header
+        // For storybook purposes, we are not using the actual props - will be taken off eventually.
+        label={props.label}
+        operandOptions={[
+          { value: 'is', label: 'is' },
+          { value: 'is not', label: 'is NOT' },
+        ]}
+        renderOperandsInput={true}
+        onSelectOperand={(value) => value}
+        onSort={() => {}}
+        menuHeaderWidth={'100px'}
+      />
+      <p>text</p>
+      <p>text</p>
+      <p>text</p>
+      <p>text</p>
+      <p>text</p>
       <Footer />
     </DropdownMenu>
   );
diff --git a/packages/components/filters/src/filter-menu/header/header.spec.tsx b/packages/components/filters/src/filter-menu/header/header.spec.tsx
index 940e935dd4..6618d8874d 100644
--- a/packages/components/filters/src/filter-menu/header/header.spec.tsx
+++ b/packages/components/filters/src/filter-menu/header/header.spec.tsx
@@ -1,12 +1,81 @@
-import { screen, render } from '../../../../../../test/test-utils';
+import { render, screen, fireEvent } from '../../../../../../test/test-utils';
 import Header from './header';
 
-/**
- * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
- */
+const operandOptions = [
+  { value: 'is', label: 'IS' },
+  { value: 'isNot', label: 'IS NOT' },
+];
+
+const FilterSetup = () => (
+  <Header
+    label="Filter Label"
+    operandOptions={operandOptions}
+    onSelectOperand={jest.fn()}
+    onSort={jest.fn()}
+  />
+);
+
 describe('FilterMenu Header', () => {
-  it('should render the header', async () => {
-    await render(<Header />);
-    await screen.findByText('header');
+  it('should render the header label', async () => {
+    render(<FilterSetup />);
+
+    expect(screen.getByText('Filter Label')).toBeInTheDocument();
+  });
+
+  it('should conditionally render the SelectInput when operandOptions are provided', async () => {
+    render(<FilterSetup />);
+
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('should not render SelectInput when operandOptions are not provided', () => {
+    render(
+      <Header
+        label="Filter Label"
+        onSelectOperand={jest.fn()}
+        onSort={jest.fn()}
+      />
+    );
+
+    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+  });
+
+  it('should conditionally render the IconButton when onSort is provided', async () => {
+    render(<FilterSetup />);
+
+    // Check if IconButton is rendered
+    expect(screen.getByLabelText('Sort')).toBeInTheDocument();
+  });
+
+  it('should not render IconButton when onSort is not provided', () => {
+    render(
+      <Header
+        label="Filter Label"
+        onSelectOperand={jest.fn()}
+        operandOptions={operandOptions}
+      />
+    );
+
+    // IconButton should not be present
+    expect(screen.queryByLabelText('Sort')).not.toBeInTheDocument();
+  });
+
+  it('should toggle isActive and call onSort when IconButton is clicked', async () => {
+    const onSortMock = jest.fn();
+    render(
+      <Header
+        label="Filter Label"
+        operandOptions={operandOptions}
+        onSelectOperand={jest.fn()}
+        onSort={onSortMock}
+      />
+    );
+
+    const sortButton = screen.getByLabelText('Sort');
+
+    // Simulate button click
+    fireEvent.click(sortButton);
+
+    expect(onSortMock).toHaveBeenCalled();
   });
 });
diff --git a/packages/components/filters/src/filter-menu/header/header.tsx b/packages/components/filters/src/filter-menu/header/header.tsx
index ceff9d9512..9fa3e16b13 100644
--- a/packages/components/filters/src/filter-menu/header/header.tsx
+++ b/packages/components/filters/src/filter-menu/header/header.tsx
@@ -1,5 +1,81 @@
-function Header() {
-  return <div>header</div>;
-}
+import SelectInput from '@commercetools-uikit/select-input';
+import IconButton from '@commercetools-uikit/icon-button';
+import Spacings from '@commercetools-uikit/spacings';
+import { SortingIcon } from '@commercetools-uikit/icons';
+import { designTokens } from '@commercetools-uikit/design-system';
+import { css } from '@emotion/react';
+import { useState } from 'react';
+
+type TOption = {
+  value: string;
+  label: string;
+};
+
+type THeaderProps = {
+  label: string;
+  operandOptions?: Array<TOption>;
+  renderOperandsInput?: boolean;
+  onSelectOperand: (value: string) => void;
+  onSort?: () => void;
+  menuHeaderWidth?: string;
+};
+
+const headerContainerStyles = css`
+  display: flex;
+  align-items: center;
+  padding-bottom: ${designTokens.spacing10};
+  border-bottom: 1px solid ${designTokens.colorNeutral90};
+`;
+
+const getSelectInputStyles = (props: THeaderProps) => css`
+  width: ${props.menuHeaderWidth};
+  margin: ${designTokens.spacing20};
+`;
+
+const Header = (props: THeaderProps) => {
+  const [headerSelectOptions, setHeaderSelectOptions] = useState<string>();
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <Spacings.Inline>
+      <div css={headerContainerStyles}>
+        <div>{props.label}</div>
+        {props.operandOptions && (
+          <div css={getSelectInputStyles(props)}>
+            <SelectInput
+              appearance="quiet"
+              value={
+                headerSelectOptions
+                  ? headerSelectOptions
+                  : props.operandOptions[0].value
+              }
+              isCondensed={true}
+              isSearchable={false}
+              options={props.operandOptions}
+              onChange={(event) => {
+                setHeaderSelectOptions(event.target.value as string);
+                props.onSelectOperand(event.target.value as string);
+              }}
+            />
+          </div>
+        )}
+
+        {props.onSort && (
+          <IconButton
+            size="20"
+            theme={isActive ? 'info' : 'default'}
+            label="Sort"
+            icon={<SortingIcon />}
+            isToggleButton={true}
+            onClick={() => {
+              setIsActive(!isActive);
+              return props.onSort && props.onSort();
+            }}
+          />
+        )}
+      </div>
+    </Spacings.Inline>
+  );
+};
 
 export default Header;
diff --git a/packages/components/filters/src/filters.stories.tsx b/packages/components/filters/src/filters.stories.tsx
index ef8e0121f1..1ad6c1ed16 100644
--- a/packages/components/filters/src/filters.stories.tsx
+++ b/packages/components/filters/src/filters.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import Filters from './filters';
+import FilterMenu from './filter-menu';
 
 const meta: Meta<typeof Filters> = {
   title: 'components/Filters',
@@ -16,5 +17,6 @@ export default meta;
 type Story = StoryFn<typeof Filters>;
 
 export const BasicExample: Story = () => {
-  return <Filters label={'test'} />;
+  // return <Filters label={'test'} />;
+  return <FilterMenu label={'Size'} />;
 };

From 367925001090e542893730877d7e60a883fa168f Mon Sep 17 00:00:00 2001
From: Ddouglasz <douglas.egiemeh@gmail.com>
Date: Tue, 8 Oct 2024 19:36:45 +0200
Subject: [PATCH 2/6] feat(filters): remove unused comments

---
 .../components/filters/src/filter-menu/header/header.spec.tsx  | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/components/filters/src/filter-menu/header/header.spec.tsx b/packages/components/filters/src/filter-menu/header/header.spec.tsx
index 6618d8874d..32f1deb970 100644
--- a/packages/components/filters/src/filter-menu/header/header.spec.tsx
+++ b/packages/components/filters/src/filter-menu/header/header.spec.tsx
@@ -43,7 +43,6 @@ describe('FilterMenu Header', () => {
   it('should conditionally render the IconButton when onSort is provided', async () => {
     render(<FilterSetup />);
 
-    // Check if IconButton is rendered
     expect(screen.getByLabelText('Sort')).toBeInTheDocument();
   });
 
@@ -56,7 +55,6 @@ describe('FilterMenu Header', () => {
       />
     );
 
-    // IconButton should not be present
     expect(screen.queryByLabelText('Sort')).not.toBeInTheDocument();
   });
 
@@ -73,7 +71,6 @@ describe('FilterMenu Header', () => {
 
     const sortButton = screen.getByLabelText('Sort');
 
-    // Simulate button click
     fireEvent.click(sortButton);
 
     expect(onSortMock).toHaveBeenCalled();

From 270993db7c82ab5975460c5515973f05899a1e3c Mon Sep 17 00:00:00 2001
From: Ddouglasz <douglas.egiemeh@gmail.com>
Date: Tue, 8 Oct 2024 22:17:55 +0200
Subject: [PATCH 3/6] feat(filters): remove changeset

---
 .changeset/dirty-coins-begin.md                     |  5 -----
 .../filters/src/filter-menu/filter-menu.tsx         |  4 ++--
 .../filters/src/filter-menu/header/header.spec.tsx  | 13 +++++++------
 .../filters/src/filter-menu/header/header.tsx       | 10 +++++-----
 4 files changed, 14 insertions(+), 18 deletions(-)
 delete mode 100644 .changeset/dirty-coins-begin.md

diff --git a/.changeset/dirty-coins-begin.md b/.changeset/dirty-coins-begin.md
deleted file mode 100644
index 66e8daab2c..0000000000
--- a/.changeset/dirty-coins-begin.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@commercetools-uikit/filters': minor
----
-
-Implement FilterMenu header component.
diff --git a/packages/components/filters/src/filter-menu/filter-menu.tsx b/packages/components/filters/src/filter-menu/filter-menu.tsx
index 809e27bee6..0f2f180384 100644
--- a/packages/components/filters/src/filter-menu/filter-menu.tsx
+++ b/packages/components/filters/src/filter-menu/filter-menu.tsx
@@ -15,12 +15,12 @@ function FilterMenu(props: TFilterMenuProps) {
       <Header
         // For storybook purposes, we are not using the actual props - will be taken off eventually.
         label={props.label}
-        operandOptions={[
+        operatorOptions={[
           { value: 'is', label: 'is' },
           { value: 'is not', label: 'is NOT' },
         ]}
-        renderOperandsInput={true}
         onSelectOperand={(value) => value}
+        renderOperatorsInput={() => {}}
         onSort={() => {}}
         menuHeaderWidth={'100px'}
       />
diff --git a/packages/components/filters/src/filter-menu/header/header.spec.tsx b/packages/components/filters/src/filter-menu/header/header.spec.tsx
index 32f1deb970..1a326a5f61 100644
--- a/packages/components/filters/src/filter-menu/header/header.spec.tsx
+++ b/packages/components/filters/src/filter-menu/header/header.spec.tsx
@@ -1,7 +1,7 @@
 import { render, screen, fireEvent } from '../../../../../../test/test-utils';
 import Header from './header';
 
-const operandOptions = [
+const operatorOptions = [
   { value: 'is', label: 'IS' },
   { value: 'isNot', label: 'IS NOT' },
 ];
@@ -9,9 +9,10 @@ const operandOptions = [
 const FilterSetup = () => (
   <Header
     label="Filter Label"
-    operandOptions={operandOptions}
+    operatorOptions={operatorOptions}
     onSelectOperand={jest.fn()}
     onSort={jest.fn()}
+    renderOperatorsInput={() => {}}
   />
 );
 
@@ -22,13 +23,13 @@ describe('FilterMenu Header', () => {
     expect(screen.getByText('Filter Label')).toBeInTheDocument();
   });
 
-  it('should conditionally render the SelectInput when operandOptions are provided', async () => {
+  it('should conditionally render the SelectInput when renderOperatorsInput are provided', async () => {
     render(<FilterSetup />);
 
     expect(screen.getByRole('combobox')).toBeInTheDocument();
   });
 
-  it('should not render SelectInput when operandOptions are not provided', () => {
+  it('should not render SelectInput when renderOperatorsInput are not provided', () => {
     render(
       <Header
         label="Filter Label"
@@ -51,7 +52,7 @@ describe('FilterMenu Header', () => {
       <Header
         label="Filter Label"
         onSelectOperand={jest.fn()}
-        operandOptions={operandOptions}
+        operatorOptions={operatorOptions}
       />
     );
 
@@ -63,7 +64,7 @@ describe('FilterMenu Header', () => {
     render(
       <Header
         label="Filter Label"
-        operandOptions={operandOptions}
+        operatorOptions={operatorOptions}
         onSelectOperand={jest.fn()}
         onSort={onSortMock}
       />
diff --git a/packages/components/filters/src/filter-menu/header/header.tsx b/packages/components/filters/src/filter-menu/header/header.tsx
index 9fa3e16b13..867f6181a5 100644
--- a/packages/components/filters/src/filter-menu/header/header.tsx
+++ b/packages/components/filters/src/filter-menu/header/header.tsx
@@ -13,11 +13,11 @@ type TOption = {
 
 type THeaderProps = {
   label: string;
-  operandOptions?: Array<TOption>;
-  renderOperandsInput?: boolean;
+  operatorOptions?: Array<TOption>;
   onSelectOperand: (value: string) => void;
   onSort?: () => void;
   menuHeaderWidth?: string;
+  renderOperatorsInput?: () => void;
 };
 
 const headerContainerStyles = css`
@@ -40,18 +40,18 @@ const Header = (props: THeaderProps) => {
     <Spacings.Inline>
       <div css={headerContainerStyles}>
         <div>{props.label}</div>
-        {props.operandOptions && (
+        {props.renderOperatorsInput && (
           <div css={getSelectInputStyles(props)}>
             <SelectInput
               appearance="quiet"
               value={
                 headerSelectOptions
                   ? headerSelectOptions
-                  : props.operandOptions[0].value
+                  : props?.operatorOptions && props.operatorOptions[0].value
               }
               isCondensed={true}
               isSearchable={false}
-              options={props.operandOptions}
+              options={props.operatorOptions}
               onChange={(event) => {
                 setHeaderSelectOptions(event.target.value as string);
                 props.onSelectOperand(event.target.value as string);

From 198c0f5f587872eacb53715407994ae48e1ec3dd Mon Sep 17 00:00:00 2001
From: Ddouglasz <douglas.egiemeh@gmail.com>
Date: Tue, 8 Oct 2024 22:36:51 +0200
Subject: [PATCH 4/6] feat(filters): update header label props

---
 packages/components/filters/src/filter-menu/filter-menu.tsx   | 2 +-
 packages/components/filters/src/filter-menu/header/header.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/filters/src/filter-menu/filter-menu.tsx b/packages/components/filters/src/filter-menu/filter-menu.tsx
index 0f2f180384..b354ed594d 100644
--- a/packages/components/filters/src/filter-menu/filter-menu.tsx
+++ b/packages/components/filters/src/filter-menu/filter-menu.tsx
@@ -14,7 +14,7 @@ function FilterMenu(props: TFilterMenuProps) {
     <DropdownMenu triggerElement={<TriggerButton label={props.label} />}>
       <Header
         // For storybook purposes, we are not using the actual props - will be taken off eventually.
-        label={props.label}
+        headerLabel="Size"
         operatorOptions={[
           { value: 'is', label: 'is' },
           { value: 'is not', label: 'is NOT' },
diff --git a/packages/components/filters/src/filter-menu/header/header.tsx b/packages/components/filters/src/filter-menu/header/header.tsx
index 867f6181a5..95ea8eb5fd 100644
--- a/packages/components/filters/src/filter-menu/header/header.tsx
+++ b/packages/components/filters/src/filter-menu/header/header.tsx
@@ -12,7 +12,7 @@ type TOption = {
 };
 
 type THeaderProps = {
-  label: string;
+  headerLabel: string;
   operatorOptions?: Array<TOption>;
   onSelectOperand: (value: string) => void;
   onSort?: () => void;
@@ -39,7 +39,7 @@ const Header = (props: THeaderProps) => {
   return (
     <Spacings.Inline>
       <div css={headerContainerStyles}>
-        <div>{props.label}</div>
+        <div>{props.headerLabel}</div>
         {props.renderOperatorsInput && (
           <div css={getSelectInputStyles(props)}>
             <SelectInput

From 9f706f94f175db7d8e8050beb5cfa5a72987e8be Mon Sep 17 00:00:00 2001
From: Ddouglasz <douglas.egiemeh@gmail.com>
Date: Tue, 8 Oct 2024 22:41:00 +0200
Subject: [PATCH 5/6] feat(filters): update header label props

---
 .../filters/src/filter-menu/header/header.spec.tsx        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/filters/src/filter-menu/header/header.spec.tsx b/packages/components/filters/src/filter-menu/header/header.spec.tsx
index 1a326a5f61..e0905730ff 100644
--- a/packages/components/filters/src/filter-menu/header/header.spec.tsx
+++ b/packages/components/filters/src/filter-menu/header/header.spec.tsx
@@ -8,7 +8,7 @@ const operatorOptions = [
 
 const FilterSetup = () => (
   <Header
-    label="Filter Label"
+    headerLabel="Filter Label"
     operatorOptions={operatorOptions}
     onSelectOperand={jest.fn()}
     onSort={jest.fn()}
@@ -32,7 +32,7 @@ describe('FilterMenu Header', () => {
   it('should not render SelectInput when renderOperatorsInput are not provided', () => {
     render(
       <Header
-        label="Filter Label"
+        headerLabel="Filter Label"
         onSelectOperand={jest.fn()}
         onSort={jest.fn()}
       />
@@ -50,7 +50,7 @@ describe('FilterMenu Header', () => {
   it('should not render IconButton when onSort is not provided', () => {
     render(
       <Header
-        label="Filter Label"
+        headerLabel="Filter Label"
         onSelectOperand={jest.fn()}
         operatorOptions={operatorOptions}
       />
@@ -63,7 +63,7 @@ describe('FilterMenu Header', () => {
     const onSortMock = jest.fn();
     render(
       <Header
-        label="Filter Label"
+        headerLabel="Filter Label"
         operatorOptions={operatorOptions}
         onSelectOperand={jest.fn()}
         onSort={onSortMock}

From 7a2182f59627197c95bdf053e692d5559368320d Mon Sep 17 00:00:00 2001
From: Ddouglasz <douglas.egiemeh@gmail.com>
Date: Thu, 10 Oct 2024 15:01:31 +0200
Subject: [PATCH 6/6] fix(filters): update header workflow

---
 .../filters/src/filter-menu/filter-menu.tsx   | 33 +++++++++++---
 .../src/filter-menu/header/header.spec.tsx    | 44 +++++++------------
 .../filters/src/filter-menu/header/header.tsx | 42 +++++++-----------
 3 files changed, 57 insertions(+), 62 deletions(-)

diff --git a/packages/components/filters/src/filter-menu/filter-menu.tsx b/packages/components/filters/src/filter-menu/filter-menu.tsx
index b354ed594d..c1661f4067 100644
--- a/packages/components/filters/src/filter-menu/filter-menu.tsx
+++ b/packages/components/filters/src/filter-menu/filter-menu.tsx
@@ -1,7 +1,9 @@
+import { ReactNode, useState } from 'react';
 import DropdownMenu from '@commercetools-uikit/dropdown-menu';
 import { Footer } from './footer';
 import { Header } from './header';
 import { TriggerButton } from './trigger-button';
+import SelectInput from '@commercetools-uikit/select-input';
 
 export type TFilterMenuProps = {
   /**
@@ -10,17 +12,36 @@ export type TFilterMenuProps = {
   label: string;
 };
 function FilterMenu(props: TFilterMenuProps) {
+  const [headerSelectOptions, setHeaderSelectOptions] = useState<string>();
+  const renderOperatorsInput = (): ReactNode => {
+    const operatorOptions = [
+      { value: 'is', label: 'is' },
+      { value: 'is not', label: 'is NOT' },
+    ];
+
+    return (
+      <SelectInput
+        appearance="quiet"
+        isCondensed={true}
+        isSearchable={false}
+        value={
+          // Default to the first option if no value is passed
+          headerSelectOptions ? headerSelectOptions : operatorOptions[0].value
+        }
+        options={operatorOptions}
+        onChange={(event) => {
+          setHeaderSelectOptions(event.target.value as string);
+        }}
+      />
+    );
+  };
+
   return (
     <DropdownMenu triggerElement={<TriggerButton label={props.label} />}>
       <Header
         // For storybook purposes, we are not using the actual props - will be taken off eventually.
         headerLabel="Size"
-        operatorOptions={[
-          { value: 'is', label: 'is' },
-          { value: 'is not', label: 'is NOT' },
-        ]}
-        onSelectOperand={(value) => value}
-        renderOperatorsInput={() => {}}
+        renderOperatorsInput={renderOperatorsInput}
         onSort={() => {}}
         menuHeaderWidth={'100px'}
       />
diff --git a/packages/components/filters/src/filter-menu/header/header.spec.tsx b/packages/components/filters/src/filter-menu/header/header.spec.tsx
index e0905730ff..5d9c44da2e 100644
--- a/packages/components/filters/src/filter-menu/header/header.spec.tsx
+++ b/packages/components/filters/src/filter-menu/header/header.spec.tsx
@@ -1,59 +1,46 @@
 import { render, screen, fireEvent } from '../../../../../../test/test-utils';
 import Header from './header';
 
-const operatorOptions = [
-  { value: 'is', label: 'IS' },
-  { value: 'isNot', label: 'IS NOT' },
-];
+const renderOperatorsInput = () => {
+  return <>select Input</>;
+};
 
-const FilterSetup = () => (
+const HeaderSetup = () => (
   <Header
     headerLabel="Filter Label"
-    operatorOptions={operatorOptions}
-    onSelectOperand={jest.fn()}
     onSort={jest.fn()}
-    renderOperatorsInput={() => {}}
+    renderOperatorsInput={renderOperatorsInput}
   />
 );
 
 describe('FilterMenu Header', () => {
   it('should render the header label', async () => {
-    render(<FilterSetup />);
+    render(<HeaderSetup />);
 
     expect(screen.getByText('Filter Label')).toBeInTheDocument();
   });
 
-  it('should conditionally render the SelectInput when renderOperatorsInput are provided', async () => {
-    render(<FilterSetup />);
+  it('should conditionally render the component returned when renderOperatorsInput are provided', async () => {
+    render(<HeaderSetup />);
 
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByText('select Input')).toBeInTheDocument();
   });
 
-  it('should not render SelectInput when renderOperatorsInput are not provided', () => {
-    render(
-      <Header
-        headerLabel="Filter Label"
-        onSelectOperand={jest.fn()}
-        onSort={jest.fn()}
-      />
-    );
+  it('should not render component when renderOperatorsInput are not provided', () => {
+    render(<Header headerLabel="Filter Label" onSort={jest.fn()} />);
 
-    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    expect(screen.queryByText('select Input')).not.toBeInTheDocument();
   });
 
   it('should conditionally render the IconButton when onSort is provided', async () => {
-    render(<FilterSetup />);
+    render(<HeaderSetup />);
 
     expect(screen.getByLabelText('Sort')).toBeInTheDocument();
   });
 
   it('should not render IconButton when onSort is not provided', () => {
     render(
-      <Header
-        headerLabel="Filter Label"
-        onSelectOperand={jest.fn()}
-        operatorOptions={operatorOptions}
-      />
+      <Header headerLabel="Filter Label" renderOperatorsInput={jest.fn()} />
     );
 
     expect(screen.queryByLabelText('Sort')).not.toBeInTheDocument();
@@ -64,8 +51,7 @@ describe('FilterMenu Header', () => {
     render(
       <Header
         headerLabel="Filter Label"
-        operatorOptions={operatorOptions}
-        onSelectOperand={jest.fn()}
+        renderOperatorsInput={jest.fn()}
         onSort={onSortMock}
       />
     );
diff --git a/packages/components/filters/src/filter-menu/header/header.tsx b/packages/components/filters/src/filter-menu/header/header.tsx
index 95ea8eb5fd..5c7a8ce853 100644
--- a/packages/components/filters/src/filter-menu/header/header.tsx
+++ b/packages/components/filters/src/filter-menu/header/header.tsx
@@ -1,23 +1,27 @@
-import SelectInput from '@commercetools-uikit/select-input';
+import { useState, ReactNode } from 'react';
 import IconButton from '@commercetools-uikit/icon-button';
 import Spacings from '@commercetools-uikit/spacings';
 import { SortingIcon } from '@commercetools-uikit/icons';
 import { designTokens } from '@commercetools-uikit/design-system';
 import { css } from '@emotion/react';
-import { useState } from 'react';
-
-type TOption = {
-  value: string;
-  label: string;
-};
 
 type THeaderProps = {
+  /**
+   * the label of the header
+   */
   headerLabel: string;
-  operatorOptions?: Array<TOption>;
-  onSelectOperand: (value: string) => void;
+  /**
+   * the function to render the operator input
+   */
+  renderOperatorsInput?: () => ReactNode;
+  /**
+   * the function to sort the data
+   */
   onSort?: () => void;
+  /**
+   * the width of the menu header
+   */
   menuHeaderWidth?: string;
-  renderOperatorsInput?: () => void;
 };
 
 const headerContainerStyles = css`
@@ -33,7 +37,6 @@ const getSelectInputStyles = (props: THeaderProps) => css`
 `;
 
 const Header = (props: THeaderProps) => {
-  const [headerSelectOptions, setHeaderSelectOptions] = useState<string>();
   const [isActive, setIsActive] = useState(false);
 
   return (
@@ -42,24 +45,9 @@ const Header = (props: THeaderProps) => {
         <div>{props.headerLabel}</div>
         {props.renderOperatorsInput && (
           <div css={getSelectInputStyles(props)}>
-            <SelectInput
-              appearance="quiet"
-              value={
-                headerSelectOptions
-                  ? headerSelectOptions
-                  : props?.operatorOptions && props.operatorOptions[0].value
-              }
-              isCondensed={true}
-              isSearchable={false}
-              options={props.operatorOptions}
-              onChange={(event) => {
-                setHeaderSelectOptions(event.target.value as string);
-                props.onSelectOperand(event.target.value as string);
-              }}
-            />
+            {props.renderOperatorsInput()}
           </div>
         )}
-
         {props.onSort && (
           <IconButton
             size="20"