react-telephone-input - npm Package Compare versions

Comparing version 4.1.2 to 4.2.2

es/ReactTelephoneInput.js

@@ -25,3 +25,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 var ReactDOM = require('react-dom');
-var onClickOutside = require('react-onclickoutside');
+var onClickOutside = require('react-onclickoutside').default;
 var classNames = require('classnames');
@@ -226,3 +226,2 @@ var countryData = require('country-telephone-data');
             var bestGuess = reduce(this.props.onlyCountries, function (selectedCountry, country) {
-
                 // if the country dialCode exists WITH area code
@@ -407,3 +406,5 @@
         if (this.refs.numberInput.value === '+') {
-            this.setState({ formattedNumber: '+' + this.state.selectedCountry.dialCode });
+            this.setState({
+                formattedNumber: '+' + this.state.selectedCountry.dialCode
+            });
         }
@@ -479,3 +480,5 @@ },
                 if (event.which >= keys.A && event.which <= keys.Z || event.which === keys.SPACE) {
-                    this.setState({ queryString: this.state.queryString + String.fromCharCode(event.which) }, this.state.debouncedQueryStingSearcher);
+                    this.setState({
+                        queryString: this.state.queryString + String.fromCharCode(event.which)
+                    }, this.state.debouncedQueryStingSearcher);
                 }
@@ -501,3 +504,5 @@ }
                 country: true,
-                preferred: findIndex(self.state.preferredCountries, { iso2: country.iso2 }) >= 0,
+                preferred: findIndex(self.state.preferredCountries, {
+                    iso2: country.iso2
+                }) >= 0,
                 highlight: self.state.highlightCountryIndex === index
@@ -517,4 +522,8 @@ });
                     'data-country-code': country.iso2,
-                    onClick: self.handleFlagItemClick.bind(self, country) },
-                React.createElement('div', { className: inputFlagClasses, style: self.getFlagStyle() }),
+                    onClick: self.handleFlagItemClick.bind(self, country)
+                },
+                React.createElement('div', {
+                    className: inputFlagClasses,
+                    style: self.getFlagStyle()
+                }),
                 React.createElement(
@@ -533,3 +542,3 @@ 'span',
 
-        var dashedLi = React.createElement('li', { key: "dashes", className: 'divider' });
+        var dashedLi = React.createElement('li', { key: 'dashes', className: 'divider' });
         // let's insert a dashed line in between preffered countries and the rest
@@ -540,3 +549,3 @@ countryDropDownList.splice(this.state.preferredCountries.length, 0, dashedLi);
             'country-list': true,
-            'hide': !this.state.showDropDown
+            hide: !this.state.showDropDown
         });
@@ -563,4 +572,4 @@ return React.createElement(
         var arrowClasses = classNames({
-            'arrow': true,
-            'up': this.state.showDropDown
+            arrow: true,
+            up: this.state.showDropDown
         });
@@ -584,3 +593,5 @@ var inputClasses = classNames({
             'div',
-            { className: classNames('react-tel-input', this.props.classNames, this.props.className) },
+            {
+                className: classNames('react-tel-input', this.props.classNames, this.props.className)
+            },
             React.createElement('input', _extends({
@@ -600,12 +611,25 @@ onChange: this.handleInput,
                 placeholder: this.props.placeholder,
-                disabled: this.props.disabled }, otherProps)),
+                disabled: this.props.disabled
+            }, otherProps)),
             React.createElement(
                 'div',
-                { ref: 'flagDropDownButton', className: flagViewClasses, onKeyDown: this.handleKeydown },
+                {
+                    ref: 'flagDropDownButton',
+                    className: flagViewClasses,
+                    onKeyDown: this.handleKeydown
+                },
                 React.createElement(
                     'div',
-                    { ref: 'selectedFlag', onClick: this.handleFlagDropdownClick, className: 'selected-flag', title: this.state.selectedCountry.name + ': + ' + this.state.selectedCountry.dialCode },
+                    {
+                        ref: 'selectedFlag',
+                        onClick: this.handleFlagDropdownClick,
+                        className: 'selected-flag',
+                        title: this.state.selectedCountry.name + ': + ' + this.state.selectedCountry.dialCode
+                    },
                     React.createElement(
                         'div',
-                        { className: inputFlagClasses, style: this.getFlagStyle() },
+                        {
+                            className: inputFlagClasses,
+                            style: this.getFlagStyle()
+                        },
                         React.createElement('div', { className: arrowClasses })
@@ -612,0 +636,0 @@ )

lib/ReactTelephoneInput.js

@@ -29,3 +29,3 @@ 'use strict';
 var ReactDOM = require('react-dom');
-var onClickOutside = require('react-onclickoutside');
+var onClickOutside = require('react-onclickoutside').default;
 var classNames = require('classnames');
@@ -230,3 +230,2 @@ var countryData = require('country-telephone-data');
             var bestGuess = reduce(this.props.onlyCountries, function (selectedCountry, country) {
-
                 // if the country dialCode exists WITH area code
@@ -411,3 +410,5 @@
         if (this.refs.numberInput.value === '+') {
-            this.setState({ formattedNumber: '+' + this.state.selectedCountry.dialCode });
+            this.setState({
+                formattedNumber: '+' + this.state.selectedCountry.dialCode
+            });
         }
@@ -483,3 +484,5 @@ },
                 if (event.which >= keys.A && event.which <= keys.Z || event.which === keys.SPACE) {
-                    this.setState({ queryString: this.state.queryString + String.fromCharCode(event.which) }, this.state.debouncedQueryStingSearcher);
+                    this.setState({
+                        queryString: this.state.queryString + String.fromCharCode(event.which)
+                    }, this.state.debouncedQueryStingSearcher);
                 }
@@ -505,3 +508,5 @@ }
                 country: true,
-                preferred: findIndex(self.state.preferredCountries, { iso2: country.iso2 }) >= 0,
+                preferred: findIndex(self.state.preferredCountries, {
+                    iso2: country.iso2
+                }) >= 0,
                 highlight: self.state.highlightCountryIndex === index
@@ -521,4 +526,8 @@ });
                     'data-country-code': country.iso2,
