react-simple-phone-input 5.2.1 → 5.2.2

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 (18) hide show
  1. package/dist/cjs/index.css +162 -0
  2. package/dist/cjs/types/Data/country-data.d.ts +5 -5
  3. package/dist/cjs/types/Helpers/country-helper.d.ts +20 -20
  4. package/dist/cjs/types/Helpers/hook.d.ts +2 -2
  5. package/dist/cjs/types/components/PhoneInput/PhoneInput.d.ts +50 -50
  6. package/dist/cjs/types/components/PhoneInput/index.d.ts +1 -1
  7. package/dist/cjs/types/components/index.d.ts +1 -1
  8. package/dist/cjs/types/index.d.ts +1 -1
  9. package/dist/esm/index.css +162 -0
  10. package/dist/esm/types/Data/country-data.d.ts +5 -5
  11. package/dist/esm/types/Helpers/country-helper.d.ts +20 -20
  12. package/dist/esm/types/Helpers/hook.d.ts +2 -2
  13. package/dist/esm/types/components/PhoneInput/PhoneInput.d.ts +50 -50
  14. package/dist/esm/types/components/PhoneInput/index.d.ts +1 -1
  15. package/dist/esm/types/components/index.d.ts +1 -1
  16. package/dist/esm/types/index.d.ts +1 -1
  17. package/dist/index.d.ts +46 -46
  18. package/package.json +3 -3
