Yaswanth/Added input props in dropdown component

lib/components/Dropdown/Dropdown.scss

@@ -89,7 +89,7 @@
 
     &__items {
         position: absolute;
-        top: 2.7rem;
+        top: 2.9rem;
         width: 100%;
         display: flex;
         flex-direction: column;

lib/components/Dropdown/index.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement, useCallback, useEffect, useState } from 'react';
+import React, { isValidElement,HtmlHTMLAttributes ,useCallback, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { useCombobox } from 'downshift';
 import { TGenericSizes } from "../../types";
@@ -7,10 +7,11 @@ import  {Input } from '../Input/index';
 import './Dropdown.scss';
 
 type InputProps = React.ComponentProps<typeof Input>;
-type TProps = {
+type TProps = HtmlHTMLAttributes<HTMLInputElement> & {
     disabled?: boolean;
     dropdownIcon: React.ReactNode;
     errorMessage?: InputProps['message'];
+    dropdownHeight?:string;
     icon?: React.ReactNode;
     isRequired?: boolean;
     label?: InputProps['label'];
@@ -20,25 +21,28 @@ type TProps = {
     }[];
     listHeight?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
     name: InputProps['name'];
-    onChange?: (inputValue: string) => void;
+    onSearch?: (inputValue: string) => void;
     onSelect: (value: string) => void;
     value?: InputProps['value'];
     variant?: 'comboBox' | 'prompt';
 };
 
+
 export const Dropdown = ({
     disabled,
     dropdownIcon,
     errorMessage,
+    dropdownHeight,
     icon = false,
     label,
     list,
     listHeight = 'md',
     name,
-    onChange,
+    onSearch,
     onSelect,
     value,
     variant = 'prompt',
+    ...rest
 }:TProps) => {
     const [items, setItems] = useState(list);
     const [shouldFilterList, setShouldFilterList] = useState(false);
@@ -69,7 +73,7 @@ export const Dropdown = ({
                 return item ? reactNodeToString(item.text) : '';
             },
             onInputValueChange({ inputValue }) {
-                onChange?.(inputValue ?? '');
+                onSearch?.(inputValue ?? '');
                 if (shouldFilterList) {
                     setItems(
                         list.filter(item =>
@@ -134,24 +138,31 @@ export const Dropdown = ({
                     type='text'
                     value={value}
                     {...getInputProps()}
+                    {...rest}
                 />
             </div>
             <ul className={`deriv-dropdown__items deriv-dropdown__items--${listHeight}`} {...getMenuProps()}>
-                {isOpen &&
-                    items.map((item, index) => (
-                        <li
-                            className={clsx('deriv-dropdown__item', {
-                                'deriv-dropdown__item--active': value === item.value,
-                            })}
-                            key={item.value}
-                            onClick={() => clearFilter()}
-                            {...getItemProps({ index, item })}
-                        >
-                            <Text size='sm' weight={value === item.value ? 'bold' : 'normal'}>
-                                {item.text}
-                            </Text>
-                        </li>
-                    ))}
+                {isOpen &&(
+                    <div style={{height:dropdownHeight?dropdownHeight:"12.5rem"}}>
+                        {
+                             items.map((item, index) => (
+                                <li
+                                    className={clsx('deriv-dropdown__item', {
+                                        'deriv-dropdown__item--active': value === item.value,
+                                    })}
+                                    key={item.value}
+                                    onClick={() => clearFilter()}
+                                    {...getItemProps({ index, item })}
+                                >
+                                    <Text size='sm' weight={value === item.value ? 'bold' : 'normal'}>
+                                        {item.text}
+                                    </Text>
+                                </li>
+                            ))
+                        }
+                    </div>
+                )
+                   }
             </ul>
         </div>
     );

src/main.tsx

@@ -19,6 +19,38 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
           text: 'Option 2',
           value: 'option2'
         },
+        {
+          text: 'Option 3',
+          value: 'option3'
+        },
+        {
+          text: 'Option 4',
+          value: 'option4'
+        },
+        {
+          text: 'Option 5',
+          value: 'option5'
+        },
+        {
+          text: 'Option 6',
+          value: 'option6'
+        },
+        {
+          text: 'Option 7',
+          value: 'option7'
+        },
+        {
+          text: 'Option 8',
+          value: 'option8'
+        },
+        {
+          text: 'Option 9',
+          value: 'option9'
+        },
+        {
+          text: 'Option 10',
+          value: 'option10'
+        },
       ]}
       dropdownIcon="down"
       onSelect={(value) => console.log(value)}