mui-tel-input 1.4.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +9 -85
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.types.d.ts +1 -1
  4. package/dist/mui-tel-input.es.js +2599 -5262
  5. package/dist/mui-tel-input.umd.js +17 -17
  6. package/package.json +34 -29
package/README.md CHANGED
@@ -1,3 +1,6 @@
1
+ <div align="center">
2
+ <img src="https://viclafouch.github.io/mui-tel-input/img/logo.svg" width="80" />
3
+ </div>
1
4
  <div align="center">
2
5
  <h1>MUI tel input</h1>
3
6
  <p>A phone number input designed for the React library <a href="https://mui.com/">MUI</a></p>
@@ -8,12 +11,10 @@
8
11
  ![ts](https://badgen.net/badge/Built%20With/TypeScript/blue)
9
12
  [![npm](https://img.shields.io/npm/v/mui-tel-input)](https://www.npmjs.com/package/mui-tel-input)
10
13
  [![CircleCI](https://circleci.com/gh/viclafouch/mui-tel-input/tree/master.svg?style=svg)](https://circleci.com/gh/viclafouch/mui-tel-input/tree/master)
11
-
14
+
12
15
  <div align="center">
13
16
  <img src="https://github.com/viclafouch/mui-tel-input/blob/master/mui-tel-input.gif" width="100%" />
14
17
  </div>
15
-
16
- ## ➡️ ➡ ➡️ [DEMO](https://codesandbox.io/s/mui-tel-input-p7b2jz) ⬅️ ⬅️ ⬅️
17
18
 
18
19
  </div>
19
20
 
@@ -27,6 +28,8 @@ npm install mui-tel-input
27
28
  yarn add mui-tel-input
28
29
  ```
29
30
 
31
+ The component uses [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) for phone number parsing and formatting.
32
+
30
33
  ## Usage
31
34
 
32
35
  ```jsx
@@ -43,90 +46,11 @@ const MyComponent = () => {
43
46
  return <MuiTelInput value={value} onChange={handleChange} />
44
47
  }
45
48
  ```
49
+ ## [Documentation](https://viclafouch.github.io/mui-tel-input/)
46
50
 
47
- ### Phone number validation
48
-
49
- ```jsx
50
- import React from 'react'
51
- import Box from '@mui/material/Box'
52
- import Typography from '@mui/material/Typography'
53
- import { MuiTelInput, isValidPhoneNumber } from 'mui-tel-input'
54
-
55
- const MyComponent = () => {
56
- const [value, setValue] = React.useState('')
57
- const [isValid, setIsValid] = React.useState(false)
58
-
59
- const handleChange = (newValue) => {
60
- setIsValid(isValidPhoneNumber(newValue))
61
- setValue(newValue)
62
- }
63
-
64
- return (
65
- <Box>
66
- <Typography>This is valid ? {isValid ? 'yes' : 'no'}</Typography>
67
- <MuiTelInput value={value} onChange={handleChange} />
68
- </Box>
69
- )
70
- }
71
- ```
72
-
73
- ## Props
74
-
75
- | Name | Type | Description |
76
- | --------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
77
- | `value` | `string` | The phone number value (**Required**) |
78
- | `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.
79
- | `onlyCountries?` | `array` | [Country codes](#country-code) to be included.
80
- | `excludedCountries?` | `array` | [Country codes](#country-code) to be excluded. |
81
- | `preferredCountries?` | `array` | [Country codes](#country-code) to be highlighted to the top of the list of countries.
82
- | `continents?` | `array` | [Continent codes](#continent-code) to include a list of countries.
83
- | `forceCallingCode?` | `boolean` | Force the calling code (e.g: `+33`) to be displayed so the value cannot be empty. Default `false`.
84
- | `focusOnSelectCountry?` | `boolean` | Autofocus the input when the user selects a country in the list. Default `false`.
85
- | `disableDropdown?` | `boolean` | No country list / The current flag is a `span` instead of a `button`. Default `false`.
86
- | `disableFormatting?` | `boolean` | Remove format (spaces..) from the input value. Default `false`.
87
- | `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`.
88
- | `MenuProps?` | [Menu API](https://mui.com/api/menu) | Props for the Menu component.
89
- | `ref?` | `React.Ref<HTMLDivElement>` | A ref pointing to the [Mui TextField component](https://mui.com/components/text-fields/).
90
- | [TextField Props](#inheritance) | |
91
-
92
- ### Inheritance
93
-
94
- While not explicitly documented above, the props of the [TextField](https://mui.com/api/text-field) component are also available on MuiTelInput.
95
-
96
- ## CSS
97
-
98
- | Global class | Description |
99
- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
100
- | `.MuiTelInput-TextField` | Styles applied to the root element. |
101
- | `.MuiTelInput-IconButton` | Styles applied to the [IconButton](https://mui.com/material-ui/api/icon-button/) of the current flag. |
102
- | `.MuiTelInput-Flag` | Styles applied to a flag. |
103
- | `.MuiTelInput-Menu` | Styles applied to [Menu](https://mui.com/material-ui/api/menu/) component. |
104
- | `.MuiTelInput-MenuItem` | Styles applied to a flag item of the [Menu](https://mui.com/material-ui/api/menu/). |
105
- | `.MuiTelInput-ListItemIcon-flag` | Styles applied to the [ListItemIcon](https://mui.com/material-ui/api/list-item-icon/) of a flag item |
106
- | `.MuiTelInput-ListItemText-country` | Styles applied to the [ListItemText](https://mui.com/material-ui/api/list-item-text/) of a flag item |
107
- | `.MuiTelInput-Typography-calling-code` | Styles applied to the calling code of a flag item |
108
-
109
- You can override the style of the component with a [global class name](https://mui.com/material-ui/guides/interoperability/#global-css).
110
-
111
-
112
-
113
- ## Country code
114
-
115
- A "country code" is a [two-letter ISO country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) (like `US`).
116
-
117
- This library supports all [officially assigned](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements) ISO alpha-2 country codes, plus a few extra ones like: `AC` ([Ascension Island](https://en.wikipedia.org/wiki/Ascension_Island)), `TA` ([Tristan da Cunha](https://en.wikipedia.org/wiki/Tristan_da_Cunha)), `XK` ([Kosovo](https://en.wikipedia.org/wiki/Kosovo)).
118
-
119
- ## Continent code
51
+ ## Changelog
120
52
 
121
- | Code | Continent
122
- | --------------- | -------------------------------
123
- | AF | Africa
124
- | AS | Asia
125
- | EU | Europe
126
- | NA | North America
127
- | OC | Oceania
128
- | SA | South America
129
- | OC | Oceania
53
+ Go to [Github Releases](https://github.com/viclafouch/mui-tel-input/releases)
130
54
 
131
55
  ## TypeScript
132
56
 
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { MuiTelInputContinent, MuiTelInputCountry, MuiTelInputInfo, MuiTelInputProps, MuiTelInputReason } from './index.types';
3
- export { isValidPhoneNumber, AsYouType } from 'libphonenumber-js';
3
+ export { isValidPhoneNumber as matchIsValidTel, AsYouType } from 'libphonenumber-js';
4
4
  export type { MuiTelInputProps, MuiTelInputReason, MuiTelInputInfo, MuiTelInputCountry, MuiTelInputContinent };
5
5
  declare const MuiTelInput: React.ForwardRefExoticComponent<Pick<MuiTelInputProps, "onChange" | "classes" | "className" | "style" | "children" | "color" | "disabled" | "error" | "fullWidth" | "focused" | "hiddenLabel" | "margin" | "required" | "size" | "sx" | "variant" | "label" | "slot" | "title" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "InputProps" | "autoComplete" | "autoFocus" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputProps" | "inputRef" | "name" | "rows" | "maxRows" | "minRows" | "SelectProps" | "value" | "disableDropdown" | "excludedCountries" | "onlyCountries" | "preferredCountries" | "defaultCountry" | "forceCallingCode" | "focusOnSelectCountry" | "langOfCountryName" | "disableFormatting" | "continents" | "MenuProps"> & React.RefAttributes<HTMLDivElement>>;
6
6
  export { MuiTelInput };
package/dist/index.types.d.ts CHANGED
@@ -24,6 +24,6 @@ export interface MuiTelInputProps extends BaseTextFieldProps {
24
24
  disableFormatting?: boolean;
25
25
  continents?: MuiTelInputContinent[];
26
26
  onChange?: (value: string, info: MuiTelInputInfo) => void;
27
- value: string;
27
+ value?: string | undefined;
28
28
  MenuProps?: Partial<MenuProps>;
29
29
  }