package/dist/cjs/index.css ADDED
@@ -0,0 +1,162 @@
1
+ .simple-phone-input-sri198-container {
2
+ position: relative;
3
+ }
4
+
5
+ .simple-phone-input-sri198-container:focus,
6
+ .simple-phone-input-sri198-container:focus-visible,
7
+ .simple-phone-input-sri198-container:focus-within {
8
+ outline: none;
9
+ }
10
+
11
+ .simple-phone-input-sri198-main {
12
+ display: flex;
13
+ border: 1px solid rgb(203 203 203);
14
+ user-select: none;
15
+ border-radius: 3px;
16
+ }
17
+
18
+ .simple-phone-input-sri198-dropdown-container {
19
+ cursor: pointer;
20
+ display: flex;
21
+ align-items: center;
22
+ background: rgb(231 231 231);
23
+ border-right: 1px solid rgb(203 203 203);
24
+ }
25
+
26
+ .simple-phone-input-sri198-dropdown-container img {
27
+ margin-right: 6px;
28
+ }
29
+
30
+ .simple-phone-input-sri198-dropdown {
31
+ background: white;
32
+ list-style: none;
33
+ padding: 0;
34
+ margin: 0;
35
+ position: absolute;
36
+ top: 110%;
37
+ left: 0;
38
+ right: 0;
39
+ height: 250px;
40
+ overflow-y: auto;
41
+ box-shadow: 0px 4px 15px rgb(163 163 163);
42
+ border-radius: 3px;
43
+ transition: 0.3s ease;
44
+ transform: translateY(-5px);
45
+ opacity: 0;
46
+ visibility: hidden;
47
+ }
48
+
49
+ .simple-phone-input-sri198-dropdown.active {
50
+ transform: translateY(0px);
51
+ opacity: 1;
52
+ visibility: visible;
53
+ }
54
+
55
+ .simple-phone-input-sri198-dropdown li {
56
+ margin: 3px 0;
57
+ padding: 3px 8px;
58
+ display: flex;
59
+ }
60
+
61
+ .simple-phone-input-sri198-dropdown li.active {
62
+ background: rgba(0, 0, 0, 0.116);
63
+ }
64
+
65
+ .simple-phone-input-sri198-dropdown li:hover {
66
+ background: rgba(0, 0, 0, 0.116);
67
+ }
68
+
69
+ .simple-phone-input-sri198-dropdown li img {
70
+ margin-right: 6px;
71
+ }
72
+
73
+ .simple-phone-input-sri198-dropdown-container-button {
74
+ display: flex;
75
+ flex: 1;
76
+ width: 92px;
77
+ padding: 7px 2px 7px 7px;
78
+ align-items: center;
79
+ }
80
+
81
+ .simple-phone-input-sri198-dropdown-container-button.dial {
82
+ width: unset;
83
+ padding: 8px 3px 8px 8px;
84
+ }
85
+
86
+ .simple-phone-input-sri198-dropdown-text {
87
+ font-size: 15px;
88
+ flex: 1;
89
+ margin-top: 3px;
90
+ }
91
+
92
+ .simple-phone-input-sri198-dropdown-country-code {
93
+ opacity: 0.6;
94
+ margin-top: 3px;
95
+ }
96
+
97
+ .simple-phone-input-sri198-dropdown-icon {
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ }
102
+
103
+ .simple-phone-input-sri198-dropdown-icon svg {
104
+ transition: 0.3s ease;
105
+ }
106
+
107
+ .simple-phone-input-sri198-dropdown-icon.active svg {
108
+ transform: rotate(-180deg)
109
+ }
110
+
111
+ .simple-phone-input-sri198-selected-code {
112
+ flex: 1;
113
+ font-size: 14px;
114
+ margin-top: 2px;
115
+ }
116
+
117
+ .simple-phone-input-sri198-input {
118
+ width: 100%;
119
+ border: none;
120
+ padding: 0 10px;
121
+ }
122
+
123
+ .simple-phone-input-sri198-input:focus {
124
+ outline: none;
125
+ }
126
+
127
+ .simple-phone-input-sri198-search-container {
128
+ padding: 5px;
129
+ position: relative;
130
+ }
131
+
132
+ .simple-phone-input-sri198-search-container input {
133
+ border: 1px solid rgba(0, 0, 0, 0.116);
134
+ padding: 8px 10px;
135
+ width: 100%;
136
+ font-size: 15px;
137
+ border-radius: 2px;
138
+ }
139
+
140
+ .simple-phone-input-sri198-search-icon {
141
+ position: absolute;
142
+ right: 10px;
143
+ top: 50%;
144
+ transform: translateY(-50%);
145
+ display: flex;
146
+ pointer-events: none;
147
+ }
148
+
149
+ .simple-phone-input-sri198-search-icon svg {
150
+ font-size: 20px;
151
+ }
152
+
153
+ .simple-phone-input-sri198-not-found {
154
+ text-align: center;
155
+ margin-top: 10px;
156
+ font-size: 15px;
157
+ color: #f73131;
158
+ }
159
+
160
+ .simple-phone-input-sri198-search-container input:focus {
161
+ outline: none;
162
+ }
package/dist/cjs/types/Data/country-data.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export declare const countryData: {
2
- country: string;
3
- countryCode: string;
4
- callingCode: string;
5
- }[];
1
+ export declare const countryData: {
2
+ country: string;
3
+ countryCode: string;
4
+ callingCode: string;
5
+ }[];
package/dist/cjs/types/Helpers/country-helper.d.ts CHANGED
@@ -1,20 +1,20 @@
1
- export interface CountryDataTypes {
2
- country: string;
3
- countryCode: string;
4
- callingCode: string;
5
- }
6
- export declare const getDefaultCountry: (code: string) => {
7
- country: string;
8
- countryCode: string;
9
- callingCode: string;
10
- } | undefined;
11
- export declare const getBySearch: (search: string, onlyCountry?: string[], excludeCountry?: string[]) => {
12
- country: string;
13
- countryCode: string;
14
- callingCode: string;
15
- }[];
16
- export declare const getCountryByFilter: (onlyCountry: string[], excludeCountry: string[], preferredCountry: string[]) => {
17
- country: string;
18
- countryCode: string;
19
- callingCode: string;
20
- }[];
1
+ export interface CountryDataTypes {
2
+ country: string;
3
+ countryCode: string;
4
+ callingCode: string;
5
+ }
6
+ export declare const getDefaultCountry: (code: string) => {
7
+ country: string;
8
+ countryCode: string;
9
+ callingCode: string;
10
+ } | undefined;
11
+ export declare const getBySearch: (search: string, onlyCountry?: string[], excludeCountry?: string[]) => {
12
+ country: string;
13
+ countryCode: string;
14
+ callingCode: string;
15
+ }[];
16
+ export declare const getCountryByFilter: (onlyCountry: string[], excludeCountry: string[], preferredCountry: string[]) => {
17
+ country: string;
18
+ countryCode: string;
19
+ callingCode: string;
20
+ }[];
package/dist/cjs/types/Helpers/hook.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import React from 'react';
2
- export declare function useOnClickOutside(ref: React.RefObject<HTMLDivElement>, handler: (e: MouseEvent | TouchEvent) => void): void;
1
+ import React from 'react';
2
+ export declare function useOnClickOutside(ref: React.RefObject<HTMLDivElement>, handler: (e: MouseEvent | TouchEvent) => void): void;
package/dist/cjs/types/components/PhoneInput/PhoneInput.d.ts CHANGED
@@ -1,50 +1,50 @@
1
- import React from "react";
2
- import "./PhoneInput.css";
3
- export interface PhoneInputResponseType {
4
- country: string;
5
- code: string;
6
- dialCode: string;
7
- value: string;
8
- valueWithoutPlus: string;
9
- }
10
- interface Props {
11
- placeholder: string;
12
- country: string;
13
- onChange: (e: PhoneInputResponseType) => void;
14
- value?: string;
15
- iconComponent?: React.ReactNode;
16
- inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
17
- onlyCountries?: string[];
18
- excludeCountries?: string[];
19
- preferredCountries?: string[];
20
- showDropdownIcon?: boolean;
21
- dialCodeInputField?: boolean;
22
- disableDropdownOnly?: boolean;
23
- disableInput?: boolean;
24
- search?: boolean;
25
- searchPlaceholder?: string;
26
- showSearchIcon?: boolean;
27
- searchIconComponent?: React.ReactNode;
28
- searchProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
29
- searchNotFound?: string;
30
- containerClass?: string;
31
- buttonClass?: string;
32
- dropdownClass?: string;
33
- dropdownListClass?: string;
34
- dropdownIconClass?: string;
35
- searchContainerClass?: string;
36
- searchInputClass?: string;
37
- searchIconClass?: string;
38
- inputClass?: string;
39
- containerStyle?: React.CSSProperties;
40
- buttonStyle?: React.CSSProperties;
41
- dropdownStyle?: React.CSSProperties;
42
- dropdownListStyle?: React.CSSProperties;
43
- dropdownIconStyle?: React.CSSProperties;
44
- searchContainerStyle?: React.CSSProperties;
45
- searchInputStyle?: React.CSSProperties;
46
- searchIconStyle?: React.CSSProperties;
47
- inputStyle?: React.CSSProperties;
48
- }
49
- declare const PhoneInput: ({ placeholder, country, onChange, value, iconComponent, inputProps, onlyCountries, excludeCountries, preferredCountries, showDropdownIcon, dialCodeInputField, search, disableDropdownOnly, disableInput, searchPlaceholder, showSearchIcon, searchIconComponent, searchProps, searchNotFound, containerClass, buttonClass, dropdownClass, dropdownListClass, dropdownIconClass, searchContainerClass, searchInputClass, searchIconClass, inputClass, containerStyle, buttonStyle, dropdownStyle, dropdownListStyle, dropdownIconStyle, searchContainerStyle, searchInputStyle, searchIconStyle, inputStyle }: Props) => JSX.Element;
50
- export default PhoneInput;
1
+ import React from "react";
2
+ import "./PhoneInput.css";
3
+ export interface PhoneInputResponseType {
4
+ country: string;
5
+ code: string;
6
+ dialCode: string;
7
+ value: string;
8
+ valueWithoutPlus: string;
9
+ }
10
+ interface Props {
11
+ placeholder: string;
12
+ country: string;
13
+ onChange: (e: PhoneInputResponseType) => void;
14
+ value?: string;
15
+ iconComponent?: React.ReactNode;
16
+ inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
17
+ onlyCountries?: string[];
18
+ excludeCountries?: string[];
19
+ preferredCountries?: string[];
20
+ showDropdownIcon?: boolean;
21
+ dialCodeInputField?: boolean;
22
+ disableDropdownOnly?: boolean;
23
+ disableInput?: boolean;
24
+ search?: boolean;
25
+ searchPlaceholder?: string;
26
+ showSearchIcon?: boolean;
27
+ searchIconComponent?: React.ReactNode;
28
+ searchProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
29
+ searchNotFound?: string;
30
+ containerClass?: string;
31
+ buttonClass?: string;
32
+ dropdownClass?: string;
33
+ dropdownListClass?: string;
34
+ dropdownIconClass?: string;
35
+ searchContainerClass?: string;
36
+ searchInputClass?: string;
37
+ searchIconClass?: string;
38
+ inputClass?: string;
39
+ containerStyle?: React.CSSProperties;
40
+ buttonStyle?: React.CSSProperties;
41
+ dropdownStyle?: React.CSSProperties;
42
+ dropdownListStyle?: React.CSSProperties;
43
+ dropdownIconStyle?: React.CSSProperties;
44
+ searchContainerStyle?: React.CSSProperties;
45
+ searchInputStyle?: React.CSSProperties;
46
+ searchIconStyle?: React.CSSProperties;
47
+ inputStyle?: React.CSSProperties;
48
+ }
49
+ declare const PhoneInput: ({ placeholder, country, onChange, value, iconComponent, inputProps, onlyCountries, excludeCountries, preferredCountries, showDropdownIcon, dialCodeInputField, search, disableDropdownOnly, disableInput, searchPlaceholder, showSearchIcon, searchIconComponent, searchProps, searchNotFound, containerClass, buttonClass, dropdownClass, dropdownListClass, dropdownIconClass, searchContainerClass, searchInputClass, searchIconClass, inputClass, containerStyle, buttonStyle, dropdownStyle, dropdownListStyle, dropdownIconStyle, searchContainerStyle, searchInputStyle, searchIconStyle, inputStyle }: Props) => JSX.Element;
50
+ export default PhoneInput;
package/dist/cjs/types/components/PhoneInput/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { default, PhoneInputResponseType } from "./PhoneInput";
1
+ export { default, PhoneInputResponseType } from "./PhoneInput";
package/dist/cjs/types/components/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { default as PhoneInput, PhoneInputResponseType } from "./PhoneInput";
1
+ export { default as PhoneInput, PhoneInputResponseType } from "./PhoneInput";
package/dist/cjs/types/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from "./components";
1
+ export * from "./components";
package/dist/esm/index.css ADDED
@@ -0,0 +1,162 @@
1
+ .simple-phone-input-sri198-container {
2
+ position: relative;
3
+ }
4
+
5
+ .simple-phone-input-sri198-container:focus,
6
+ .simple-phone-input-sri198-container:focus-visible,
7
+ .simple-phone-input-sri198-container:focus-within {
8
+ outline: none;
9
+ }
10
+
11
+ .simple-phone-input-sri198-main {
12
+ display: flex;
13
+ border: 1px solid rgb(203 203 203);
14
+ user-select: none;
15
+ border-radius: 3px;
16
+ }
17
+
18
+ .simple-phone-input-sri198-dropdown-container {
19
+ cursor: pointer;
20
+ display: flex;
21
+ align-items: center;
22
+ background: rgb(231 231 231);
23
+ border-right: 1px solid rgb(203 203 203);
24
+ }
25
+
26
+ .simple-phone-input-sri198-dropdown-container img {
27
+ margin-right: 6px;
28
+ }
29
+
30
+ .simple-phone-input-sri198-dropdown {
31
+ background: white;
32
+ list-style: none;
33
+ padding: 0;
34
+ margin: 0;
35
+ position: absolute;
36
+ top: 110%;
37
+ left: 0;
38
+ right: 0;
39
+ height: 250px;
40
+ overflow-y: auto;
41
+ box-shadow: 0px 4px 15px rgb(163 163 163);
42
+ border-radius: 3px;
43
+ transition: 0.3s ease;
44
+ transform: translateY(-5px);
45
+ opacity: 0;
46
+ visibility: hidden;
47
+ }
48
+
49
+ .simple-phone-input-sri198-dropdown.active {
50
+ transform: translateY(0px);
51
+ opacity: 1;
52
+ visibility: visible;
53
+ }
54
+
55
+ .simple-phone-input-sri198-dropdown li {
56
+ margin: 3px 0;
57
+ padding: 3px 8px;
58
+ display: flex;
59
+ }
60
+
61
+ .simple-phone-input-sri198-dropdown li.active {
62
+ background: rgba(0, 0, 0, 0.116);
63
+ }
64
+
65
+ .simple-phone-input-sri198-dropdown li:hover {
66
+ background: rgba(0, 0, 0, 0.116);
67
+ }
68
+
69
+ .simple-phone-input-sri198-dropdown li img {
70
+ margin-right: 6px;
71
+ }
72
+
73
+ .simple-phone-input-sri198-dropdown-container-button {
74
+ display: flex;
75
+ flex: 1;
76
+ width: 92px;
77
+ padding: 7px 2px 7px 7px;
78
+ align-items: center;
79
+ }
80
+
81
+ .simple-phone-input-sri198-dropdown-container-button.dial {
82
+ width: unset;
83
+ padding: 8px 3px 8px 8px;
84
+ }
85
+
86
+ .simple-phone-input-sri198-dropdown-text {
87
+ font-size: 15px;
88
+ flex: 1;
89
+ margin-top: 3px;
90
+ }
91
+
92
+ .simple-phone-input-sri198-dropdown-country-code {
93
+ opacity: 0.6;
94
+ margin-top: 3px;
95
+ }
96
+
97
+ .simple-phone-input-sri198-dropdown-icon {
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ }
102
+
103
+ .simple-phone-input-sri198-dropdown-icon svg {
104
+ transition: 0.3s ease;
105
+ }
106
+
107
+ .simple-phone-input-sri198-dropdown-icon.active svg {
108
+ transform: rotate(-180deg)
109
+ }
110
+
111
+ .simple-phone-input-sri198-selected-code {
112
+ flex: 1;
113
+ font-size: 14px;
114
+ margin-top: 2px;
115
+ }
116
+
117
+ .simple-phone-input-sri198-input {
118
+ width: 100%;
119
+ border: none;
120
+ padding: 0 10px;
121
+ }
122
+
123
+ .simple-phone-input-sri198-input:focus {
124
+ outline: none;
125
+ }
126
+
127
+ .simple-phone-input-sri198-search-container {
128
+ padding: 5px;
129
+ position: relative;
130
+ }
131
+
132
+ .simple-phone-input-sri198-search-container input {
133
+ border: 1px solid rgba(0, 0, 0, 0.116);
134
+ padding: 8px 10px;
135
+ width: 100%;
136
+ font-size: 15px;
137
+ border-radius: 2px;
138
+ }
139
+
140
+ .simple-phone-input-sri198-search-icon {
141
+ position: absolute;
142
+ right: 10px;
143
+ top: 50%;
144
+ transform: translateY(-50%);
145
+ display: flex;
146
+ pointer-events: none;
147
+ }
148
+
149
+ .simple-phone-input-sri198-search-icon svg {
150
+ font-size: 20px;
151
+ }
152
+
153
+ .simple-phone-input-sri198-not-found {
154
+ text-align: center;
155
+ margin-top: 10px;
156
+ font-size: 15px;
157
+ color: #f73131;
158
+ }
159
+
160
+ .simple-phone-input-sri198-search-container input:focus {
161
+ outline: none;
162
+ }
package/dist/esm/types/Data/country-data.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export declare const countryData: {
2
- country: string;
3
- countryCode: string;
4
- callingCode: string;
5
- }[];
1
+ export declare const countryData: {
2
+ country: string;
3
+ countryCode: string;
4
+ callingCode: string;
5
+ }[];
package/dist/esm/types/Helpers/country-helper.d.ts CHANGED
@@ -1,20 +1,20 @@
1
- export interface CountryDataTypes {
2
- country: string;
3
- countryCode: string;
4
- callingCode: string;
5
- }
6
- export declare const getDefaultCountry: (code: string) => {
7
- country: string;
8
- countryCode: string;
9
- callingCode: string;
10
- } | undefined;
11
- export declare const getBySearch: (search: string, onlyCountry?: string[], excludeCountry?: string[]) => {
12
- country: string;
13
- countryCode: string;
14
- callingCode: string;
15
- }[];
16
- export declare const getCountryByFilter: (onlyCountry: string[], excludeCountry: string[], preferredCountry: string[]) => {
17
- country: string;
18
- countryCode: string;
19
- callingCode: string;
20
- }[];
1
+ export interface CountryDataTypes {
2
+ country: string;
3
+ countryCode: string;
4
+ callingCode: string;
5
+ }
6
+ export declare const getDefaultCountry: (code: string) => {
7
+ country: string;
8
+ countryCode: string;
9
+ callingCode: string;
10
+ } | undefined;
11
+ export declare const getBySearch: (search: string, onlyCountry?: string[], excludeCountry?: string[]) => {
12
+ country: string;
13
+ countryCode: string;
14
+ callingCode: string;
15
+ }[];
16
+ export declare const getCountryByFilter: (onlyCountry: string[], excludeCountry: string[], preferredCountry: string[]) => {
17
+ country: string;
18
+ countryCode: string;
19
+ callingCode: string;
20
+ }[];
package/dist/esm/types/Helpers/hook.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import React from 'react';
2
- export declare function useOnClickOutside(ref: React.RefObject<HTMLDivElement>, handler: (e: MouseEvent | TouchEvent) => void): void;
1
+ import React from 'react';
2
+ export declare function useOnClickOutside(ref: React.RefObject<HTMLDivElement>, handler: (e: MouseEvent | TouchEvent) => void): void;
package/dist/esm/types/components/PhoneInput/PhoneInput.d.ts CHANGED
@@ -1,50 +1,50 @@
1
- import React from "react";
2
- import "./PhoneInput.css";
3
- export interface PhoneInputResponseType {
4
- country: string;
5
- code: string;
6
- dialCode: string;
7
- value: string;
8
- valueWithoutPlus: string;
9
- }
10
- interface Props {
11
- placeholder: string;
12
- country: string;
13
- onChange: (e: PhoneInputResponseType) => void;
14
- value?: string;
15
- iconComponent?: React.ReactNode;
16
- inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
17
- onlyCountries?: string[];
18
- excludeCountries?: string[];
19
- preferredCountries?: string[];
20
- showDropdownIcon?: boolean;
21
- dialCodeInputField?: boolean;
22
- disableDropdownOnly?: boolean;
23
- disableInput?: boolean;
24
- search?: boolean;
25
- searchPlaceholder?: string;
26
- showSearchIcon?: boolean;
27
- searchIconComponent?: React.ReactNode;
28
- searchProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
29
- searchNotFound?: string;
30
- containerClass?: string;
31
- buttonClass?: string;
32
- dropdownClass?: string;
33
- dropdownListClass?: string;
34
- dropdownIconClass?: string;
35
- searchContainerClass?: string;
36
- searchInputClass?: string;
37
- searchIconClass?: string;
38
- inputClass?: string;
39
- containerStyle?: React.CSSProperties;
40
- buttonStyle?: React.CSSProperties;
41
- dropdownStyle?: React.CSSProperties;
42
- dropdownListStyle?: React.CSSProperties;
43
- dropdownIconStyle?: React.CSSProperties;
44
- searchContainerStyle?: React.CSSProperties;
45
- searchInputStyle?: React.CSSProperties;
46
- searchIconStyle?: React.CSSProperties;
47
- inputStyle?: React.CSSProperties;
48
- }
49
- declare const PhoneInput: ({ placeholder, country, onChange, value, iconComponent, inputProps, onlyCountries, excludeCountries, preferredCountries, showDropdownIcon, dialCodeInputField, search, disableDropdownOnly, disableInput, searchPlaceholder, showSearchIcon, searchIconComponent, searchProps, searchNotFound, containerClass, buttonClass, dropdownClass, dropdownListClass, dropdownIconClass, searchContainerClass, searchInputClass, searchIconClass, inputClass, containerStyle, buttonStyle, dropdownStyle, dropdownListStyle, dropdownIconStyle, searchContainerStyle, searchInputStyle, searchIconStyle, inputStyle }: Props) => JSX.Element;
50
- export default PhoneInput;
1
+ import React from "react";
2
+ import "./PhoneInput.css";
3
+ export interface PhoneInputResponseType {
4
+ country: string;
5
+ code: string;
6
+ dialCode: string;
7
+ value: string;
8
+ valueWithoutPlus: string;
9
+ }
10
+ interface Props {
11
+ placeholder: string;
12
+ country: string;
13
+ onChange: (e: PhoneInputResponseType) => void;
14
+ value?: string;
15
+ iconComponent?: React.ReactNode;
16
+ inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
17
+ onlyCountries?: string[];
18
+ excludeCountries?: string[];
19
+ preferredCountries?: string[];
20
+ showDropdownIcon?: boolean;
21
+ dialCodeInputField?: boolean;
22
+ disableDropdownOnly?: boolean;
23
+ disableInput?: boolean;
24
+ search?: boolean;
25
+ searchPlaceholder?: string;
26
+ showSearchIcon?: boolean;
27
+ searchIconComponent?: React.ReactNode;
28
+ searchProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
29
+ searchNotFound?: string;
30
+ containerClass?: string;
31
+ buttonClass?: string;
32
+ dropdownClass?: string;
33
+ dropdownListClass?: string;
34
+ dropdownIconClass?: string;
35
+ searchContainerClass?: string;
36
+ searchInputClass?: string;
37
+ searchIconClass?: string;
38
+ inputClass?: string;
39
+ containerStyle?: React.CSSProperties;
40
+ buttonStyle?: React.CSSProperties;
41
+ dropdownStyle?: React.CSSProperties;
42
+ dropdownListStyle?: React.CSSProperties;
43
+ dropdownIconStyle?: React.CSSProperties;
44
+ searchContainerStyle?: React.CSSProperties;
45
+ searchInputStyle?: React.CSSProperties;
46
+ searchIconStyle?: React.CSSProperties;
47
+ inputStyle?: React.CSSProperties;
48
+ }
49
+ declare const PhoneInput: ({ placeholder, country, onChange, value, iconComponent, inputProps, onlyCountries, excludeCountries, preferredCountries, showDropdownIcon, dialCodeInputField, search, disableDropdownOnly, disableInput, searchPlaceholder, showSearchIcon, searchIconComponent, searchProps, searchNotFound, containerClass, buttonClass, dropdownClass, dropdownListClass, dropdownIconClass, searchContainerClass, searchInputClass, searchIconClass, inputClass, containerStyle, buttonStyle, dropdownStyle, dropdownListStyle, dropdownIconStyle, searchContainerStyle, searchInputStyle, searchIconStyle, inputStyle }: Props) => JSX.Element;
50
+ export default PhoneInput;
package/dist/esm/types/components/PhoneInput/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { default, PhoneInputResponseType } from "./PhoneInput";
1
+ export { default, PhoneInputResponseType } from "./PhoneInput";
package/dist/esm/types/components/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { default as PhoneInput, PhoneInputResponseType } from "./PhoneInput";
1
+ export { default as PhoneInput, PhoneInputResponseType } from "./PhoneInput";
package/dist/esm/types/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from "./components";
1
+ export * from "./components";
package/dist/index.d.ts CHANGED
@@ -1,51 +1,51 @@
1
1
  import React from 'react';
