playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4032 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4073

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7965ad0a31d9d18d905cedd8a804cafc16faa273ada6eb2a62e12e55a2945688
-  data.tar.gz: cb55355040cec1dfb434fde14e62c4f236d32365db8a5f646f82e18d9c6765c8
+  metadata.gz: 6e66c8286d8ecf72cb72ba05016e62b9af7853a17eb794b6f63850def5343fbc
+  data.tar.gz: f4c96694caf2db55ee62b603903ec1fbfa0a3e4b8deb3bf00debf687ddf98d35
 SHA512:
-  metadata.gz: 7004f33f0684cd4774d4560503bbb0f9f8ce78f54da1aa9d98d4de56d6c585bf55326bb0e591628b0fa74ee30cb0ad091c22ab0aea49aaae5ac0c809ffe7762f
-  data.tar.gz: 9fac218509a6e59c22d966df75eb7d5568b7355545cbed9ba821de046c098df5802346ea8ce89f46db66ab2d8c5d0de5b0705493fa6cb5ae6663586c8fd5de84
+  metadata.gz: 4cfebc74a346cb2395a08063f54683f6ba50e4f7818112db223af3bc9d365c4c09d451201d0d0d6a2d0b314f575b819e18b2a343c7aa1d838c779691338fc27a
+  data.tar.gz: c7f938931e124a2063f3a86b1d137f75c7bd55aef89ad8069fbf48b9f07069430091958d8bed3f9694e74f810cc2196f8d49257512e03473556f9ac3f0e4e4f5

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -13,9 +13,20 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   get target() {
     return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
   }
+  
+  static expandedRows = new Set()
+  static isCollapsing = false
 
   connect() {
     this.element.addEventListener('click', () => {
+      if (!PbAdvancedTable.isCollapsing) {
+        const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+        if (!isExpanded) {
+          PbAdvancedTable.expandedRows.add(this.element.id)
+        } else {
+          PbAdvancedTable.expandedRows.delete(this.element.id)
+        }
+      }
       this.toggleElement(this.target)
     })
   }
@@ -75,4 +86,53 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
   }
+
+  static handleToggleAllHeaders(element) {
+    const table = element.closest('.pb_table')
+    const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
+    
+    const expandedRows = Array.from(firstLevelButtons).filter(button => 
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+  
+    if (expandedRows.length === firstLevelButtons.length) {
+      expandedRows.forEach(button => {
+        button.click()
+      })
+      this.expandedRows.clear()
+    } else {
+      firstLevelButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+  static handleToggleAllSubRows(element, rowDepth) {
+    const parentElement = element.closest(".toggle-content")
+    const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
+    
+    const expandedSubRows = Array.from(subrowButtons).filter(button => 
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+  
+    if (expandedSubRows.length === subrowButtons.length) {
+      expandedSubRows.forEach(button => {
+        button.click()
+      })
+    } else {
+      subrowButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+}
+
+window.expandAllRows = (element) => {
+  PbAdvancedTable.handleToggleAllHeaders(element)
 }
+window.expandAllSubRows = (element, rowDepth) => {
+  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
+}

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -13,12 +13,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllRows = (element) => {
-        element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -23,12 +23,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllSubRows = (element, rowDepth) => {
-        element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
+<% end %>

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

@@ -18,6 +18,23 @@ $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;
+  }
+
+  .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;
   }
@@ -45,7 +62,9 @@ $flag-min-resolution: 192dpi;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-right: 10px;
+    .iti__flag {
+      margin-right: 0;
+    }
   }
 
   .iti__selected-country {
@@ -58,7 +77,7 @@ $flag-min-resolution: 192dpi;
     align-items: center;
     border-width: 0;
 
-    padding: 0 $space_xxs 0 $space_sm;
+    padding: 0 $space_xxs 0 $space_xs;
     border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
@@ -88,12 +107,12 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__flag {
-    background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
+    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
     border-radius: 1px;
   }
 
   .iti__flag.iti__globe {
-    background-image: url("https://unpkg.com/intl-tel-input@21.1.4/build/img/globe.png");
+    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
     background-position: center;
     height: 20px;
     background-size: 20px 20px;
@@ -126,7 +145,7 @@ $flag-min-resolution: 192dpi;
     position: relative;
     vertical-align: top;
     width: $space_xxs + 1px;
-    top: $space_xs - 1px;
+    top: $space_xs + 2px;
     transform: rotate($transform-rotate-deg);
     color: $slate;
   }
@@ -230,11 +249,15 @@ $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/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
+      background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
     }
   }
 }

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.