playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4037 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4077

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a06ad76a5b0490f9a83f4327fd8a9dd388d2ed6fa1ee83dc72d6ca6a5071ae5c
-  data.tar.gz: 42bfb4eb362d27094685c06ad868c9c5bfb8ebb70960b50df06da156125b9fc1
+  metadata.gz: d42f1110a8a20f8551570f0838a04c79c4101cd23e99dcfd4de572eae0311937
+  data.tar.gz: ac930a9c82feef01f65ed6e7a75a99dee87d543953c29a7c95627edb359d6e57
 SHA512:
-  metadata.gz: 4bafbfe0895af6e9f6548d7cced94e4c0b341f6a68957d81ea1d47c31ee00fd27b72e90e9028c27a23f6a990dbdc528651aca7e71fd81d0bcd996cc44537adbc
-  data.tar.gz: e632b6fc5da05678aed09cd65a0cc4a6e772e1dcfc5d556546dbd5356644813da9210ac1ab2765bec1f4a38efc9187d7b9a1969cbf9d19ed410004041190dbfb
+  metadata.gz: 127549a61089ed9a07131d295dd1b2ae709b305f9088fd8ce8020bb4abcf524da905da22d6404d9d458cc271a2f58456559d031554831fe2a3ea8acbaa71133a
+  data.tar.gz: 91e89aaa949bda7c4cd680737dd78d977a88d69af7bebdc5da2f4fd296da84be60746d178e7f9712a3042866c9d21f146fd5f5a1ee3bbc1a47bfb5968bb62851

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_multi_level_select/_multi_level_select.tsx

@@ -202,6 +202,23 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (id) {
+      // Attach the clear function to the window, scoped by the id
+      (window as any)[`clearMultiLevelSelect_${id}`] = () => {
+        const resetData = modifyRecursive(formattedData, false);
+        setFormattedData(resetData);
+        setReturnedArray([]);
+        setDefaultReturn([]);
+        setSingleSelectedItem({ id: [], value: "", item: [] });
+        onSelect([]);
+      };
+      return () => {
+        delete (window as any)[`clearMultiLevelSelect_${id}`];
+      };
+    }
+  }, [formattedData, id, onSelect]);
+
   // Iterate over tree, find item and set checked or unchecked
   const modifyValue = (
     id: string,

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb

@@ -0,0 +1,93 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-reset-example",
+    name: "my_array",
+    tree_data: treeData,
+    return_all_selected: true
+}) %>
+
+<%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
+
+
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
+
+    exampleResetButton.addEventListener("click", () => {
+        clearMultiLevelSelectById('multi-level-select-reset-example');
+      });
+    function clearMultiLevelSelectById(id) {
+      const clearFunction = window[`clearMultiLevelSelect_${id}`];
+      if (clearFunction) {
+        clearFunction();
+      } else {
+        console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
+      }
+    }
+  })
+</script>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md

@@ -0,0 +1 @@
+In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work. 

data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml

@@ -7,6 +7,7 @@ examples:
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
+  - multi_level_select_reset: Reset Selection
 
   react:
   - multi_level_select_default: Default

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

@@ -30,6 +30,11 @@ $flag-min-resolution: 192dpi;
     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;
   }
@@ -57,7 +62,6 @@ $flag-min-resolution: 192dpi;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-right: 10px;
     .iti__flag {
       margin-right: 0;
     }
@@ -73,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"] {
@@ -94,24 +98,21 @@ $flag-min-resolution: 192dpi;
     }
   }
 
-  .iti--allow-dropdown .iti__country-container:hover .iti__selected-country {
-    background-color: $focus_input_light;
-  }
-
   .iti__country-container:hover + .text_input {
     background-color: $focus_input_light;
   }
 
   .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;
+    height: 16px;
+    width: 16px;
+    background-size: 16px 16px;
   }
 
   .iti--show-flags .iti__selected-country {
@@ -141,14 +142,14 @@ $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;
   }
 
   .iti__arrow.iti__arrow--up::before {
     transform: rotate(-($transform-rotate-deg/3));
-    top: $space_xs + 1px;
+    top: $space_xs + 4px;
     color: $primary_action;
   }
 
@@ -245,11 +246,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");
     }
   }
 }