@types/react-phone-number-input - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

react-phone-number-input/index.d.ts

 // Type definitions for react-phone-number-input 3.0
 // Project: https://github.com/AdrienEtienne/react-phone-number-input
 // Definitions by: Peter Yang <https://github.com/PeterYangIO>
-//                Adrien Etienne <https://github.com/AdrienEtienne>
-//                Jonathan Fleckenstein <https://github.com/fleck>
+//                 Adrien Etienne <https://github.com/AdrienEtienne>
+//                 Jonathan Fleckenstein <https://github.com/fleck>
+//                 James Lismore <https://github.com/jlismore>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // Minimum TypeScript Version: 3.5
 
-import * as React from "react";
+import * as React from 'react';
 
-export type NumberFormat = "NATIONAL" | "National" | "INTERNATIONAL" | "International";
+/**
+ * Formats value as a "local" phone number
+ * @example formatPhoneNumber('[phone]') === '[phone]'
+ */
+export function formatPhoneNumber(value: string): string;
 
-export function formatPhoneNumber(value: string, format?: NumberFormat): string;
+/**
+ * Formats value as an "international" phone number
+ * @example formatPhoneNumberIntl('[phone]') === '[phone]'
+ */
 export function formatPhoneNumberIntl(value?: string): string;
+
+/**
+ * Checks if the phone number is "possible". Only checks the phone number length,
+ * doesn't check the number digits against any regular expressions like isValidPhoneNumber() does
+ */
+export function isPossiblePhoneNumber(value: string): boolean;
+
+/**
+ * Validates a phone number value
+ */
 export function isValidPhoneNumber(value?: string): boolean;
 
-export interface FlagsMap { [countryCode: string]: React.Component<object, object>; }
+/**
+ * This is simply an alias for getCountryCallingCode() from libphonenumber-js
+ * @example getCountryCallingCode('US') === '1'
+ */
+export function getCountryCallingCode(country: string): string;
 
+export interface FlagsMap {
+    [countryCode: string]: React.Component<object, object>;
+}
+
 export interface CountrySelectComponentProps {
@@ -24,55 +50,137 @@ className?: string;
     onBlur?: () => void;
-    onChange?: (value: string) => void;
+    onChange?: (value?: string) => void;
     onFocus?: () => void;
-    options?: Array<{ value?: string, label: string, icon: React.Component }>;
-    tabIndex?: (number | string);
+    /**
+     * The list of all selectable countries (including "International")
+     */
+    options?: Array<{ value?: string; label: string; icon: React.Component }>;
+    tabIndex?: number | string;
+    /**
+     * The currently selected country code
+     */
     value?: string;
 }
 