-                    onClick: self.handleFlagItemClick.bind(self, country) },
-                React.createElement('div', { className: inputFlagClasses, style: self.getFlagStyle() }),
+                    onClick: self.handleFlagItemClick.bind(self, country)
+                },
+                React.createElement('div', {
+                    className: inputFlagClasses,
+                    style: self.getFlagStyle()
+                }),
                 React.createElement(
@@ -537,3 +546,3 @@ 'span',
 
-        var dashedLi = React.createElement('li', { key: "dashes", className: 'divider' });
+        var dashedLi = React.createElement('li', { key: 'dashes', className: 'divider' });
         // let's insert a dashed line in between preffered countries and the rest
@@ -544,3 +553,3 @@ countryDropDownList.splice(this.state.preferredCountries.length, 0, dashedLi);
             'country-list': true,
-            'hide': !this.state.showDropDown
+            hide: !this.state.showDropDown
         });
@@ -567,4 +576,4 @@ return React.createElement(
         var arrowClasses = classNames({
-            'arrow': true,
-            'up': this.state.showDropDown
+            arrow: true,
+            up: this.state.showDropDown
         });
@@ -588,3 +597,5 @@ var inputClasses = classNames({
             'div',
-            { className: classNames('react-tel-input', this.props.classNames, this.props.className) },
+            {
+                className: classNames('react-tel-input', this.props.classNames, this.props.className)
+            },
             React.createElement('input', _extends({
@@ -604,12 +615,25 @@ onChange: this.handleInput,
                 placeholder: this.props.placeholder,
-                disabled: this.props.disabled }, otherProps)),
+                disabled: this.props.disabled
+            }, otherProps)),
             React.createElement(
                 'div',
-                { ref: 'flagDropDownButton', className: flagViewClasses, onKeyDown: this.handleKeydown },
+                {
+                    ref: 'flagDropDownButton',
+                    className: flagViewClasses,
+                    onKeyDown: this.handleKeydown
+                },
                 React.createElement(
                     'div',
-                    { ref: 'selectedFlag', onClick: this.handleFlagDropdownClick, className: 'selected-flag', title: this.state.selectedCountry.name + ': + ' + this.state.selectedCountry.dialCode },
+                    {
+                        ref: 'selectedFlag',
+                        onClick: this.handleFlagDropdownClick,
+                        className: 'selected-flag',
+                        title: this.state.selectedCountry.name + ': + ' + this.state.selectedCountry.dialCode
+                    },
                     React.createElement(
                         'div',
-                        { className: inputFlagClasses, style: this.getFlagStyle() },
+                        {
+                            className: inputFlagClasses,
+                            style: this.getFlagStyle()
+                        },
                         React.createElement('div', { className: arrowClasses })
@@ -616,0 +640,0 @@ )

package.json

 {
   "name": "react-telephone-input",
-  "version": "4.1.2",
+  "version": "4.2.2",
   "description": "React component for entering and validating international telephone numbers",
@@ -65,3 +65,3 @@ "main": "lib/ReactTelephoneInput.js",
     "prop-types": "^15.5.10",
-    "react-onclickoutside": "5.3.1"
+    "react-onclickoutside": "^6.5.0"
   },
@@ -68,0 +68,0 @@ "peerDependencies": {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75416

increased by1.33%

Lines of code

1993

increased by2.57%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedreact-onclickoutside@6.13.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removedreact-onclickoutside@5.3.1(transitive)

• Updatedreact-onclickoutside@^6.5.0