mui-tel-input 1.0.2 → 1.0.3

package/README.md

@@ -1,11 +1,13 @@
 <div align="center">
-<h1>Mui-tel-input</h1>
+<h1>MUI tel input</h1>
   <p>A phone number input designed for the React library <a href="https://mui.com/">MUI</a></p>
 </div>
 <div align="center">
-  
-  [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/viclafouch/mui-tel-input/blob/master/LICENSE)
-  
+
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/viclafouch/mui-tel-input/blob/master/LICENSE)
+[![npm](https://img.shields.io/npm/v/mui-tel-input)](https://www.npmjs.com/package/mui-tel-input)
+[![CircleCI](https://circleci.com/gh/viclafouch/mui-tel-input/tree/master.svg?style=svg)](https://circleci.com/gh/viclafouch/mui-tel-input/tree/master)
+
 </div>
 
 ## Installation
@@ -66,17 +68,18 @@ const MyComponent = () => {
 | Name            | Type                            | Description                                                                                                                   |
 | --------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | `value`         | `string`                        | The phone number value (**Required**)                                                                                                                   |
-| `onChange`    | `(value, info) => void`                     | Gets called once the user updates the input or selects a new country.                        | `defaultCountry?`        | `string`                        | [Country code](#country-code) to be displayed on mount.                                     
+| `onChange?`    | `(value, info) => void`                     | Gets called once the user updates the input or selects a new country.                        | `defaultCountry?`        | `string`                        | [Country code](#country-code) to be displayed on mount.
 | `onlyCountries?`        | `array`                        | [Country codes](#country-code) to be included.                                                 | `excludedCountries?`        | `array`                        | [Country codes](#country-code) to be excluded.
 | `preferredCountries?`        | `array`                        | [Country codes](#country-code) to be highlighted to the top of the list of countries.
 | `continents?`        | `array`                        | [Continent codes](#continent-code) to include a list of countries.
 | `forceCallingCode?`        | `boolean`                        | Force the calling code (e.g: `+33`) to be displayed so the value cannot be empty. Default `false`.
 | `focusOnSelectCountry?`        | `boolean`                        | Autofocus the input when the user selects a country in the list. Default `false`.
 | `disableDropdown?`        | `boolean`                        | No country list / The current flag is a `span` instead of a `button`. Default `false`.
+| `disableFormatting?`        | `boolean`                        | Remove format (spaces..) from the input value. Default `false`.
 | `langOfCountryName?`        | `string`                        | An Intl locale to translate countries (see [Intl locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames)). Default `en`.
 | `MenuProps?`          | [Menu API](https://mui.com/api/menu)     | Props for the Menu component.
 | `ref?`          | `React.Ref<HTMLDivElement>`     | A ref pointing to the [Mui TextField component](https://mui.com/components/text-fields/).
-| [TextField Props](#inheritance) | | 
+| [TextField Props](#inheritance) | |
 
 ### Inheritance
 
@@ -91,7 +94,7 @@ This library supports all [officially assigned](https://en.wikipedia.org/wiki/IS
 
 ## Continent code
 
-| Code            | Continent                                                                                                             
+| Code            | Continent
 | --------------- | -------------------------------
 | AF              | Africa
 | AS              | Asia

package/dist/mui-tel-input.es.js

@@ -16165,12 +16165,15 @@ AsYouType.prototype = Object.create(AsYouType$1.prototype, {});
 AsYouType.prototype.constructor = AsYouType;
 
 function getInitialState(params) {
-  const { defaultCountry, initialValue } = params;
+  const { defaultCountry, initialValue, disableFormatting } = params;
   const fallbackValue = defaultCountry ? `+${COUNTRIES[defaultCountry][0]}` : "";
   const asYouType = new AsYouType(defaultCountry);
   let inputValue = asYouType.input(initialValue);
+  const phoneNumberValue = asYouType.getNumberValue();
   if (defaultCountry && asYouType.getCountry() === void 0) {
     inputValue = fallbackValue;
+  } else if (disableFormatting && phoneNumberValue) {
+    inputValue = phoneNumberValue;
   }
   return {
     inputValue: inputValue || fallbackValue,
@@ -16197,7 +16200,8 @@ function usePhoneDigits({
   forceCallingCode,
   onlyCountries,
   excludedCountries,
-  continents
+  continents,
+  disableFormatting
 }) {
   const asYouTypeRef = React.useRef(new AsYouType(defaultCountry));
   const inputRef = React.useRef(null);
@@ -16205,7 +16209,8 @@ function usePhoneDigits({
   const [state, setState] = React.useState(() => {
     return getInitialState({
       initialValue: value,
-      defaultCountry
+      defaultCountry,
+      disableFormatting
     });
   });
   const [previousValue, setPreviousValue] = React.useState(value);
@@ -16256,6 +16261,13 @@ function usePhoneDigits({
         isoCode: null,
         inputValue: numberValue
       });
+    } else if (disableFormatting) {
+      onChange?.(numberValue, buildOnChangeInfo("input"));
+      setPreviousValue(numberValue);
+      setState({
+        isoCode: country || null,
+        inputValue: numberValue
+      });
     } else {
       onChange?.(formattedValue, buildOnChangeInfo("input"));
       setPreviousValue(formattedValue);
@@ -16283,7 +16295,6 @@ function usePhoneDigits({
         defaultCountry
       });
       setPreviousValue(inputValue);
-      asYouTypeRef.current.reset();
       asYouTypeRef.current.input(inputValue);
       onChange?.(inputValue, buildOnChangeInfo("country"));
       setState({
@@ -16358,6 +16369,7 @@ const MuiTelInput = React.forwardRef((props, propRef) => {
     forceCallingCode,
     excludedCountries,
     onlyCountries,
+    disableFormatting,
     continents
   });
   const handleOpenFlagsMenu = (event) => {
@@ -16466,4 +16478,3 @@ const MuiTelInput = React.forwardRef((props, propRef) => {
 });
 
 export { AsYouType, MuiTelInput, isValidPhoneNumber };
-//# sourceMappingURL=mui-tel-input.es.js.map