playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4032 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4037

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7965ad0a31d9d18d905cedd8a804cafc16faa273ada6eb2a62e12e55a2945688
-  data.tar.gz: cb55355040cec1dfb434fde14e62c4f236d32365db8a5f646f82e18d9c6765c8
+  metadata.gz: a06ad76a5b0490f9a83f4327fd8a9dd388d2ed6fa1ee83dc72d6ca6a5071ae5c
+  data.tar.gz: 42bfb4eb362d27094685c06ad868c9c5bfb8ebb70960b50df06da156125b9fc1
 SHA512:
-  metadata.gz: 7004f33f0684cd4774d4560503bbb0f9f8ce78f54da1aa9d98d4de56d6c585bf55326bb0e591628b0fa74ee30cb0ad091c22ab0aea49aaae5ac0c809ffe7762f
-  data.tar.gz: 9fac218509a6e59c22d966df75eb7d5568b7355545cbed9ba821de046c098df5802346ea8ce89f46db66ab2d8c5d0de5b0705493fa6cb5ae6663586c8fd5de84
+  metadata.gz: 4bafbfe0895af6e9f6548d7cced94e4c0b341f6a68957d81ea1d47c31ee00fd27b72e90e9028c27a23f6a990dbdc528651aca7e71fd81d0bcd996cc44537adbc
+  data.tar.gz: e632b6fc5da05678aed09cd65a0cc4a6e772e1dcfc5d556546dbd5356644813da9210ac1ab2765bec1f4a38efc9187d7b9a1969cbf9d19ed410004041190dbfb

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -18,6 +18,18 @@ $flag-min-resolution: 192dpi;
     display: none;
   }
 
+  .iti__selected-dial-code {
+    font-family: $font_family_base;
+    font-size: $font_base;
+    line-height: 1.5;
+    letter-spacing: $lspace_normal;
+    font-weight: $regular;
+    font-style: normal;
+    text-rendering: optimizeLegibility;
+    -moz-font-feature-settings: "liga" on;
+    color: $charcoal;
+  }
+
   input::placeholder {
     color: $focus_input_light;
   }
@@ -46,6 +58,9 @@ $flag-min-resolution: 192dpi;
     justify-content: center;
     align-items: center;
     margin-right: 10px;
+    .iti__flag {
+      margin-right: 0;
+    }
   }
 
   .iti__selected-country {
@@ -133,7 +148,7 @@ $flag-min-resolution: 192dpi;
 
   .iti__arrow.iti__arrow--up::before {
     transform: rotate(-($transform-rotate-deg/3));
-    top: $space_xs + 4px;
+    top: $space_xs + 1px;
     color: $primary_action;
   }
 

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -213,16 +213,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(formatAllCountries, [])
 
+  // If an initial country is not specified, the "globe" icon will show
+  // Always set a country
+  const fallbackCountry =
+    preferredCountries.length > 0 ? preferredCountries[0] :
+      onlyCountries.length > 0 ? onlyCountries.sort()[0] :
+        "af";
+
   useEffect(() => {
     const telInputInit = intlTelInput(inputRef.current, {
       separateDialCode: true,
       countryOrder: preferredCountries,
       allowDropdown: !disabled,
       autoInsertDialCode: false,
-      initialCountry,
+      initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
       countrySearch: false,
       fixDropdownWidth: false,
+      formatAsYouType: false,
     })
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md

@@ -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 a section separator within the remaining dropdown.
+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.

data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss

@@ -1,4 +1,6 @@
 /* @import "intl-tel-input/build/css/intlTelInput.css"; */
+// Taken from 18.5.3, but with background-image replaced with PLAY-1527
+// https://unpkg.com/browse/intl-tel-input@18.5.3/build/css/intlTelInput.css
 .iti {
   position: relative;
   display: inline-block;