2
2
 
3
- interface PhoneInputResponseType {
4
- country: string;
5
- code: string;
6
- dialCode: string;
7
- value: string;
8
- valueWithoutPlus: string;
9
- }
10
- interface Props {
11
- placeholder: string;
12
- country: string;
13
- onChange: (e: PhoneInputResponseType) => void;
14
- value?: string;
15
- iconComponent?: React.ReactNode;
16
- inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
17
- onlyCountries?: string[];
18
- excludeCountries?: string[];
19
- preferredCountries?: string[];
20
- showDropdownIcon?: boolean;
21
- dialCodeInputField?: boolean;
22
- disableDropdownOnly?: boolean;
23
- disableInput?: boolean;
24
- search?: boolean;
25
- searchPlaceholder?: string;
26
- showSearchIcon?: boolean;
27
- searchIconComponent?: React.ReactNode;
28
- searchProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
29
- searchNotFound?: string;
30
- containerClass?: string;
31
- buttonClass?: string;
32
- dropdownClass?: string;
33
- dropdownListClass?: string;
34
- dropdownIconClass?: string;
35
- searchContainerClass?: string;
36
- searchInputClass?: string;
37
- searchIconClass?: string;
38
- inputClass?: string;
39
- containerStyle?: React.CSSProperties;
40
- buttonStyle?: React.CSSProperties;
41
- dropdownStyle?: React.CSSProperties;
42
- dropdownListStyle?: React.CSSProperties;
43
- dropdownIconStyle?: React.CSSProperties;
44
- searchContainerStyle?: React.CSSProperties;
45
- searchInputStyle?: React.CSSProperties;
46
- searchIconStyle?: React.CSSProperties;
47
- inputStyle?: React.CSSProperties;
48
- }
3
+ interface PhoneInputResponseType {
4
+ country: string;
5
+ code: string;
6
+ dialCode: string;
7
+ value: string;
8
+ valueWithoutPlus: string;
9
+ }
10
+ interface Props {
11
+ placeholder: string;
12
+ country: string;
13
+ onChange: (e: PhoneInputResponseType) => void;
14
+ value?: string;
15
+ iconComponent?: React.ReactNode;
16
+ inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
17
+ onlyCountries?: string[];
18
+ excludeCountries?: string[];
19
+ preferredCountries?: string[];
20
+ showDropdownIcon?: boolean;
21
+ dialCodeInputField?: boolean;
22
+ disableDropdownOnly?: boolean;
23
+ disableInput?: boolean;
24
+ search?: boolean;
25
+ searchPlaceholder?: string;
26
+ showSearchIcon?: boolean;
27
+ searchIconComponent?: React.ReactNode;
28
+ searchProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
29
+ searchNotFound?: string;
30
+ containerClass?: string;
31
+ buttonClass?: string;
32
+ dropdownClass?: string;
33
+ dropdownListClass?: string;
34
+ dropdownIconClass?: string;
35
+ searchContainerClass?: string;
36
+ searchInputClass?: string;
37
+ searchIconClass?: string;
38
+ inputClass?: string;
39
+ containerStyle?: React.CSSProperties;
40
+ buttonStyle?: React.CSSProperties;
41
+ dropdownStyle?: React.CSSProperties;
42
+ dropdownListStyle?: React.CSSProperties;
43
+ dropdownIconStyle?: React.CSSProperties;
44
+ searchContainerStyle?: React.CSSProperties;
45
+ searchInputStyle?: React.CSSProperties;
46
+ searchIconStyle?: React.CSSProperties;
47
+ inputStyle?: React.CSSProperties;
48
+ }
49
49
  declare const PhoneInput: ({ placeholder, country, onChange, value, iconComponent, inputProps, onlyCountries, excludeCountries, preferredCountries, showDropdownIcon, dialCodeInputField, search, disableDropdownOnly, disableInput, searchPlaceholder, showSearchIcon, searchIconComponent, searchProps, searchNotFound, containerClass, buttonClass, dropdownClass, dropdownListClass, dropdownIconClass, searchContainerClass, searchInputClass, searchIconClass, inputClass, containerStyle, buttonStyle, dropdownStyle, dropdownListStyle, dropdownIconStyle, searchContainerStyle, searchInputStyle, searchIconStyle, inputStyle }: Props) => JSX.Element;
50
50
 
51
51
  export { PhoneInput, PhoneInputResponseType };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-simple-phone-input",
3
- "version": "5.2.1",
3
+ "version": "5.2.2",
4
4
  "description": "A simple react phone input component with calling code dropdown🤷",
5
5
  "homepage": "https://react-phone-input.siamahnaf.com",
6
6
  "main": "dist/cjs/index.js",
@@ -41,8 +41,8 @@
41
41
  "url": "https://github.com/siamahnaf/react-simple-phone-input"
42
42
  },
43
43
  "peerDependencies": {
44
- "react": "^18.2.0",
45
- "react-dom": "^18.2.0"
44
+ "react": "^18.2.0 || ^19.0.0 || ^19.0.0-rc",
45
+ "react-dom": "^18.2.0 || ^19.0.0 || ^19.0.0-rc"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@rollup/plugin-commonjs": "^23.0.4",