mui-tel-input 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Victor de la Fouchardière
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+<div align="center">
+<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)
+  
+</div>
+
+## Installation
+
+```
+// with npm
+npm install mui-tel-input
+
+// with yarn
+yarn add mui-tel-input
+```
+
+## Usage
+
+```jsx
+import React from 'react'
+import { MuiTelInput } from 'mui-tel-input'
+
+const MyComponent = () => {
+  const [value, setValue] = React.useState('')
+
+  const handleChange = (newValue) => {
+    setValue(newValue)
+  }
+
+  return <MuiTelInput value={value} onChange={handleChange} />
+}
+```
+
+### Phone number validation
+
+```jsx
+import React from 'react'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { MuiTelInput, isValidPhoneNumber } from 'mui-tel-input'
+
+const MyComponent = () => {
+  const [value, setValue] = React.useState('')
+  const [isValid, setIsValid] = React.useState(false)
+
+  const handleChange = (newValue) => {
+    setIsValid(isValidPhoneNumber(newValue))
+    setValue(newValue)
+  }
+
+  return (
+    <Box>
+      <Typography>This is valid ? {isValid ? 'yes' : 'no'}</Typography>
+      <MuiTelInput value={value} onChange={handleChange} />
+    </Box>
+  )
+}
+```
+
+## Options
+
+| 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.                                     
+| `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`.
+| `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) | | 
+
+### Inheritance
+
+While not explicitly documented above, the props of the [TextField](https://mui.com/api/text-field) component are also available on MuiTelInput.
+
+
+## Country code
+
+A "country code" is a [two-letter ISO country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) (like `US`).
+
+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)).
+
+## Continent code
+
+| Code            | Continent                                                                                                             
+| --------------- | -------------------------------
+| AF              | Africa
+| AS              | Asia
+| EU              | Europe
+| NA              | North America
+| OC              | Oceania
+| SA              | South America
+| OC              | Oceania
+
+## TypeScript
+
+This library comes with TypeScript "typings". If you happen to find any bugs in those, create an issue.
+
+### 🐛 Bugs
+
+Please file an issue for bugs, missing documentation, or unexpected behavior.
+
+### 💡 Feature Requests
+
+Please file an issue to suggest new features. Vote on feature requests by adding
+a 👍. This helps maintainers prioritize what to work on.
+
+## LICENSE
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { MuiTelInputContinent, MuiTelInputCountry, MuiTelInputInfo, MuiTelInputProps, MuiTelInputReason } from './index.types';
+export { isValidPhoneNumber, AsYouType } from 'libphonenumber-js';
+export type { MuiTelInputProps, MuiTelInputReason, MuiTelInputInfo, MuiTelInputCountry, MuiTelInputContinent };
+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>>;
+export { MuiTelInput };

package/dist/index.types.d.ts

@@ -0,0 +1,29 @@
+import type { MenuProps } from '@mui/material/Menu';
+import type { TextFieldProps } from '@mui/material/TextField';
+import type { MuiTelInputContinent } from './shared/constants/continents';
+import type { MuiTelInputCountry } from './shared/constants/countries';
+declare type BaseTextFieldProps = Omit<TextFieldProps, 'onChange' | 'select' | 'type' | 'multiline' | 'defaultValue'>;
+export type { MuiTelInputContinent, MuiTelInputCountry };
+export declare type MuiTelInputReason = 'country' | 'input';
+export interface MuiTelInputInfo {
+    countryCode: MuiTelInputCountry | null;
+    countryCallingCode: string | null;
+    nationalNumber: string | null;
+    numberValue: string | null;
+    reason: MuiTelInputReason;
+}
+export interface MuiTelInputProps extends BaseTextFieldProps {
+    excludedCountries?: MuiTelInputCountry[];
+    onlyCountries?: MuiTelInputCountry[];
+    preferredCountries?: MuiTelInputCountry[];
+    defaultCountry?: MuiTelInputCountry;
+    forceCallingCode?: boolean;
+    focusOnSelectCountry?: boolean;
+    disableDropdown?: boolean;
+    langOfCountryName?: string;
+    disableFormatting?: boolean;
+    continents?: MuiTelInputContinent[];
+    onChange?: (value: string, info: MuiTelInputInfo) => void;
+    value: string;
+    MenuProps?: Partial<MenuProps>;
+}