From 2a79e00a01e527ca7350e8bbc43fa6c61c9e3c35 Mon Sep 17 00:00:00 2001
From: subinasr <ssr.subina@gmail.com>
Date: Wed, 25 Feb 2026 11:58:01 +0545
Subject: [PATCH] add(select-inputs): add popup header to select input
 containers

---
 src/components/SelectInputContainer/index.tsx |  9 ++++++
 .../SelectInputContainer/styles.css           |  5 ++++
 src/stories/MultiSelectInput.stories.tsx      |  5 ++++
 .../SearchMultiSelectInput.stories.tsx        |  5 ++++
 src/stories/SearchSelectInput.stories.tsx     |  5 ++++
 src/stories/SelectInput.stories.tsx           | 30 +++++++++++++++++++
 6 files changed, 59 insertions(+)

diff --git a/src/components/SelectInputContainer/index.tsx b/src/components/SelectInputContainer/index.tsx
index 370d1d4..c35c000 100644
--- a/src/components/SelectInputContainer/index.tsx
+++ b/src/components/SelectInputContainer/index.tsx
@@ -68,6 +68,8 @@ export type SelectInputContainerProps<
     optionsPending?: boolean;
     optionsFiltered?: boolean;
     optionsPopupClassName?: string;
+    popupHeader?: React.ReactNode;
+    popupHeaderClassName?: string;
     persistentOptionPopup?: boolean;
     placeholder?: string;
     valueDisplay: string;
@@ -105,6 +107,8 @@ function SelectInputContainer<OK extends OptionKey, N extends string, O extends
         inputSectionClassName,
         label,
         labelContainerClassName,
+        popupHeader,
+        popupHeaderClassName,
         name,
         onOptionClick,
         searchText,
@@ -370,6 +374,11 @@ function SelectInputContainer<OK extends OptionKey, N extends string, O extends
                         optionsPopupContentClassName,
                     )}
                 >
+                    {popupHeader && (
+                        <div className={_cs(styles.popupHeader, popupHeaderClassName)}>
+                            {popupHeader}
+                        </div>
+                    )}
                     {popup}
                     <EmptyOptions
                         filtered={optionsFiltered}
diff --git a/src/components/SelectInputContainer/styles.css b/src/components/SelectInputContainer/styles.css
index d366795..0754b6a 100644
--- a/src/components/SelectInputContainer/styles.css
+++ b/src/components/SelectInputContainer/styles.css
@@ -2,6 +2,11 @@
     padding-top: calc(var(--tui-spacing-large) - var(--tui-spacing-medium));
     padding-bottom: calc(var(--tui-spacing-large) - var(--tui-spacing-medium));
 
+    .popup-header {
+        flex-grow: 1;
+        flex-shrink: 0;
+    }
+
     .popup-content {
         display: flex;
         flex-direction: column;
diff --git a/src/stories/MultiSelectInput.stories.tsx b/src/stories/MultiSelectInput.stories.tsx
index d08c6ed..41d02ce 100644
--- a/src/stories/MultiSelectInput.stories.tsx
+++ b/src/stories/MultiSelectInput.stories.tsx
@@ -70,6 +70,11 @@ Default.args = {
     value: ['1', '3'],
 };
 
+export const WithPopupHeader = Template.bind({});
+WithPopupHeader.args = {
+    popupHeader: 'Veggiesss',
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
     value: ['1', '3'],
diff --git a/src/stories/SearchMultiSelectInput.stories.tsx b/src/stories/SearchMultiSelectInput.stories.tsx
index e26f546..94912ee 100644
--- a/src/stories/SearchMultiSelectInput.stories.tsx
+++ b/src/stories/SearchMultiSelectInput.stories.tsx
@@ -212,6 +212,11 @@ Default.args = {
     value: ['1', '3'],
 };
 
+export const WithPopupHeader = Template.bind({});
+WithPopupHeader.args = {
+    popupHeader: 'Fruitsss',
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
     value: ['1', '3'],
diff --git a/src/stories/SearchSelectInput.stories.tsx b/src/stories/SearchSelectInput.stories.tsx
index 762a6d4..807355e 100644
--- a/src/stories/SearchSelectInput.stories.tsx
+++ b/src/stories/SearchSelectInput.stories.tsx
@@ -194,6 +194,11 @@ Default.args = {
     value: '1',
 };
 
+export const WithPopupHeader = Template.bind({});
+WithPopupHeader.args = {
+    popupHeader: 'Fruitsss',
+};
+
 export const WithActions = Template.bind({});
 WithActions.args = {
     actionsSelector: () => (
diff --git a/src/stories/SelectInput.stories.tsx b/src/stories/SelectInput.stories.tsx
index e60d460..a117361 100644
--- a/src/stories/SelectInput.stories.tsx
+++ b/src/stories/SelectInput.stories.tsx
@@ -3,6 +3,11 @@ import { Story } from '@storybook/react/types-6-0';
 import { useArgs } from '@storybook/client-api';
 import { IoOpenOutline } from 'react-icons/io5';
 import SelectInput, { SelectInputProps } from '#components/SelectInput';
+import {
+    Tabs,
+    Tab,
+    TabList,
+} from '#components/Tabs';
 
 export default {
     title: 'Input/SelectInput',
@@ -46,6 +51,31 @@ const Template: Story<SelectInputProps<string, string, Option, { containerClassN
     );
 };
 
+export const WithPopupHeader = Template.bind({});
+WithPopupHeader.args = {
+    popupHeader: (
+        <Tabs
+            value="green"
+            onChange={() => 'green'}
+        >
+            <TabList>
+                <Tab
+                    name="green"
+                    style={{ flexGrow: 1 }}
+                >
+                    Green
+                </Tab>
+                <Tab
+                    name="yellow"
+                    style={{ flexGrow: 1 }}
+                >
+                    Yellow
+                </Tab>
+            </TabList>
+        </Tabs>
+    ),
+};
+
 export const WithActions = Template.bind({});
 WithActions.args = {
     actionsSelector: () => (