playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4162 → 14.5.0.pre.alpha.PLAY1601updatereactzoompanpinch4123

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f54238916554d7fc5db336d5fd9f600012d2d3451b1232364a9a6f70276f6241
-  data.tar.gz: 2081782f7da94b64103e5a4beeb61a34c3fd1d3c9e4d99979388d4042ec5edae
+  metadata.gz: 3eef39be443e3cd1b5d31fbf6c45383f7efbcdd3f41194ba4a977c21700bd862
+  data.tar.gz: 47fb682efcfea59eb34f2fcdcb3f15e52a254ee12d7c9974d18fbe2a411ca6b0
 SHA512:
-  metadata.gz: c6fffc6c90ba549db56e62d9db74f412ad6d86a52b6ff9dfd1329c33a385226086d547cdbc046555c908cb408c2d262c33b541c63d4e3193bc961bed58475c72
-  data.tar.gz: 2e8ffc641e46dd560aeb456042d3f437a152e4341836f2d5ffdf87872264663076c1d0d4f6d8e30ebe80f346aca768764cbb5d57b4280137a63a9b182d5ca019
+  metadata.gz: 80c6b66534b581c9c5bf5494928b003eeac846f2346fd9a7a394361abe00fdcfe616f8772df66edbbf8a9cb01f9bfddd6c23ac81ff19df22bd96de4fb5e71de9
+  data.tar.gz: 2698718348044f92ad1589b367d5c51d36a7c371f717855b9da6b4b45caab620291ffa0253c98090dd1b731709286498a6a9c274b1ced957f0d76b5b76a7f1d4

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

@@ -6,35 +6,6 @@ $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
 
 .pb_phone_number_input {
-  .iti {
-    width: 100%;
-  }
-
-  .iti__flag {
-    margin-right: 6px;
-  }
-
-  .iti__a11y-text {
-    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;
-  }
-
-  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
-  .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 {
-    background-color: transparent;
-  }
-
   input::placeholder {
     color: $focus_input_light;
   }
@@ -44,7 +15,7 @@ $flag-min-resolution: 192dpi;
       border-color: $primary !important;
     }
 
-    .iti__selected-country:focus-visible {
+    .iti__selected-flag:focus-visible {
       outline-style: none;
     }
   }
@@ -58,25 +29,8 @@ $flag-min-resolution: 192dpi;
     border-bottom: 1px solid $border_light !important;  
   }
 
-  .iti__selected-country-primary {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .iti__flag {
-      margin-right: 0;
-    }
-  }
-
-  .iti__selected-country {
-    position: absolute;
-    top: 0;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    border-width: 0;
-
-    padding: 0 $space_xxs 0 $space_xs;
+  .iti__selected-flag {
+    padding: 0 $space_xxs 0 $space_sm;
     border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
@@ -97,24 +51,24 @@ $flag-min-resolution: 192dpi;
     }
   }
 
-  .iti__country-container:hover + .text_input {
+  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
+    background-color: $focus_input_light;
+  }
+
+  .iti__flag-container:hover + .text_input {
     background-color: $focus_input_light;
   }
 
   .iti__flag {
-    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
+    background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
     border-radius: 1px;
   }
 
-  .iti__flag.iti__globe {
-    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
-    background-position: center;
-    height: 16px;
-    width: 16px;
-    background-size: 16px 16px;
+  .iti--separate-dial-code {
+    width: 100%;
   }
 
-  .iti--show-flags .iti__selected-country {
+  .iti--separate-dial-code .iti__selected-flag {
     background-color: rgba($white, $opacity_1);
   }
 
@@ -182,12 +136,10 @@ $flag-min-resolution: 192dpi;
   .iti__dropdown-content {
     border-radius: $space_xs; 
     border: 1px solid $border_light !important;
-    position: absolute;
-    top: 100%;
   }
 
   &.dark {
-    .iti--allow-dropdown .iti__country-container {
+    .iti--allow-dropdown .iti__flag-container {
       background-color: rgba($white, 0);
 
       &:hover {
@@ -197,13 +149,13 @@ $flag-min-resolution: 192dpi;
           background-color: rgba($white, 0.15);
         }
 
-        .iti__selected-country {
+        .iti__selected-flag {
           background-color: rgba($white, 0);
         }
       }
     }
 
-    .iti__selected-country {
+    .iti__selected-flag {
       background-color: rgba($white, 0);
       color: $white;
     }
@@ -244,27 +196,11 @@ $flag-min-resolution: 192dpi;
         background-color: rgba($white, 0.025) !important;
       }
     }
-
-    .iti__selected-dial-code {
-      color: $white;
-    }
   }
-  
+
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
-      background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
+      background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
     }
   }
 }
-
-// Rails Phone Number Input padding placement of placeholders
-// is off in a Dialog because it doesn't account for
-// padding: 0 $space_xxs 0 $space_xs;
-// Set to 0 so the placeholder doesn't overlap with selected country
-.pb_dialog {
-  .pb_phone_number_input_rails {
-    .iti__selected-country {
-      padding: 0;
-    }
-  }
-}

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

@@ -1,7 +1,8 @@
 import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
 import classnames from 'classnames'
 
-import intlTelInput from 'intl-tel-input/build/js/intlTelInputWithUtils.js'
+import intlTelInput from 'intl-tel-input'
+import 'intl-tel-input/build/js/utils.js'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -49,7 +50,7 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  const countryData = intlTelInput.getCountryData()
+  const countryData = window.intlTelInputGlobals.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
     const country = countryData[i]
@@ -213,24 +214,14 @@ 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,
+      preferredCountries,
       allowDropdown: !disabled,
       autoInsertDialCode: false,
-      initialCountry: initialCountry || fallbackCountry,
-      onlyCountries,
-      countrySearch: false,
-      fixDropdownWidth: false,
-      formatAsYouType: false,
+      initialCountry,
+      onlyCountries
     })
 
     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 in 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 a section separator within the remaining dropdown.