add(select-inputs): add popup header to select input containers

Author: subinasr

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}

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;

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'],

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'],

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: () => (

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: () => (