playbook_ui 14.19.0.pre.alpha.borderfixadvancedtable7816 → 14.19.0.pre.alpha.play1997dropdownenablepillsinselection7702

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

@@ -9,128 +9,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return ADVANCED_TABLE_SELECTOR;
   }
 
-  // Track selections per table
-  static tableData = new Map();
-
-  // Get or initialize data for a specific table
-  static getTableData(tableId) {
-    if (!PbAdvancedTable.tableData.has(tableId)) {
-      PbAdvancedTable.tableData.set(tableId, {
-        selectedRows: new Set(),
-        expandedRows: new Set(),
-        initialized: false
-      });
-    }
-    return PbAdvancedTable.tableData.get(tableId);
-  }
-
-  // Get the table container from any element within the table
-  getTableContainer() {
-    return this.element.closest(".pb_advanced_table");
-  }
-
-  // Get table ID, create one if needed
-  getTableId() {
-    const tableContainer = this.getTableContainer();
-    if (!tableContainer) return null;
-
-    // Generate ID if none exists
-    if (!tableContainer.id) {
-      tableContainer.id = `table-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
-    }
-
-    return tableContainer.id;
-  }
-
-  // Update the data attribute with selected rows
   updateTableSelectedRowsAttribute() {
-    const tableContainer = this.getTableContainer();
-    const tableId = this.getTableId();
-    if (!tableId) return;
-
-    const tableData = PbAdvancedTable.getTableData(tableId);
-    const selectedRowsArray = Array.from(tableData.selectedRows);
-
-    // Update data attribute
-    tableContainer.dataset.selectedRows = JSON.stringify(selectedRowsArray);
-
-    // Update action bar visibility
-    this.updateActionBarVisibility(tableContainer, tableData.selectedRows);
-  }
-
-  // Update action bar visibility based on selection state
-  updateActionBarVisibility(tableContainer, selectedRows) {
-    if (!tableContainer) return;
-
-    const actionBar = tableContainer.querySelector(".row-selection-actions-card");
-    if (!actionBar) return;
-
-    const selectedCount = selectedRows.size;
-
-    // Update count display
-    const countElement = actionBar.querySelector(".selected-count");
-    if (countElement) {
-      countElement.textContent = `${selectedCount} Selected`;
-    }
-
-    // Show/hide based on selection
-    if (selectedCount > 0) {
-      this.showActionBar(actionBar);
-    } else {
-      this.hideActionBar(actionBar);
-    }
-  }
-
-  // Show action bar with animation
-  showActionBar(actionBar) {
-    if (!actionBar) return;
-
-    // Force display block
-    actionBar.style.display = "block";
-
-    // Get the height before animation
-    const height = actionBar.scrollHeight + "px";
-
-    // Force all style changes directly
-    actionBar.style.height = height;
-    actionBar.classList.add("is-visible");
-    actionBar.classList.add("show-action-card");
-    actionBar.classList.replace("p_none", "p_xs");
-    // This is for keeping the border around the card when showing the action bar
-    actionBar.classList.replace("pb_card_kit_deselected_border_none", "pb_card_kit_deselected");
-    actionBar.style.overflow = "hidden";
-
-    // Complete animation after delay
-    window.setTimeout(() => {
-      if (actionBar.classList.contains("is-visible")) {
-        actionBar.style.height = "";
-        actionBar.style.overflow = "visible";
-      }
-    }, 300);
-  }
-
-  // Hide action bar with animation
-  hideActionBar(actionBar) {
-    if (!actionBar) return;
-
-    // Set exact height before animation
-    actionBar.style.height = actionBar.scrollHeight + "px";
-    actionBar.offsetHeight; // Trigger reflow
-
-    // Animate to height 0
-    window.setTimeout(() => {
-      actionBar.style.height = "0";
-      actionBar.style.overflow = "hidden";
-    }, 10);
-
-    // Remove visibility classes after animation
-    window.setTimeout(() => {
-      actionBar.classList.remove("is-visible");
-      actionBar.classList.remove("show-action-card");
-      actionBar.classList.replace("p_xs", "p_none");
-      // This is for removing the border when hiding the action bar
-      actionBar.classList.replace( "pb_card_kit_deselected", "pb_card_kit_deselected_border_none");
-    }, 300);
+    const mainTable = this.element.closest(".pb_advanced_table");
+    mainTable.dataset.selectedRows = JSON.stringify(Array.from(PbAdvancedTable.selectedRows));
   }
 
   // Check if the row is expanded or collapsed
@@ -141,7 +22,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return closeIcon?.style.display === "none" || !closeIcon;
   }
 
-  // Update parent checkboxes based on child selections
   updateParentCheckboxes(checkbox) {
     const rowEl = checkbox.closest("tr");
     if (!rowEl) return;
@@ -149,11 +29,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     const table = rowEl.closest("table");
     if (!table) return;
 
-    const tableId = this.getTableId();
-    if (!tableId) return;
-
-    const tableData = PbAdvancedTable.getTableData(tableId);
-
     const contentTrail = rowEl.dataset.advancedTableContent;
     if (!contentTrail) return;
 
@@ -196,15 +71,15 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
       const parentCheckboxId = parentCheckbox.id;
       if (allChildrenChecked) {
-        tableData.selectedRows.add(parentCheckboxId);
+        PbAdvancedTable.selectedRows.add(parentCheckboxId);
         parentRow.classList.add("bg-row-selection");
         parentRow.classList.remove("bg-white", "bg-silver");
       } else {
-        tableData.selectedRows.delete(parentCheckboxId);
+        PbAdvancedTable.selectedRows.delete(parentCheckboxId);
       }
       if (!allChildrenChecked) {
         parentRow.classList.remove("bg-row-selection");
-
+  
         if (this.isRowExpanded(parentRow)) {
           parentRow.classList.remove("bg-silver");
           parentRow.classList.add("bg-white");
@@ -216,24 +91,18 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     });
   }
 
-  // Handle row checkbox click
   handleCheckboxClick(event) {
     const checkbox = event.currentTarget;
     const rowId = checkbox.id;
     const isChecked = checkbox.checked;
     const rowEl = checkbox.closest("tr");
 
-    const tableId = this.getTableId();
-    if (!tableId) return;
-
-    const tableData = PbAdvancedTable.getTableData(tableId);
-
     if (isChecked) {
-      tableData.selectedRows.add(rowId);
+      PbAdvancedTable.selectedRows.add(rowId);
       rowEl.classList.add("bg-row-selection");
       rowEl.classList.remove("bg-white", "bg-silver");
     } else {
-      tableData.selectedRows.delete(rowId);
+      PbAdvancedTable.selectedRows.delete(rowId);
     }
      // Update background color on row
     if (!isChecked) {
@@ -247,7 +116,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         rowEl.classList.add("bg-silver");
       }
     }
-
     if (rowEl) {
       const table = rowEl.closest("table");
       const rowContent = rowEl.dataset.advancedTableContent;
@@ -269,11 +137,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
           const childRowId = childCheckbox.id;
           const childRowEl = childCheckbox.closest("tr");
           if (isChecked) {
-            tableData.selectedRows.add(childRowId);
+            PbAdvancedTable.selectedRows.add(childRowId);
             childRowEl?.classList.add("bg-row-selection");
             childRowEl?.classList.remove("bg-white", "bg-silver");
           } else {
-            tableData.selectedRows.delete(childRowId);
+            PbAdvancedTable.selectedRows.delete(childRowId);
           }
           if (!isChecked) {
             childRowEl?.classList.remove("bg-row-selection");
@@ -315,124 +183,43 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`);
   }
 
