playbook_ui 14.6.0.pre.rc.23 → 14.6.0.pre.rc.25
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +86 -18
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +15 -6
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +849 -931
- data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +4 -1
- data/dist/chunks/{_typeahead-BhLGfuVc.js → _typeahead-BhHnXJjy.js} +1 -1
- data/dist/chunks/{_weekday_stacked-Cu6ay-kh.js → _weekday_stacked-C_QAqbqJ.js} +2 -2
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 79c3d768db416077cd76758ab38a58104a9c4205f3795912e2606df79621876a
|
|
4
|
+
data.tar.gz: dc47c116d50f6909234ffb96f685ff97937c4a81f64fef319ea7cb253e1e7a4a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 59505b4c7ed6f0046ff5c71c0e027c1a31933825b87208098f621979f3c43bd65ca53c3254074c5fcda40a8905227f5047197591697256ca61c4011f3cdb0cef
|
|
7
|
+
data.tar.gz: adad11b6672fe93043b7a759abb5153ab65274bd654fa23fbbfa9282e9b19493fbd4d28b889cd0f74b41dfd94f4ed248b2b2dc7b43a352cfc7b113095515a906
|
|
@@ -5,7 +5,54 @@ $transform-rotate-deg: 135deg;
|
|
|
5
5
|
$dropdown-min-width: 340px;
|
|
6
6
|
$flag-min-resolution: 192dpi;
|
|
7
7
|
|
|
8
|
+
:root {
|
|
9
|
+
--iti-arrow-padding: #{$space_xs};
|
|
10
|
+
--iti-spacer-horizontal: #{$space_sm};
|
|
11
|
+
--iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
|
|
12
|
+
--iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
|
|
13
|
+
--iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
|
|
14
|
+
--iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
|
|
15
|
+
}
|
|
16
|
+
|
|
8
17
|
.pb_phone_number_input {
|
|
18
|
+
.iti {
|
|
19
|
+
width: 100%;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.iti__flag {
|
|
23
|
+
margin-right: 6px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.iti__a11y-text {
|
|
27
|
+
display: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.iti__selected-dial-code {
|
|
31
|
+
font-family: $font_family_base;
|
|
32
|
+
font-size: $font_base;
|
|
33
|
+
line-height: 1.5;
|
|
34
|
+
letter-spacing: $lspace_normal;
|
|
35
|
+
font-weight: $regular;
|
|
36
|
+
font-style: normal;
|
|
37
|
+
text-rendering: optimizeLegibility;
|
|
38
|
+
-moz-font-feature-settings: "liga" on;
|
|
39
|
+
color: $charcoal;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// iti-spacer-horizontal's default is 8px, or $space_xs
|
|
43
|
+
.iti__country-list .iti__flag, .iti__country-name {
|
|
44
|
+
margin-right: $space_xs;
|
|
45
|
+
}
|
|
46
|
+
[dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
|
|
47
|
+
margin-right: 0;
|
|
48
|
+
margin-left: $space_xs;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
|
|
52
|
+
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
|
|
53
|
+
background-color: transparent;
|
|
54
|
+
}
|
|
55
|
+
|
|
9
56
|
input::placeholder {
|
|
10
57
|
color: $focus_input_light;
|
|
11
58
|
}
|
|
@@ -15,13 +62,13 @@ $flag-min-resolution: 192dpi;
|
|
|
15
62
|
border-color: $primary !important;
|
|
16
63
|
}
|
|
17
64
|
|
|
18
|
-
.iti__selected-
|
|
65
|
+
.iti__selected-country:focus-visible {
|
|
19
66
|
outline-style: none;
|
|
20
67
|
}
|
|
21
68
|
}
|
|
22
69
|
|
|
23
70
|
.iti__country {
|
|
24
|
-
padding: 5px
|
|
71
|
+
padding: 5px $space_xs 5px $space_sm;
|
|
25
72
|
transition: $transition_default;
|
|
26
73
|
}
|
|
27
74
|
|
|
@@ -29,8 +76,23 @@ $flag-min-resolution: 192dpi;
|
|
|
29
76
|
border-bottom: 1px solid $border_light !important;
|
|
30
77
|
}
|
|
31
78
|
|
|
32
|
-
.iti__selected-
|
|
33
|
-
|
|
79
|
+
.iti__selected-country-primary {
|
|
80
|
+
display: flex;
|
|
81
|
+
justify-content: center;
|
|
82
|
+
align-items: center;
|
|
83
|
+
.iti__flag {
|
|
84
|
+
margin-right: 0;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.iti__selected-country {
|
|
89
|
+
position: absolute;
|
|
90
|
+
top: 0;
|
|
91
|
+
display: flex;
|
|
92
|
+
height: 100%;
|
|
93
|
+
justify-content: center;
|
|
94
|
+
align-items: center;
|
|
95
|
+
border-width: 0;
|
|
34
96
|
border-radius: $space_xxs;
|
|
35
97
|
|
|
36
98
|
&[aria-expanded="true"] {
|
|
@@ -51,24 +113,24 @@ $flag-min-resolution: 192dpi;
|
|
|
51
113
|
}
|
|
52
114
|
}
|
|
53
115
|
|
|
54
|
-
.
|
|
55
|
-
background-color: $focus_input_light;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.iti__flag-container:hover + .text_input {
|
|
116
|
+
.iti__country-container:hover + .text_input {
|
|
59
117
|
background-color: $focus_input_light;
|
|
60
118
|
}
|
|
61
119
|
|
|
62
120
|
.iti__flag {
|
|
63
|
-
background-image: url("https://unpkg.com/
|
|
121
|
+
background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
|
|
64
122
|
border-radius: 1px;
|
|
65
123
|
}
|
|
66
124
|
|
|
67
|
-
.
|
|
68
|
-
|
|
125
|
+
.iti__flag.iti__globe {
|
|
126
|
+
background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
|
|
127
|
+
background-position: center;
|
|
128
|
+
height: 16px;
|
|
129
|
+
width: 16px;
|
|
130
|
+
background-size: 16px 16px;
|
|
69
131
|
}
|
|
70
132
|
|
|
71
|
-
.iti--
|
|
133
|
+
.iti--show-flags .iti__selected-country {
|
|
72
134
|
background-color: rgba($white, $opacity_1);
|
|
73
135
|
}
|
|
74
136
|
|
|
@@ -136,10 +198,12 @@ $flag-min-resolution: 192dpi;
|
|
|
136
198
|
.iti__dropdown-content {
|
|
137
199
|
border-radius: $space_xs;
|
|
138
200
|
border: 1px solid $border_light !important;
|
|
201
|
+
position: absolute;
|
|
202
|
+
top: 100%;
|
|
139
203
|
}
|
|
140
204
|
|
|
141
205
|
&.dark {
|
|
142
|
-
.iti--allow-dropdown .
|
|
206
|
+
.iti--allow-dropdown .iti__country-container {
|
|
143
207
|
background-color: rgba($white, 0);
|
|
144
208
|
|
|
145
209
|
&:hover {
|
|
@@ -149,13 +213,13 @@ $flag-min-resolution: 192dpi;
|
|
|
149
213
|
background-color: rgba($white, 0.15);
|
|
150
214
|
}
|
|
151
215
|
|
|
152
|
-
.iti__selected-
|
|
216
|
+
.iti__selected-country {
|
|
153
217
|
background-color: rgba($white, 0);
|
|
154
218
|
}
|
|
155
219
|
}
|
|
156
220
|
}
|
|
157
221
|
|
|
158
|
-
.iti__selected-
|
|
222
|
+
.iti__selected-country {
|
|
159
223
|
background-color: rgba($white, 0);
|
|
160
224
|
color: $white;
|
|
161
225
|
}
|
|
@@ -196,11 +260,15 @@ $flag-min-resolution: 192dpi;
|
|
|
196
260
|
background-color: rgba($white, 0.025) !important;
|
|
197
261
|
}
|
|
198
262
|
}
|
|
199
|
-
}
|
|
200
263
|
|
|
264
|
+
.iti__selected-dial-code {
|
|
265
|
+
color: $white;
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
|
|
201
269
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
|
|
202
270
|
.iti__flag {
|
|
203
|
-
background-image: url("https://unpkg.com/
|
|
271
|
+
background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
|
|
204
272
|
}
|
|
205
273
|
}
|
|
206
274
|
}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
|
3
3
|
|
|
4
|
-
import intlTelInput from 'intl-tel-input'
|
|
5
|
-
import 'intl-tel-input/build/js/utils.js'
|
|
4
|
+
import intlTelInput from 'intl-tel-input/build/js/intlTelInputWithUtils.js'
|
|
6
5
|
|
|
7
6
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
|
8
7
|
import { globalProps } from '../utilities/globalProps'
|
|
@@ -50,7 +49,7 @@ const formatToGlobalCountryName = (countryName: string) => {
|
|
|
50
49
|
}
|
|
51
50
|
|
|
52
51
|
const formatAllCountries = () => {
|
|
53
|
-
const countryData =
|
|
52
|
+
const countryData = intlTelInput.getCountryData()
|
|
54
53
|
|
|
55
54
|
for (let i = 0; i < countryData.length; i++) {
|
|
56
55
|
const country = countryData[i]
|
|
@@ -214,14 +213,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
|
|
|
214
213
|
// This also Fixes things for our react_component rendering on the Rails Side
|
|
215
214
|
useEffect(formatAllCountries, [])
|
|
216
215
|
|
|
216
|
+
// If an initial country is not specified, the "globe" icon will show
|
|
217
|
+
// Always set a country
|
|
218
|
+
const fallbackCountry =
|
|
219
|
+
preferredCountries.length > 0 ? preferredCountries[0] :
|
|
220
|
+
onlyCountries.length > 0 ? onlyCountries.sort()[0] :
|
|
221
|
+
"af";
|
|
222
|
+
|
|
217
223
|
useEffect(() => {
|
|
218
224
|
const telInputInit = intlTelInput(inputRef.current, {
|
|
219
225
|
separateDialCode: true,
|
|
220
|
-
preferredCountries,
|
|
226
|
+
countryOrder: preferredCountries,
|
|
221
227
|
allowDropdown: !disabled,
|
|
222
228
|
autoInsertDialCode: false,
|
|
223
|
-
initialCountry,
|
|
224
|
-
onlyCountries
|
|
229
|
+
initialCountry: initialCountry || fallbackCountry,
|
|
230
|
+
onlyCountries,
|
|
231
|
+
countrySearch: false,
|
|
232
|
+
fixDropdownWidth: false,
|
|
233
|
+
formatAsYouType: false,
|
|
225
234
|
})
|
|
226
235
|
|
|
227
236
|
inputRef.current.addEventListener("countrychange", (evt: Event) => {
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below
|
|
1
|
+
Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below in the remaining dropdown.
|