v9.0.1

Fix

• #179 Fix outdated lockfile
• #183 Fix: Dialling Code Dropdown appears below Helper Text

v9.0.0

Feat

• Upgrade to MUI V7 (MUI V6 is not compatible anymore because of deprecated API removing)
• Update deps

v8.0.1

Fixes

• #174 Missing types.

Breaking change : The component is not using React.forwardRef anymore. So care if you are on React 18. The ref will not be populated.

v8.0.0

Feature

• Enable compatibility with React 19 (React 18 is still maintained).
• Update deps

No breaking change.

v7.0.0

🚨 BREAKING CHANGE

Upgrade to MUI V6 ONLY. V5 is no more compatible. If you want more features and bug fixes from this package, you should consider upgrade your codebase to V6.

Fixes

• #164 focusOnSelectCountry prop is now working properly ;
• #157 A new prop is coming : FlagIconButtonProps to let you customize the aria-label of the button:
  • Type: Partial<IconButtonProps>
  • Default: undefined

This prop let you to customize the IconButton component of the flag.

Example

<MuiTelInput FlagIconButtonProps={{ 'aria-label': 'Ouvrir la liste des pays' }} />

v6.0.1

Fix

• Type error using MuiTelInputProps after updating from MUI v6.0.2 to v6.1.0 #156

V.6.0.0

Feat

• Upgrade to MUI V6 (Still compatible with V5). No breaking change. Fix #154
• Update deps

v5.1.2

Fixes

• #129 Expose flagImage className

v5.1.1

Features

• #116: Expose css selector to select flag (Thanks to @spicattutti)

That means you can do this now:

import { styled } from 'styled-component' // or emotion
import { MuiTelInput, classes } from 'mui-tel-input'

const WithStyledFlag = styled(MuiTelInput)`
  .${classes.flag} > img {
    filter: grayscale(100%);
    width: 20px;
  }
`

function MyComponent() {
  return <WithStyledFlag />
}

v5.1.0

Fix

Validation phone (matchIsValidTel)

• #88 : Excluded country numbers continue to be formatted

What changed ?

Previously, matchIsValidTel give you true if your phone number is correct whatever the country. But what if the country of the phone has been excluded to the component?

Example:

import { MuiTelInput } from 'mui-tel-input'

<MuiTelInput excludedCountries={['FR']} />

import { matchIsValidTel } from 'mui-tel-input'

matchIsValidTel('+33626766XXX') // `true` but no, `FR` country has been excluded :(

How to solve it with version >= 5.1.0?

import { matchIsValidTel } from 'mui-tel-input'

matchIsValidTel('+33626766XXX',  { excludedCountries: ['FR'] }) // `false` :)

You can also pass onlyCountries and continents to the second object parameter.

More details:

export declare function matchIsValidTel(text: string, options?: {
    excludedCountries?: MuiTelInputCountry[];
    onlyCountries?: MuiTelInputCountry[];
    continents?: MuiTelInputContinent[];
}): boolean;

• Fix: #106
• docs: #126 Add Next.Js instructions to the documentation

Chore

• Update deps