+  static expandedRows = new Set();
+  static selectedRows = new Set();
   static isCollapsing = false;
 
   connect() {
-    // Get table container and generate ID if needed
-    const tableContainer = this.getTableContainer();
-    if (!tableContainer) return;
-
-    const tableId = this.getTableId();
-    if (!tableId) return;
-
-    // Get or initialize table data
-    const tableData = PbAdvancedTable.getTableData(tableId);
-
-    // Handle toggle click
     this.element.addEventListener("click", () => {
       if (!PbAdvancedTable.isCollapsing) {
         const isExpanded =
           this.element.querySelector(UP_ARROW_SELECTOR).style.display ===
           "inline-block";
         if (!isExpanded) {
-          tableData.expandedRows.add(this.element.id);
+          PbAdvancedTable.expandedRows.add(this.element.id);
         } else {
-          tableData.expandedRows.delete(this.element.id);
+          PbAdvancedTable.expandedRows.delete(this.element.id);
         }
-        this.toggleElement(this.target, tableData.expandedRows);
+        this.toggleElement(this.target);
       }
     });
-
+  
     this.hideCloseIcon();
-
+  
     const table = this.element.closest("table");
-    if (!table) return;
-
-    // Skip if this table is already initialized
-    if (tableData.initialized) return;
-
-    // Initialize the action bar
-    const actionBar = tableContainer.querySelector(".row-selection-actions-card");
-    if (actionBar) {
-      // Direct style application
-      Object.assign(actionBar.style, {
-        height: '0px',
-        overflow: 'hidden',
-        display: 'block',
-        opacity: '0'
-      });
-
-      // Remove visibility classes
-      actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-      actionBar.classList.add("p_none");
-
-      // Add CSS rules
-      const styleId = `action-bar-styles-${tableId}`;
-      let styleTag = document.getElementById(styleId);
-      if (!styleTag) {
-        styleTag = document.createElement('style');
-        styleTag.id = styleId;
-        document.head.appendChild(styleTag);
-      }
-
-      styleTag.textContent = `
-        #${tableId} .row-selection-actions-card.is-visible.show-action-card {
-          height: auto !important;
-          overflow: visible !important;
-          display: block !important;
-          opacity: 1 !important;
-          transition: height 0.3s ease, opacity 0.3s ease !important;
-        }
-      `;
-
-      // Direct DOM event listeners for checkboxes
-      const checkboxes = table.querySelectorAll('input[type="checkbox"]');
-      checkboxes.forEach(checkbox => {
-        checkbox.addEventListener('change', function() {
-          // Count selected checkboxes
-          const selectedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
-
-          if (selectedCount > 0) {
-            // Show action bar directly
-            actionBar.style.height = 'auto';
-            actionBar.style.overflow = 'visible';
-            actionBar.style.opacity = '1';
-            actionBar.classList.remove("p_none");
-            actionBar.classList.add("p_xs", "is-visible", "show-action-card");
-
-            // Update the count
-            const countElement = actionBar.querySelector(".selected-count");
-            if (countElement) {
-              countElement.textContent = `${selectedCount} Selected`;
-            }
-          } else {
-            // Hide action bar directly
-            actionBar.style.height = '0px';
-            actionBar.style.overflow = 'hidden';
-            actionBar.style.opacity = '0';
-            actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-            actionBar.classList.add("p_none");
-          }
-        });
-      });
-    }
-
-    // Bind checkbox change handlers
+  
+    // Prevent duplicate initialization
+    if (table.dataset.pbAdvancedTableInitialized) return;
+    table.dataset.pbAdvancedTableInitialized = "true";
+  
+    // Bind checkbox change handlers for all row checkboxes
     const checkboxLabels = table.querySelectorAll("label[data-row-id]");
     checkboxLabels.forEach((label) => {
       const checkbox = label.querySelector("input[type='checkbox']");
       if (!checkbox) return;
-
-      // Remove any existing event listeners
-      const newCheckbox = checkbox.cloneNode(true);
-      checkbox.parentNode.replaceChild(newCheckbox, checkbox);
-
-      // Add our event listener
-      newCheckbox.addEventListener("change", (event) => {
+      checkbox.addEventListener("change", (event) => {
         this.handleCheckboxClick(event);
       });
     });
-
+  
     // Bind nested row expansion logic
     const nestedButtons = table.querySelectorAll("[data-advanced-table]");
     nestedButtons.forEach((button) => {
@@ -440,61 +227,54 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         const isExpanded =
           button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block";
         if (isExpanded) {
-          tableData.expandedRows.add(button.id);
+          PbAdvancedTable.expandedRows.add(button.id);
         } else {
-          tableData.expandedRows.delete(button.id);
+          PbAdvancedTable.expandedRows.delete(button.id);
         }
       });
     });
-
-    // Bind select-all logic
+  
+    // Bind select-all logic for this table
     const selectAllCheckbox = table.querySelector("#select-all-rows");
     if (selectAllCheckbox) {
-      // Remove any existing event listeners
-      const newSelectAllCheckbox = selectAllCheckbox.cloneNode(true);
-      selectAllCheckbox.parentNode.replaceChild(newSelectAllCheckbox, selectAllCheckbox);
-
-      // Add our event listener
-      newSelectAllCheckbox.addEventListener("change", () => {
-        const checkboxInput = newSelectAllCheckbox.querySelector('input[type="checkbox"]');
+      selectAllCheckbox.addEventListener("change", () => {
+        const checkboxInput = selectAllCheckbox.querySelector('input[type="checkbox"]');
         const checkAll = checkboxInput.checked;
-
+  
         const checkboxes = Array.from(
           table.querySelectorAll("label[data-row-id] input[type='checkbox']")
         );
-
+  
         checkboxes.forEach((cb) => {
           cb.checked = checkAll;
           const rowId = cb.id;
           const rowEl = cb.closest("tr");
 
           if (checkAll) {
-            tableData.selectedRows.add(rowId);
+            PbAdvancedTable.selectedRows.add(rowId);
             rowEl?.classList.add("bg-row-selection");
             rowEl?.classList.remove("bg-white", "bg-silver");
           } else {
-            tableData.selectedRows.delete(rowId);
+            PbAdvancedTable.selectedRows.delete(rowId);
             rowEl?.classList.remove("bg-row-selection");
             rowEl?.classList.add("bg-white");
           }
         });
-
+  
         checkboxes.forEach((cb) => this.updateParentCheckboxes(cb));
-
+  
         this.updateTableSelectedRowsAttribute();
       });
     }
-
-    // Mark table as initialized
-    tableData.initialized = true;
   }
+  
 
   hideCloseIcon() {
     const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
     closeIcon.style.display = "none";
   }
 
-  showElement(elements, expandedRows) {
+  showElement(elements) {
     elements.forEach((elem) => {
       elem.style.display = "table-row";
       elem.classList.add("is-visible");
@@ -517,7 +297,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
           (id) => `${childRow.id}_${id}`
         );
         const allAncestorsExpanded = prefixedAncestorIds.every((id) =>
-          expandedRows.has(id)
+          PbAdvancedTable.expandedRows.has(id)
         );
 
         const checkIfParentIsExpanded = () => {
@@ -526,7 +306,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
             const isParentVisible =
               childRow.previousElementSibling.classList.contains("is-visible");
             if (parentRowId) {
-              const isInSet = expandedRows.has(parentRowId);
+              const isInSet = PbAdvancedTable.expandedRows.has(parentRowId);
               if (isInSet && isParentVisible) {
                 return true;
               }
@@ -546,14 +326,14 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     });
   }
 
-  hideElement(elements, expandedRows) {
+  hideElement(elements) {
     elements.forEach((elem) => {
       elem.style.display = "none";
       elem.classList.remove("is-visible");
 
       // Remove the row ID from expandedRows when this row is hidden
-      if (expandedRows.has(elem.id)) {
-        expandedRows.delete(elem.id);
+      if (PbAdvancedTable.expandedRows.has(elem.id)) {
+        PbAdvancedTable.expandedRows.delete(elem.id);
       }
 
       const childrenArray = elem.dataset.advancedTableContent.split("-");
@@ -574,12 +354,12 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     });
   }
 
-  toggleElement(elements, expandedRows) {
+  toggleElement(elements) {
     if (!elements.length) return;
 
     const isVisible = elements[0].classList.contains("is-visible");
 
-    isVisible ? this.hideElement(elements, expandedRows) : this.showElement(elements, expandedRows);
+    isVisible ? this.hideElement(elements) : this.showElement(elements);
     isVisible ? this.displayDownArrow() : this.displayUpArrow();
 
     const row = this.element.closest("tr");
@@ -602,12 +382,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   static handleToggleAllHeaders(element) {
-    // Get table ID
-    const tableContainer = element.closest(".pb_advanced_table");
-    if (!tableContainer || !tableContainer.id) return;
-
-    const tableData = PbAdvancedTable.getTableData(tableContainer.id);
-
     const table = element.closest(".pb_table");
     const firstLevelButtons = table.querySelectorAll(
       ".pb_advanced_table_body > .pb_table_tr[data-row-depth='0'] [data-advanced-table]"
@@ -621,17 +395,17 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (allExpanded) {
       firstLevelButtons.forEach((button) => {
         button.click();
-        tableData.expandedRows.delete(button.id);
+        PbAdvancedTable.expandedRows.delete(button.id);
       });
     } else {
       firstLevelButtons.forEach((button) => {
-        if (!tableData.expandedRows.has(button.id)) {
+        if (!PbAdvancedTable.expandedRows.has(button.id)) {
           button.click();
-          tableData.expandedRows.add(button.id);
+          PbAdvancedTable.expandedRows.add(button.id);
         }
       });
 
-      tableData.expandedRows.forEach((rowId) => {
+      PbAdvancedTable.expandedRows.forEach((rowId) => {
         const nestedButton = table.querySelector(
           `[data-advanced-table][id="${rowId}"]`
         );
@@ -643,12 +417,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   static handleToggleAllSubRows(element, rowDepth) {
-    // Get table ID
-    const tableContainer = element.closest(".pb_advanced_table");
-    if (!tableContainer || !tableContainer.id) return;
-
-    const tableData = PbAdvancedTable.getTableData(tableContainer.id);
-
     const table = element.closest(".pb_table");
     const parentRow = element.closest("tr");
     if (!parentRow) {
@@ -668,90 +436,19 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (allExpanded) {
       subRowButtons.forEach((button) => {
         button.click();
-        tableData.expandedRows.delete(button.id);
+        PbAdvancedTable.expandedRows.delete(button.id);
       });
     } else {
       subRowButtons.forEach((button) => {
-        if (!tableData.expandedRows.has(button.id)) {
+        if (!PbAdvancedTable.expandedRows.has(button.id)) {
           button.click();
-          tableData.expandedRows.add(button.id);
+          PbAdvancedTable.expandedRows.add(button.id);
         }
       });
     }
   }
 }
 
-// Initialize on page load
-document.addEventListener('DOMContentLoaded', () => {
-  const advancedTables = document.querySelectorAll('.pb_advanced_table');
-
-  // Initialize each table and its action bar
-  advancedTables.forEach(table => {
-    // Generate ID if needed
-    if (!table.id) {
-      table.id = `table-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
-    }
-
-    // Initialize table data
-    PbAdvancedTable.getTableData(table.id);
-
-    // Initialize action bar
-    const actionBar = table.querySelector('.row-selection-actions-card');
-    if (actionBar) {
-      // Direct styling override
-      Object.assign(actionBar.style, {
-        height: '0px',
-        overflow: 'hidden',
-        display: 'block',
-        opacity: '0'
-      });
-
-      // Remove any visibility classes
-      actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-      actionBar.classList.add("p_none");
-
-      // Direct DOM manipulation for checkboxes - exclude select-all checkbox
-      const checkboxes = table.querySelectorAll('input[type="checkbox"]');
-      checkboxes.forEach(checkbox => {
-        checkbox.addEventListener('change', function() {
-          // Get all checked checkboxes
-          const allCheckedCheckboxes = Array.from(checkboxes).filter(cb => cb.checked);
-
-          // Filter out the select-all checkbox
-          const selectedRowCheckboxes = allCheckedCheckboxes.filter(cb => {
-            return cb.id !== 'select-all-rows' && !cb.closest('#select-all-rows');
-          });
-
-          // Get the selected count (excluding select-all)
-          const selectedCount = selectedRowCheckboxes.length;
-
-          if (selectedCount > 0) {
-            // Show action bar directly
-            actionBar.style.height = 'auto';
-            actionBar.style.overflow = 'visible';
-            actionBar.style.opacity = '1';
-            actionBar.classList.remove("p_none");
-            actionBar.classList.add("p_xs", "is-visible", "show-action-card");
-
-            // Update the count
-            const countElement = actionBar.querySelector(".selected-count");
-            if (countElement) {
-              countElement.textContent = `${selectedCount} Selected`;
-            }
-          } else {
-            // Hide action bar directly
-            actionBar.style.height = '0px';
-            actionBar.style.overflow = 'hidden';
-            actionBar.style.opacity = '0';
-            actionBar.classList.add("p_none");
-            actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-          }
-        });
-      });
-    }
-  });
-});
-
 window.expandAllRows = (element) => {
   PbAdvancedTable.handleToggleAllHeaders(element);
 };

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -77,7 +77,6 @@
     top: 0;
     left: 0;
     border-radius: unset;
-    z-index: 5;
   }
 
   .checkbox-cell {

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -15,8 +15,6 @@ module Playbook
                         default: "scroll"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
-      prop :show_actions_bar, type: Playbook::Props::Boolean,
-                              default: true
 
       def classname
         additional_classes = []
@@ -29,7 +27,6 @@ module Playbook
       def th_classname(is_first_column: false)
         additional_classes = []
         additional_classes << "pinned-left" if is_first_column && responsive == "scroll" && !selectable_rows
-        additional_classes << "header-cells-with-actions" if selectable_rows && show_actions_bar
 
         generate_classname("table-header-cells", *additional_classes, separator: " ")
       end
@@ -49,7 +46,6 @@ module Playbook
         if selectable_rows
           additional_classes = []
           additional_classes << "table-header-cells-custom"
-          additional_classes << "header-cells-with-actions" if show_actions_bar
           additional_classes << "checkbox-cell-header"
           additional_classes << "pinned-left" if responsive == "scroll"
           pb_rails("table/table_header", props: {

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -6,7 +6,7 @@ import {
   buildDataProps,
   buildHtmlProps
 } from "../../utilities/props";
-import { globalProps, GlobalProps } from "../../utilities/globalProps";
+import { globalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
@@ -24,7 +24,7 @@ type DropdownContainerProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   searchbar?: boolean;
-} & GlobalProps;
+};
 
 const DropdownContainer = (props: DropdownContainerProps) => {
   const {