diff --git a/lib/components/Input/input-phone-number/dropdown-content.tsx b/lib/components/Input/input-phone-number/dropdown-content.tsx index 67dce220..6ab264e2 100644 --- a/lib/components/Input/input-phone-number/dropdown-content.tsx +++ b/lib/components/Input/input-phone-number/dropdown-content.tsx @@ -14,12 +14,14 @@ const DropdownContent = ({ containerRef, headcompRef, onItemClick, + showSearchBar = false, }: { options: TCountryCodes[]; code: string; showFlags?: boolean; containerRef: React.RefObject; headcompRef: React.RefObject; + showSearchBar?: boolean; onItemClick: (item: TCountryCodes) => void; }) => { const [searchKey, setSearchKey] = useState(""); @@ -73,6 +75,19 @@ const DropdownContent = ({ className="quill-custom-dropdown__content" ref={dropdownRef} > + {showSearchBar && ( +
+ { + setSearchKey(e.target.value); + }} + /> +
+ )} ) : ( diff --git a/lib/components/Input/input-phone-number/index.tsx b/lib/components/Input/input-phone-number/index.tsx index 8856b707..d2a2a18e 100644 --- a/lib/components/Input/input-phone-number/index.tsx +++ b/lib/components/Input/input-phone-number/index.tsx @@ -24,6 +24,7 @@ export interface InputPhoneNumberProps onCodeChange?: (item: TCountryCodes) => void; onValueChange?: (phoneNumber: string) => void; showFlags?: boolean; + showSearchBar?: boolean; } const InputPhoneNumberContent = forwardRef< @@ -43,6 +44,7 @@ const InputPhoneNumberContent = forwardRef< onCodeChange, onValueChange, showFlags = true, + showSearchBar = false, value, disabled, onChange, @@ -111,6 +113,7 @@ const InputPhoneNumberContent = forwardRef< options={countryCodes} code={shortCode} showFlags={showFlags} + showSearchBar={showSearchBar} containerRef={containerRef} headcompRef={headcompRef} onItemClick={handleItemChange} diff --git a/lib/components/Input/input-phone-number/input-phone-number-docs.mdx b/lib/components/Input/input-phone-number/input-phone-number-docs.mdx index 68b9318f..b7a59b81 100644 --- a/lib/components/Input/input-phone-number/input-phone-number-docs.mdx +++ b/lib/components/Input/input-phone-number/input-phone-number-docs.mdx @@ -29,6 +29,7 @@ import { Markdown } from "@storybook/blocks"; | onCodeChange | (item: TCountryCodes) => void | | Callback function called when the country code changes. | | onValueChange | (phoneNumber: string) => void | | Callback function called input or code values changed and returns phone number with code. | | showFlags | boolean | true | Determines if flags should be displayed in the dropdown. | +| showSearchBar | boolean | false | Determines if search bar should be displayed in the dropdown. | | inputSize | "sm", "md" ,"lg" | "lg" | Sets the size of the input field. | | variant | "outline" ,"fill" | "outline" | Sets the variant style of the input. | | status | "neutral" ,"error" ,"success" | "neutral" | Sets the status style of the input. | diff --git a/lib/components/Input/input-phone-number/input-phone-number.stories.tsx b/lib/components/Input/input-phone-number/input-phone-number.stories.tsx index c3ca59c2..e995e9ec 100644 --- a/lib/components/Input/input-phone-number/input-phone-number.stories.tsx +++ b/lib/components/Input/input-phone-number/input-phone-number.stories.tsx @@ -138,6 +138,11 @@ const meta = { defaultValue: { summary: "outline" }, }, }, + showSearchBar: { + control: { + type: "boolean", + }, + }, rightIcon: { options: Object.keys(icons), mapping: icons,