mui-tel-input 1.0.0 → 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

@@ -265,9 +265,9 @@ const Styled$1 = {
     return {
       display: "inline-block",
       backgroundSize: "cover",
-      "--CountryFlagIcon-height": "0.8em",
-      height: "var(--CountryFlagIcon-height)",
-      width: "calc(var(--CountryFlagIcon-height)*3/2)"
+      "--mui-tel-input-flag-height": "0.8em",
+      height: "var(--mui-tel-input-flag-height)",
+      width: "calc(var(--mui-tel-input-flag-height)*3/2)"
     };
   }),
   Span: styled("span")(() => {
@@ -290,6 +290,7 @@ const Flag = (props) => {
   const svgFlag = isoCode && isoCode in FLAGS_SVG ? `"${FLAGS_SVG[isoCode]}"` : unknownFlag;
   return /* @__PURE__ */ jsx(Styled$1.Flag, {
     "data-testid": isoCode,
+    className: "MuiTelInput-Flag",
     style: {
       backgroundImage: `url(${svgFlag})`
     },
@@ -309,6 +310,7 @@ const FlagButton = (props) => {
   if (disableDropdown) {
     return /* @__PURE__ */ jsx(IconButton, {
       tabIndex: -1,
+      className: "MuiTelInput-IconButton",
       role: "",
       disableRipple: true,
       sx: {
@@ -323,6 +325,7 @@ const FlagButton = (props) => {
   return /* @__PURE__ */ jsx(IconButton, {
     ...iconButtonProps,
     "aria-label": "Select country",
+    className: "MuiTelInput-Flag",
     "aria-haspopup": "listbox",
     "aria-controls": isFlagsMenuOpened ? "select-country" : void 0,
     "aria-expanded": isFlagsMenuOpened ? "true" : "false",
@@ -10422,15 +10425,19 @@ const FlagMenuItem = (props) => {
     onClick: handleClick,
     role: "option",
     "data-testid": `option-${isoCode}`,
+    className: "MuiTelInput-MenuItem",
     children: [/* @__PURE__ */ jsx(Styled.ListItemIcon, {
+      className: "MuiTelInput-ListItemIcon-country-code",
       children: /* @__PURE__ */ jsx(Flag, {
         isoCode
       })
     }), /* @__PURE__ */ jsx(Styled.ListItemText, {
+      className: "MuiTelInput-ListItemText-country",
       children: countryName
     }), /* @__PURE__ */ jsxs(Typography, {
       variant: "body2",
       color: "text.secondary",
+      className: "MuiTelInput-Typography-calling-code",
       children: ["+", COUNTRIES[isoCode][0]]
     })]
   });
@@ -10818,6 +10825,7 @@ const FlagsMenu = (props) => {
     anchorEl,
     open: Boolean(anchorEl),
     id: "select-country",
+    className: "MuiTelInput-Menu",
     MenuListProps: {
       role: "listbox",
       "aria-activedescendant": isoCode ? `country-${isoCode}` : "",
@@ -16157,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,
@@ -16189,7 +16200,8 @@ function usePhoneDigits({
   forceCallingCode,
   onlyCountries,
   excludedCountries,
-  continents
+  continents,
+  disableFormatting
 }) {
   const asYouTypeRef = React.useRef(new AsYouType(defaultCountry));
   const inputRef = React.useRef(null);
@@ -16197,7 +16209,8 @@ function usePhoneDigits({
   const [state, setState] = React.useState(() => {
     return getInitialState({
       initialValue: value,
-      defaultCountry
+      defaultCountry,
+      disableFormatting
     });
   });
   const [previousValue, setPreviousValue] = React.useState(value);
@@ -16248,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);
@@ -16275,7 +16295,6 @@ function usePhoneDigits({
         defaultCountry
       });
       setPreviousValue(inputValue);
-      asYouTypeRef.current.reset();
       asYouTypeRef.current.input(inputValue);
       onChange?.(inputValue, buildOnChangeInfo("country"));
       setState({
@@ -16331,6 +16350,7 @@ const MuiTelInput = React.forwardRef((props, propRef) => {
     continents,
     preferredCountries,
     MenuProps,
+    className,
     ...restTextFieldProps
   } = props;
   const textFieldRef = React.useRef(null);
@@ -16349,6 +16369,7 @@ const MuiTelInput = React.forwardRef((props, propRef) => {
     forceCallingCode,
     excludedCountries,
     onlyCountries,
+    disableFormatting,
     continents
   });
   const handleOpenFlagsMenu = (event) => {
@@ -16420,6 +16441,7 @@ const MuiTelInput = React.forwardRef((props, propRef) => {
       ref: handleRef,
       onDoubleClick: handleDoubleClick,
       inputRef: handleRefInput,
+      className: `MuiTelInput-TextField ${className || ""}`,
       onChange: onInputChange,
       inputProps: {
         onCopy: handleCopy,
@@ -16456,4 +16478,3 @@ const MuiTelInput = React.forwardRef((props, propRef) => {
 });
 
 export { AsYouType, MuiTelInput, isValidPhoneNumber };
-//# sourceMappingURL=mui-tel-input.es.js.map