playbook_ui 14.5.0.pre.alpha.PBNTR600reactfilterdisplayzeroresults4068 → 14.5.0.pre.alpha.PBNTR606multilevelselectreset4035

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1315703b951ec18c52f143275d8fcce5219cd6cab284b284be92584ffe64adb5
-  data.tar.gz: a8ec02f07ec4a6e857e855b712f659c539410232cb4d8515ae99566e3c1d39f3
+  metadata.gz: 0ac1d308be087420aa261bc98d4426758ede289c17ce212986640dfe2a91ead9
+  data.tar.gz: 69012507d1a2108c08b12bc1033f6b80256ed4d760e75942ecfb63935192ba14
 SHA512:
-  metadata.gz: 947391921569c72c01d30a6819ab580140bea82df5bc6f83a8e3426ea1561a07e6178574a8c3df62c820818eb98f792aa7eb0cab223ec837f420f44ec1adb29e
-  data.tar.gz: c33a5d61b41a9fb8c57538234484a37e3bc08c8dbc161f727ec8fa9ba5fcbc0f1e9615bb4c53f844561c89e1ce03a4d64064a6d9e00fb54ba72138dadfc507d8
+  metadata.gz: 11e1d28af538f892e85fe0712d407bd952974007fe9694226517dd483fdc262eb09df2ee1dd44b47a7df396806f660102ed211dfbed50da82852aee526c3c0fe
+  data.tar.gz: 990e9168c014f6e06108e5fec5c6efe98349282fd80440b74696b784c82b2fd49c05330e93c7ab8b4e2377bb7d148b42c386aa157fddbeac43712d61b1250ce8

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

@@ -13,20 +13,9 @@ 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)
     })
   }
@@ -86,53 +75,4 @@ 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,4 +13,12 @@
                 <% end %>
             <% 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>

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

@@ -23,4 +23,12 @@
                 <% end %>
             <% 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>

data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx

@@ -13,7 +13,6 @@ type ResultsCountProps = {
 const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
   
   const resultTitle = () => {
-    if (results == null) return null
     return (
       <TitleCount
           align="center"
@@ -25,7 +24,6 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const justResults = () => {
-    if (results == null) return null
     return (
       <Caption
           className="filter-results"
@@ -37,13 +35,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const displayResultsCount = () => {
-    if (results != null && results >=0 && title) {
+    if (results && title) {
       return (
         <>
           {resultTitle()}
         </>
       )
-    } else if (results !=null && results >=0 ) {
+    } else if (results) {
       return (
         <>
           {justResults()}

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
           double
           minWidth="375px"
           onSortChange={SortingChangeCallback}
-          results={0}
+          results={1}
           sortOptions={{
             popularity: 'Popularity',
             // eslint-disable-next-line

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/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