playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4028 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4037

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f4c94c493daf726dc039b1e497273b1e399c416834b47f90f5f1de5adfdfcd3
-  data.tar.gz: db7bf747a4cec3dda4fe95fe8957a0a062a23de1cd60b52b76657c4763233bab
+  metadata.gz: a06ad76a5b0490f9a83f4327fd8a9dd388d2ed6fa1ee83dc72d6ca6a5071ae5c
+  data.tar.gz: 42bfb4eb362d27094685c06ad868c9c5bfb8ebb70960b50df06da156125b9fc1
 SHA512:
-  metadata.gz: 6e92e7dddd11a4e60ca9a98ab50cfb53d5e08f86a2d0a485b4a84bbfd1159d80dcc4dad718d1d115ae377f24e239c77e90588a00134d985cff50958c217e8a23
-  data.tar.gz: d314e1f5b3e4bb8eed249e0229a89e3415b2f1fd93a510818870ade9521b0995789623ea33b200caf2bc1eb0c39a597c6804dccbd49c6683ba50a0cb6cdf86cc
+  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

@@ -1,8 +1,7 @@
 import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
 import classnames from 'classnames'
 
-import intlTelInput from 'intl-tel-input/intlTelInputWithUtils'
-import 'intl-tel-input/build/js/utils.js'
+import intlTelInput from 'intl-tel-input/build/js/intlTelInputWithUtils.js'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -214,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;

data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts

@@ -1 +1,4 @@
-declare module 'intl-tel-input'
+declare module 'intl-tel-input/build/js/intlTelInputWithUtils.js' {
+    const intlTelInput: any;
+    export default intlTelInput;
+}