feat(suite-native): Create generic picker header component

suite-native/module-trading/src/components/general/PickerCloseButton.tsx

@@ -0,0 +1,13 @@
+import { Button, ButtonProps } from '@suite-native/atoms';
+import { Translation } from '@suite-native/intl';
+
+export type PickerCloseButtonProps = Omit<
+    ButtonProps,
+    'children' | 'colorScheme' | 'viewLeft' | 'viewRight'
+>;
+
+export const PickerCloseButton = (props: PickerCloseButtonProps) => (
+    <Button colorScheme="tertiaryElevation0" {...props}>
+        <Translation id="generic.buttons.close" />
+    </Button>
+);

suite-native/module-trading/src/components/general/PickerHeader.tsx

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+
+import { HStack, SearchInput, Text, VStack } from '@suite-native/atoms';
+
+type PickerHeaderSearchInputProps = {
+    onSearchInputChange: (value: string) => void;
+    searchInputPlaceholder?: string;
+    isSearchInputDisabled?: boolean;
+    maxSearchInputLength?: number;
+};
+
+export type PickerHeaderProps = {
+    title: ReactNode;
+    children?: ReactNode;
+} & (
+    | { isSearchInputVisible?: false }
+    | ({ isSearchInputVisible: true } & PickerHeaderSearchInputProps)
+);
+
+const PickerHeaderSearchInput = ({
+    onSearchInputChange,
+    searchInputPlaceholder,
+    isSearchInputDisabled,
+    maxSearchInputLength,
+}: PickerHeaderSearchInputProps) => (
+    <SearchInput
+        onChange={onSearchInputChange}
+        maxLength={maxSearchInputLength}
+        placeholder={searchInputPlaceholder}
+        isDisabled={isSearchInputDisabled}
+    />
+);
+
+export const PickerHeader = ({
+    title,
+    isSearchInputVisible,
+    children,
+    ...searchInputProps
+}: PickerHeaderProps) => (
+    <VStack spacing="sp16">
+        <HStack justifyContent="space-between" alignItems="center">
+            <Text variant="titleMedium" textAlign="left">
+                {title}
+            </Text>
+            {children}
+        </HStack>
+        {isSearchInputVisible && (
+            <PickerHeaderSearchInput {...(searchInputProps as PickerHeaderSearchInputProps)} />
+        )}
+    </VStack>
+);

suite-native/module-trading/src/components/general/__tests__/PickerHeader.comp.test.tsx

@@ -0,0 +1,38 @@
+import { render, fireEvent } from '@suite-native/test-utils';
+import { Text } from '@suite-native/atoms';
+
+import { PickerHeader } from '../PickerHeader';
+
+describe('PickerHeader', () => {
+    it('should render without children', () => {
+        const { getByText } = render(<PickerHeader title="Title" />);
+        expect(getByText('Title')).toBeDefined();
+    });
+
+    it('should render with children', () => {
+        const { getByText } = render(
+            <PickerHeader title="Title">
+                <Text>Child</Text>
+            </PickerHeader>,
+        );
+        expect(getByText('Title')).toBeDefined();
+        expect(getByText('Child')).toBeDefined();
+    });
+
+    it('should render search input when `isSearchInputVisible`', () => {
+        const searchInputSpy = jest.fn();
+        const { getByPlaceholderText } = render(
+            <PickerHeader
+                title="Title"
+                isSearchInputVisible
+                onSearchInputChange={searchInputSpy}
+                searchInputPlaceholder="Search placeholder"
+            />,
+        );
+        const searchInput = getByPlaceholderText('Search placeholder');
+
+        fireEvent.changeText(searchInput, 'search');
+
+        expect(searchInputSpy).toHaveBeenCalledWith('search');
+    });
+});