-export interface InputComponentProps {
+export interface PhoneInputProps extends Omit<React.InputHTMLAttributes<string>, 'onChange'> {
     // Required props
     onChange: (value: string) => void;
+    /**
+     * The phone number (in E.164 format).
+     * Examples: `undefined`, `"+12"`, `"[phone]"`.
+     */
     value: string;
     // Optional props
-    onFocus?: () => void;
-    onBlur?: () => void;
-    country?: string;
-    metadata?: object;
-}
 
-export interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "id"> {
-    // Required props
-    onChange: (value: string) => void;
-    value: string;
-    // Optional props
-    autoComplete?: string;
-    className?: string;
-    country?: string;
+    /**
+     * Set to false to remove the "International" option from country <select/>.
+     */
+    addInternationalOption?: boolean;
+    /**
+     * If specified, only these countries will be available for selection.
+     * @example ["RU", "UA", "KZ"]
+     */
     countries?: string[];
-    countryOptions?: string[];
-    countrySelectComponent?: React.Component<CountrySelectComponentProps, object>;
-    countrySelectTabIndex?: number;
+    /**
+     * Can be used to place some countries on top of the list of country <select/> options.
+     *  - "|" — inserts a separator.
+     *  - "..." — means "the rest of the countries" (can be omitted, in which case it will
+     * automatically be added at the end).
+     *
+     * @example
+     * ["US", "CA", "AU", "|", "..."]
+     */
+    countryOptionsOrder?: string[];
+    countrySelectComponent?: React.ComponentType<CountrySelectComponentProps>;
+    /**
+     * Country <select/> component props. Along with the usual DOM properties such as aria-label
+     * and tabIndex, some custom properties are supported, such as arrowComponent and unicodeFlags.
+     */
+    countrySelectProps?: number;
+    /**
+     * A two-letter country code for formatting `value`
+     * when a user inputs a national phone number (example: `[phone]`).
+     * The user can still input a phone number in international format.
+     * Example: "US".
+     * `country` and `defaultCountry` properties are mutually exclusive.
+     */
     defaultCountry?: string;
+    /**
+     * Set to true to disable both the phone number <input/> and the country <select/>
+     */
     disabled?: boolean;
     displayInitialValueAsLocalNumber?: boolean;
     error?: string;
-    ext?: React.ReactElement;
-    flagComponent?: React.Component<{ country: string, flagsPath: string, flags: FlagsMap, }, object>;
+    flagComponent?: React.ComponentType<{ country: string; flagsPath: string; flags: FlagsMap }>;
     flags?: FlagsMap;
-    flagsPath?: string;
-    getInputClassName?: (params: { disable?: boolean, invalid?: boolean }) => string;
-    id?: string | number;
-    inputComponent?: React.Component<InputComponentProps, object>;
-    international?: boolean;
-    internationalIcon?: React.Component<object, object>;
+    /**
+     * A URL template of a country flag, where "{XX}" is a two-letter country code in upper case,
+     * or where "{xx}" is a two-letter country code in lower case. By default it points to
+     * country-flag-icons github pages website. I imagine someone might want to download those
+     * country flag icons and host them on their own servers instead (all flags are available in
+     * the country-flag-icons library). There's a catch though: new countries may be added in future,
+     * so when hosting country flag icons on your own server one should check the CHANGELOG.md every
+     * time before updating this library, otherwise there's a possibility that some new country flag
+     * would be missing.
+     */
+    flagUrl?: string;
+    /**
+     * Phone number <input/> component.
+     *
+     * Receives properties:
+     *  - value: string — The formatted value.
+     *  - onChange(event: Event) — Updates the formatted value from event.target.value.
+     *  - onFocus() — Is used to toggle the --focus CSS class.
+     *  - onBlur() — Is used to toggle the --focus CSS class.
+     *  - Other properties like type="tel" or autoComplete="tel" that should be passed through to the DOM <input/>.
+     *
+     * Must also either use React.forwardRef() to "forward" ref to the <input/> or implement .focus() method.
+     */
+    inputComponent?: React.ForwardRefExoticComponent<
+        React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<any>
+    >;
+    /**
+     * If `country` property is passed along with `international={true}` property
+     * then the phone number will be input in "international" format for that `country`
+     * (without "country calling code").
+     * For example, if `country="US"` property is passed to "without country select" input
+     * then the phone number will be input in the "national" format for `US` (`[phone]`).
+     * But if both `country="US"` and `international={true}` properties are passed then
+     * the phone number will be input in the "international" format for `US` (`213 373 4253`)
+     * (without "country calling code" `+1`).
+     */
+    internationalIcon?: React.ComponentType<object>;
     inputClassName?: string;
     labels?: { [key: string]: string };
+    /**
+     * If set to true the phone number input will get trimmed if it exceeds the maximum length for the country.
+     */
     limitMaxLength?: boolean;
     metadata?: object;
-    placeholder?: string;
+    /**
+     * Phone number <input/> component additional props.
+     */
+    numberInputProps?: object;
+    /**
+     * Is called every time the selected country changes: either programmatically or when user selects it manually from the list.
+     */
     onCountryChange?: (countryCode?: string) => void;
     showCountrySelect?: boolean;
-    style?: React.CSSProperties;
+    /**
+     * By default, the caret position is being "intelligently" managed
+     * while a user inputs a phone number.
+     * This "smart" caret behavior can be turned off
+     * by passing `smartCaret={false}` property.
+     * This is just an "escape hatch" for any possible caret position issues.
+     * @default true
+     */
+    smartCaret?: boolean;
+    /**
+     * When `defaultCountry` is defined and the initial `value` corresponds to `defaultCountry`,
+     * then the `value` will be formatted as a national phone number by default.
+     * To format the initial `value` of `defaultCountry` as an international number instead
+     * set `useNationalFormatForDefaultCountryValue` property to `true`.
+     */
+    useNationalFormatForDefaultCountryValue?: boolean;
 }
 
-export default class PhoneInput extends React.Component<PhoneInputProps, object> { }
+export default class PhoneInput extends React.Component<PhoneInputProps, object> {}

react-phone-number-input/package.json

 {
     "name": "@types/react-phone-number-input",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "description": "TypeScript definitions for react-phone-number-input",
@@ -21,2 +21,7 @@ "license": "MIT",
             "githubUsername": "fleck"
+        },
+        {
+            "name": "James Lismore",
+            "url": "https://github.com/jlismore",
+            "githubUsername": "jlismore"
         }
@@ -35,4 +40,4 @@ ],
     },
-    "typesPublisherContentHash": "92d604ba1cb7a16ad7d019783c7c77c8d70edde3bd66ad92b0c9290331f74e25",
+    "typesPublisherContentHash": "425f75dca972a3f9e69e95ea3ccf235151823548b7173961c1f98b40f573db0f",
     "typeScriptVersion": "3.5"
 }

react-phone-number-input/README.md

@@ -11,3 +11,3 @@ # Installation
 ### Additional Details
- * Last updated: Tue, 28 Jan 2020 17:57:10 GMT
+ * Last updated: Thu, 30 Jan 2020 21:23:42 GMT
  * Dependencies: [@types/react](https://npmjs.com/package/@types/react)
@@ -17,2 +17,2 @@ * Global values: none
 # Credits
-These definitions were written by Peter Yang (https://github.com/PeterYangIO), Adrien Etienne (https://github.com/AdrienEtienne), and Jonathan Fleckenstein (https://github.com/fleck).
+These definitions were written by Peter Yang (https://github.com/PeterYangIO), Adrien Etienne (https://github.com/AdrienEtienne), Jonathan Fleckenstein (https://github.com/fleck), and James Lismore (https://github.com/jlismore).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10801

increased by86.42%

Lines of code

174

increased by152.17%

No dependency changes