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

Author: subinasr

src/components/SelectInputContainer/index.tsx

@@ -83,6 +83,8 @@ export type SelectInputContainerProps<
     grouped?: false;
     groupLabelSelector?: undefined;
     groupKeySelector?: undefined;
+    popupHeader?: React.ReactNode;
+    popupHeaderClassName?: string;
 });
 
 const emptyList: unknown[] = [];
@@ -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,9 @@ function SelectInputContainer<OK extends OptionKey, N extends string, O extends
                         optionsPopupContentClassName,
                     )}
                 >
+                    <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;
+        padding: calc(var(--tui-spacing-large) - var(--tui-spacing-small));
+    }
+
     .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

@@ -46,6 +46,11 @@ const Template: Story<SelectInputProps<string, string, Option, { containerClassN
     );
 };
 
+export const WithPopupHeader = Template.bind({});
+WithPopupHeader.args = {
+    popupHeader: 'Fruitsss',
+};
+
 export const WithActions = Template.bind({});
 WithActions.args = {
     actionsSelector: () => (