feat: ✨ add new order prop and customArrow

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-international-phone",
-  "version": "4.2.6",
+  "name": "gustavolbs-react-international-phone",
+  "version": "4.2.7",
   "description": "☎️ International phone input component for React",
   "keywords": [
     "react",
@@ -148,4 +148,4 @@
     "access": "public"
   },
   "homepage": "https://react-international-phone-docs.vercel.app/"
-}
+}

src/components/CountrySelector/CountrySelector.style.scss

@@ -68,6 +68,8 @@ $disabled-country-selector-background-color: var(
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 4px;
+    padding: 0 4px;
   }
 
   &__flag-emoji {

src/components/CountrySelector/CountrySelector.tsx

@@ -1,12 +1,13 @@
 import './CountrySelector.style.scss';
 
-import React, { useMemo, useRef, useState } from 'react';
+import React, { ReactNode, useMemo, useRef, useState } from 'react';
 
 import { defaultCountries } from '../../data/countryData';
 import { buildClassNames } from '../../style/buildClassNames';
-import { CountryData, CountryIso2 } from '../../types';
+import { CountryData, CountryIso2, ParsedCountry } from '../../types';
 import { getCountry } from '../../utils';
 import { FlagImage } from '../FlagImage/FlagImage';
+import { AvailableKeys } from '../PhoneInput/PhoneInput';
 import {
   CountrySelectorDropdown,
   CountrySelectorDropdownProps,
@@ -59,6 +60,11 @@ export interface CountrySelectorProps extends CountrySelectorStyleProps {
     children: React.ReactNode;
     rootProps: RenderButtonWrapperRootProps;
   }) => React.ReactNode;
+  order?: AvailableKeys[];
+  country?: ParsedCountry;
+  customArrow?: ReactNode;
+  openDropdown?: boolean;
+  setIsOpenDropdown?: (value: React.SetStateAction<boolean>) => void;
 }
 
 export const CountrySelector: React.FC<CountrySelectorProps> = ({
@@ -70,6 +76,13 @@ export const CountrySelector: React.FC<CountrySelectorProps> = ({
   preferredCountries = [],
   flags,
   renderButtonWrapper,
+
+  order,
+  country,
+  customArrow,
+  openDropdown,
+  setIsOpenDropdown,
+
   ...styleProps
 }) => {
   const [showDropdown, setShowDropdown] = useState(false);
@@ -90,14 +103,19 @@ export const CountrySelector: React.FC<CountrySelectorProps> = ({
 
     if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
       e.preventDefault();
+
+      if (setIsOpenDropdown) setIsOpenDropdown(true);
       setShowDropdown(true);
     }
   };
 
   const renderSelectorButton = () => {
     const rootProps: RenderButtonWrapperRootProps = {
       title: fullSelectedCountry?.name,
-      onClick: () => setShowDropdown((v) => !v),
+      onClick: () => {
+        if (setIsOpenDropdown) setIsOpenDropdown((v) => !v);
+        setShowDropdown((v) => !v);
+      },
       // Need this to close dropdown on selector button click
       // https://stackoverflow.com/a/28963938
       onMouseDown: (e) => e.preventDefault(),
@@ -106,17 +124,11 @@ export const CountrySelector: React.FC<CountrySelectorProps> = ({
       role: 'combobox',
       'aria-label': 'Country selector',
       'aria-haspopup': 'listbox',
-      'aria-expanded': showDropdown,
+      'aria-expanded': openDropdown ?? showDropdown,
     };
 
-    const buttonContent = (
-      <div
-        className={buildClassNames({
-          addPrefix: ['country-selector-button__button-content'],
-          rawClassNames: [styleProps.buttonContentWrapperClassName],
-        })}
-        style={styleProps.buttonContentWrapperStyle}
-      >
+    const orderItems = {
+      flag: (
         <FlagImage
           iso2={selectedCountry}
           src={flags?.find((f) => f.iso2 === selectedCountry)?.src}
@@ -132,20 +144,36 @@ export const CountrySelector: React.FC<CountrySelectorProps> = ({
             ...styleProps.flagStyle,
           }}
         />
-        {!hideDropdown && (
-          <div
-            className={buildClassNames({
-              addPrefix: [
-                'country-selector-button__dropdown-arrow',
-                disabled && 'country-selector-button__dropdown-arrow--disabled',
-                showDropdown &&
-                  'country-selector-button__dropdown-arrow--active',
-              ],
-              rawClassNames: [styleProps.dropdownArrowClassName],
-            })}
-            style={styleProps.dropdownArrowStyle}
-          />
-        )}
+      ),
+      country: <div>{country?.name}</div>,
+      dial: <div>+{country?.dialCode}</div>,
+      arrow: customArrow || (
+        <div
+          className={buildClassNames({
+            addPrefix: [
+              'country-selector-button__dropdown-arrow',
+              disabled && 'country-selector-button__dropdown-arrow--disabled',
+              (openDropdown ?? showDropdown) &&
+                'country-selector-button__dropdown-arrow--active',
+            ],
+            rawClassNames: [styleProps.dropdownArrowClassName],
+          })}
+          style={styleProps.dropdownArrowStyle}
+        />
+      ),
+    };
+
+    const buttonContent = (
+      <div
+        className={buildClassNames({
+          addPrefix: ['country-selector-button__button-content'],
+          rawClassNames: [styleProps.buttonContentWrapperClassName],
+        })}
+        style={styleProps.buttonContentWrapperStyle}
+      >
+        {order?.map((item, index) => (
+          <div key={`item#${index}`}>{orderItems[item]}</div>
+        ))}
       </div>
     );
     if (renderButtonWrapper) {
@@ -161,7 +189,7 @@ export const CountrySelector: React.FC<CountrySelectorProps> = ({
         className={buildClassNames({
           addPrefix: [
             'country-selector-button',
-            showDropdown && 'country-selector-button--active',
+            (openDropdown ?? showDropdown) && 'country-selector-button--active',
             disabled && 'country-selector-button--disabled',
             hideDropdown && 'country-selector-button--hide-dropdown',
           ],
@@ -186,16 +214,18 @@ export const CountrySelector: React.FC<CountrySelectorProps> = ({
     >
       {renderSelectorButton()}
       <CountrySelectorDropdown
-        show={showDropdown}
+        show={openDropdown ?? showDropdown}
         countries={countries}
         preferredCountries={preferredCountries}
         flags={flags}
         onSelect={(country) => {
+          if (setIsOpenDropdown) setIsOpenDropdown(false);
           setShowDropdown(false);
           onSelect?.(country);
         }}
         selectedCountry={selectedCountry}
         onClose={() => {
+          if (setIsOpenDropdown) setIsOpenDropdown(false);
           setShowDropdown(false);
         }}
         {...styleProps.dropdownStyleProps}

src/components/PhoneInput/PhoneInput.tsx

@@ -1,6 +1,6 @@
 import './PhoneInput.style.scss';
 
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, ReactNode, useImperativeHandle } from 'react';
 
 import { defaultCountries } from '../../data/countryData';
 import { usePhoneInput, UsePhoneInputConfig } from '../../hooks/usePhoneInput';
@@ -88,8 +88,14 @@ export interface PhoneInputProps
   autoFocus?: InputProps['autoFocus'];
   disabled?: InputProps['disabled'];
   placeholder?: InputProps['placeholder'];
+  order?: AvailableKeys[];
+  customArrow?: ReactNode;
+  openDropdown?: boolean;
+  setIsOpenDropdown?: (value: React.SetStateAction<boolean>) => void;
 }
 
+export type AvailableKeys = 'flag' | 'country' | 'dial' | 'arrow';
+
 export type PhoneInputRefType =
   | null
   | (HTMLInputElement & {
@@ -129,6 +135,11 @@ export const PhoneInput = forwardRef<PhoneInputRefType, PhoneInputProps>(
       required,
       autoFocus,
 
+      order,
+      customArrow,
+      openDropdown,
+      setIsOpenDropdown,
+
       ...usePhoneInputConfig
     },
     ref,
@@ -196,6 +207,11 @@ export const PhoneInput = forwardRef<PhoneInputRefType, PhoneInputProps>(
           preferredCountries={preferredCountries}
           disabled={disabled}
           hideDropdown={hideDropdown}
+          order={order}
+          country={country}
+          customArrow={customArrow}
+          openDropdown={openDropdown}
+          setIsOpenDropdown={setIsOpenDropdown}
           {...countrySelectorStyleProps}
         />
 

src/stories/PhoneInput/PhoneInput.stories.tsx

@@ -26,6 +26,8 @@ import { WithAutofocus } from './stories/WithAutofocus.story';
 import { DisableFormatting } from './stories/DisableFormatting.story';
 import { ControlledMode } from './stories/ControlledMode.story';
 import { CustomFlags } from './stories/CustomFlags.story';
+import { WithOrder } from './stories/WithOrder.story';
+import { WithCustomArrow } from './stories/WithCustomArrow.story';
 
 export const _Default = Default;
 export const _WithInitialValue = WithInitialValue;
@@ -42,3 +44,5 @@ export const _WithAutofocus = WithAutofocus;
 export const _DisableFormatting = DisableFormatting;
 export const _ControlledMode = ControlledMode;
 export const _CustomFlags = CustomFlags;
+export const _WithOrder = WithOrder;
+export const _WithCustomArrow = WithCustomArrow;

src/stories/PhoneInput/stories/WithCustomArrow.story.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { PhoneInput } from '../../../index';
+import { PhoneInputStory } from '../PhoneInput.stories';
+
+export const WithCustomArrow: PhoneInputStory = {
+  name: 'With Custom Arrow Prop',
+  render: (args) => <PhoneInput {...args} />,
+  args: {
+    defaultCountry: 'br',
+    disableDialCodeAndPrefix: true,
+    order: ['country', 'flag', 'arrow', 'dial'],
+    customArrow: <div>123</div>,
+  },
+};

src/stories/PhoneInput/stories/WithOrder.story.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { PhoneInput } from '../../../index';
+import { PhoneInputStory } from '../PhoneInput.stories';
+
+export const WithOrder: PhoneInputStory = {
+  name: 'With Order Prop',
+  render: (args) => <PhoneInput {...args} />,
+  args: {
+    defaultCountry: 'br',
+    disableDialCodeAndPrefix: true,
+    order: ['flag', 'country', 'dial', 'arrow'],
+  },
+};