playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY2127dropdowncloseonselectionpropreact8006

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

@@ -0,0 +1,106 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const FLAT_ADVANCED_TABLE_SELECTOR = "[data-flat-advanced-table-select]";
+
+export default class PbFlatAdvancedTable extends PbEnhancedElement {
+  static get selector() {
+    return FLAT_ADVANCED_TABLE_SELECTOR;
+  }
+
+  get target() {
+    const table = this.element.closest("table");
+    return table.querySelectorAll(
+      `"label[data-flat-advanced-table-select='true']"`
+    );
+  }
+
+  static selectedRows = new Set();
+
+  connect() {
+    const table = this.element.closest("table");
+    if (!table) return;
+    const mainTable = this.element.closest(".pb_advanced_table");
+    // Prevent double-init
+    if (table.dataset.flatAdvancedTableInitialized) return;
+    table.dataset.flatAdvancedTableInitialized = "true";
+
+    const checkboxLabels = table.querySelectorAll(
+      "label[data-flat-advanced-table-select='true']"
+    );
+    checkboxLabels.forEach((label) => {
+      const checkbox = label.querySelector("input[type='checkbox']");
+      if (!checkbox) return;
+      checkbox.addEventListener("change", () => {
+        const rowId = checkbox.id;
+        const isChecked = checkbox.checked;
+      
+        if (isChecked) {
+          PbFlatAdvancedTable.selectedRows.add(rowId);
+        } else {
+          PbFlatAdvancedTable.selectedRows.delete(rowId);
+        }
+      
+        // Update row background color based on checkbox state
+        const rowEl = checkbox.closest("tr");
+        if (rowEl) {
+          if (isChecked) {
+            rowEl.classList.add("bg-row-selection");
+            rowEl.classList.remove("bg-white");
+          } else {
+            rowEl.classList.remove("bg-row-selection");
+            rowEl.classList.add("bg-white");
+          }
+        }
+        const allCheckboxes = table.querySelectorAll(
+          "label[data-flat-advanced-table-select='true'] input[type='checkbox']"
+        );
+      
+        const selectAllInput = table.querySelector(
+          "#select-all-rows input[type='checkbox']"
+        );
+      
+        if (selectAllInput) {
+          const allChecked = Array.from(allCheckboxes).every(cb => cb.checked);
+          selectAllInput.checked = allChecked;
+        }
+      
+        mainTable.dataset.selectedRows = JSON.stringify(
+          Array.from(PbFlatAdvancedTable.selectedRows)
+        );
+      });
+      
+    });
+
+    // Handle select-all checkbox
+    const selectAllWrapper = table.querySelector("#select-all-rows");
+    if (selectAllWrapper) {
+      const selectAllInput = selectAllWrapper.querySelector(
+        'input[type="checkbox"]'
+      );
+      selectAllInput.addEventListener("change", () => {
+        const checkAll = selectAllInput.checked;
+
+        checkboxLabels.forEach((label) => {
+          const cb = label.querySelector("input[type='checkbox']");
+          cb.checked = checkAll;
+          const rowId = cb.id;
+          const rowEl = cb.closest("tr");
+
+          if (checkAll) {
+            PbFlatAdvancedTable.selectedRows.add(rowId);
+            rowEl?.classList.add("bg-row-selection");
+            rowEl?.classList.remove("bg-white");
+          } else {
+            PbFlatAdvancedTable.selectedRows.delete(rowId);
+            rowEl?.classList.remove("bg-row-selection");
+            rowEl?.classList.add("bg-white");
+          }
+        });
+
+        mainTable.dataset.selectedRows = JSON.stringify(
+          Array.from(PbFlatAdvancedTable.selectedRows)
+        );
+      });
+    }
+  }
+}

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

@@ -9,12 +9,182 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return ADVANCED_TABLE_SELECTOR;
   }
 
+  updateTableSelectedRowsAttribute() {
+    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
+  // This is used to determine the background color of the row
+  // when the checkbox is checked or unchecked
+  isRowExpanded(rowEl) {
+    const closeIcon = rowEl.querySelector(UP_ARROW_SELECTOR);
+    return closeIcon?.style.display === "none" || !closeIcon;
+  }
+
+  updateParentCheckboxes(checkbox) {
+    const rowEl = checkbox.closest("tr");
+    if (!rowEl) return;
+
+    const table = rowEl.closest("table");
+    if (!table) return;
+
+    const contentTrail = rowEl.dataset.advancedTableContent;
+    if (!contentTrail) return;
+
+    const ancestorIds = contentTrail.split("-").slice(0, -1);
+
+    ancestorIds.reverse();
+    ancestorIds.forEach((ancestorId) => {
+      const parentRowSelector = `[data-advanced-table-content$="${ancestorId}"]`;
+      const parentRow = table.querySelector(parentRowSelector);
+      if (!parentRow) return;
+
+      const parentLabel = parentRow.querySelector("label[data-row-id]");
+      if (!parentLabel) return;
+
+      const parentCheckbox = parentLabel.querySelector(
+        "input[type='checkbox']"
+      );
+      if (!parentCheckbox) return;
+
+      // Find all immediate children of parent linked to ancestor Id, filter our subrow headers
+      const children = Array.from(
+        table.querySelectorAll(`tr[data-row-parent$="_${ancestorId}"]`)
+      ).filter((child) => {
+        const content = child.dataset.advancedTableContent;
+        return !(content && content.endsWith("sr"));
+      });
+
+      const allChildrenChecked = Array.from(children).every((child) => {
+        const childLabel = child.querySelector("label[data-row-id]");
+        if (!childLabel) return false;
+        const childCheckbox = childLabel.querySelector(
+          "input[type='checkbox']"
+        );
+        if (!childCheckbox) return false;
+        return childCheckbox.checked;
+      });
+
+      // Update parent checkbox
+      parentCheckbox.checked = allChildrenChecked;
+
+      const parentCheckboxId = parentCheckbox.id;
+      if (allChildrenChecked) {
+        PbAdvancedTable.selectedRows.add(parentCheckboxId);
+        parentRow.classList.add("bg-row-selection");
+        parentRow.classList.remove("bg-white", "bg-silver");
+      } else {
+        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");
+        } else {
+          parentRow.classList.remove("bg-white");
+          parentRow.classList.add("bg-silver");
+        }
+      }
+    });
+  }
+
+  handleCheckboxClick(event) {
+    const checkbox = event.currentTarget;
+    const rowId = checkbox.id;
+    const isChecked = checkbox.checked;
+    const rowEl = checkbox.closest("tr");
+
+    if (isChecked) {
+      PbAdvancedTable.selectedRows.add(rowId);
+      rowEl.classList.add("bg-row-selection");
+      rowEl.classList.remove("bg-white", "bg-silver");
+    } else {
+      PbAdvancedTable.selectedRows.delete(rowId);
+    }
+     // Update background color on row
+    if (!isChecked) {
+      rowEl.classList.remove("bg-row-selection");
+
+      if (this.isRowExpanded(rowEl)) {
+        rowEl.classList.remove("bg-silver");
+        rowEl.classList.add("bg-white");
+      } else {
+        rowEl.classList.remove("bg-white");
+        rowEl.classList.add("bg-silver");
+      }
+    }
+    if (rowEl) {
+      const table = rowEl.closest("table");
+      const rowContent = rowEl.dataset.advancedTableContent;
+
+      if (rowContent) {
+        const childRows = table.querySelectorAll(
+          `[data-advanced-table-content^="${rowContent}-"]`
+        );
+
+        childRows.forEach((childRow) => {
+          const label = childRow.querySelector("label[data-row-id]");
+          if (!label) return;
+
+          const childCheckbox = label.querySelector("input[type='checkbox']");
+          if (!childCheckbox) return;
+
+          childCheckbox.checked = isChecked;
+
+          const childRowId = childCheckbox.id;
+          const childRowEl = childCheckbox.closest("tr");
+          if (isChecked) {
+            PbAdvancedTable.selectedRows.add(childRowId);
+            childRowEl?.classList.add("bg-row-selection");
+            childRowEl?.classList.remove("bg-white", "bg-silver");
+          } else {
+            PbAdvancedTable.selectedRows.delete(childRowId);
+          }
+          if (!isChecked) {
+            childRowEl?.classList.remove("bg-row-selection");
+
+            if (this.isRowExpanded(childRowEl)) {
+              childRowEl?.classList.remove("bg-silver");
+              childRowEl?.classList.add("bg-white");
+            } else {
+              childRowEl?.classList.remove("bg-white");
+              childRowEl?.classList.add("bg-silver");
+            }
+          }
+        });
+      }
+    }
+
+    this.updateParentCheckboxes(checkbox);
+
+    this.updateTableSelectedRowsAttribute();
+
+    const table = checkbox.closest("table");
+    const selectAllCheckbox = table.querySelector("#select-all-rows");
+
+    if (selectAllCheckbox) {
+      const allCheckboxes = table.querySelectorAll(
+        "label[data-row-id] input[type='checkbox']"
+      );
+      const allChecked = Array.from(allCheckboxes).every((cb) => cb.checked);
+
+      const selectAllInput = selectAllCheckbox.querySelector(
+        'input[type="checkbox"]'
+      );
+      selectAllInput.checked = allChecked;
+    }
+  }
+
   get target() {
     const table = this.element.closest("table");
     return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`);
   }
 
   static expandedRows = new Set();
+  static selectedRows = new Set();
   static isCollapsing = false;
 
   connect() {
@@ -31,17 +201,31 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.toggleElement(this.target);
       }
     });
-    
-    this.hideCloseIcon()
 
-    const nestedButtons = this.element
-      .closest("table")
-      .querySelectorAll("[data-advanced-table]");
+    this.hideCloseIcon();
+
+    const table = this.element.closest("table");
+
+    // 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;
+      checkbox.addEventListener("change", (event) => {
+        this.handleCheckboxClick(event);
+      });
+    });
+
+    // Bind nested row expansion logic
+    const nestedButtons = table.querySelectorAll("[data-advanced-table]");
     nestedButtons.forEach((button) => {
       button.addEventListener("click", () => {
         const isExpanded =
-          button.querySelector(UP_ARROW_SELECTOR).style.display ===
-          "inline-block";
+          button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block";
         if (isExpanded) {
           PbAdvancedTable.expandedRows.add(button.id);
         } else {
@@ -49,12 +233,46 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         }
       });
     });
+
+    // Bind select-all logic for this table
+    const selectAllCheckbox = table.querySelector("#select-all-rows");
+    if (selectAllCheckbox) {
+      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) {
+            PbAdvancedTable.selectedRows.add(rowId);
+            rowEl?.classList.add("bg-row-selection");
+            rowEl?.classList.remove("bg-white", "bg-silver");
+          } else {
+            PbAdvancedTable.selectedRows.delete(rowId);
+            rowEl?.classList.remove("bg-row-selection");
+            rowEl?.classList.add("bg-white");
+          }
+        });
+
+        checkboxes.forEach((cb) => this.updateParentCheckboxes(cb));
+
+        this.updateTableSelectedRowsAttribute();
+      });
+    }
   }
 
+
   hideCloseIcon() {
     const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
     closeIcon.style.display = "none";
-}
+  }
 
   showElement(elements) {
     elements.forEach((elem) => {
@@ -151,7 +369,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     }
   }
 
-
   displayDownArrow() {
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
       "inline-block";
@@ -232,10 +449,153 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 }
 
+// Isolate action bar functionality so it doesn't mix with existing functionality
+class PbAdvancedTableActionBar {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    // Initialize action bars for all advanced tables with action bars
+    document.addEventListener('DOMContentLoaded', () => {
+      this.setupActionBars();
+    });
+
+    // Also run immediately in case DOM is already loaded
+    if (document.readyState === 'loading') {
+      // DOM is still loading
+    } else {
+      // DOM is already loaded
+      this.setupActionBars();
+    }
+  }
+
+  setupActionBars() {
+    const advancedTables = document.querySelectorAll('.pb_advanced_table');
+
+    advancedTables.forEach(table => {
+      // Only proceed if this table has both selectable rows AND an action bar
+      if (!this.shouldEnableActionBar(table)) return;
+
+      const actionBar = table.querySelector('.row-selection-actions-card');
+      if (!actionBar) return; // Skip tables without action bars
+
+      // Initialize action bar styles
+      this.initializeActionBar(actionBar);
+
+      // Set up checkbox listeners for this table
+      this.setupCheckboxListeners(table, actionBar);
+    });
+  }
+
+  shouldEnableActionBar(table) {
+    // Check if the table has selectable rows
+    const hasSelectableRows = table.querySelector('input[type="checkbox"]') !== null;
+
+    // Check if the table has a row selection action bar (not other types of action bars)
+    const hasRowSelectionActionBar = table.querySelector('.row-selection-actions-card') !== null;
+
+    // Additional check: look for the presence of row checkboxes with data-row-id
+    const hasRowCheckboxes = table.querySelector('label[data-row-id] input[type="checkbox"]') !== null;
+
+    // Only enable if ALL conditions are met:
+    // 1. Has selectable checkboxes
+    // 2. Has the specific row selection action bar
+    // 3. Has row checkboxes (not just other types of checkboxes)
+    return hasSelectableRows && hasRowSelectionActionBar && hasRowCheckboxes;
+  }
+
+  initializeActionBar(actionBar) {
+    // Set initial hidden state
+    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");
+  }
+
+  setupCheckboxListeners(table, actionBar) {
+    // Only listen to row checkboxes (those with data-row-id), not all checkboxes
+    const rowCheckboxes = table.querySelectorAll('label[data-row-id] input[type="checkbox"]');
+
+    rowCheckboxes.forEach(checkbox => {
+      checkbox.addEventListener('change', () => {
+        // Use setTimeout to ensure this runs after the main checkbox logic
+        setTimeout(() => {
+          this.updateActionBarVisibility(table, actionBar);
+        }, 0);
+      });
+    });
+
+    // Special handling for select-all checkbox (only if it exists)
+    const selectAllCheckbox = table.querySelector("#select-all-rows");
+    if (selectAllCheckbox) {
+      const selectAllInput = selectAllCheckbox.querySelector('input[type="checkbox"]');
+      if (selectAllInput) {
+        selectAllInput.addEventListener('change', () => {
+          // Use setTimeout to ensure this runs after the main select-all logic
+          setTimeout(() => {
+            this.updateActionBarVisibility(table, actionBar);
+          }, 10); // Slightly longer delay for select-all to ensure all row checkboxes are updated
+        });
+      }
+    }
+  }
+
+  updateActionBarVisibility(table, actionBar) {
+    // Only count row checkboxes (those with data-row-id), not all checkboxes
+    const rowCheckboxes = table.querySelectorAll('label[data-row-id] input[type="checkbox"]');
+
+    // Get all checked row checkboxes
+    const selectedRowCheckboxes = Array.from(rowCheckboxes).filter(cb => cb.checked);
+
+    // Get the selected count
+    const selectedCount = selectedRowCheckboxes.length;
+
+    if (selectedCount > 0) {
+      this.showActionBar(actionBar, selectedCount);
+    } else {
+      this.hideActionBar(actionBar);
+    }
+  }
+
+  showActionBar(actionBar, selectedCount) {
+    // 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`;
+    }
+  }
+
+  hideActionBar(actionBar) {
+    // 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");
+  }
+}
+
+// Initialize the isolated action bar functionality
+new PbAdvancedTableActionBar();
+
 window.expandAllRows = (element) => {
   PbAdvancedTable.handleToggleAllHeaders(element);
 };
 
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
-};
+};

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

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

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

@@ -0,0 +1,23 @@
+<%= pb_rails("card", props: {
+  border_none: object.is_visible,
+  classname: object.classname,
+  padding: object.is_visible ? "xs" : "none",
+  data: {
+    action_bar: true
+  }
+}) do %>
+  <%= pb_rails("flex", props: { align_items: "center", justify: "between" }) do %>
+    <%= pb_rails("caption", props: { color: "light", padding_left: "xs", size: "xs" }) do %>
+      <span class="selected-count"><%= object.selected_count %> Selected</span>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("flex") do %>
+        <% if object.actions.present? %>
+          <% object.actions.each do |action| %>
+            <%= action %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAdvancedTable
+    class TableActionBar < Playbook::KitBase
+      prop :actions, type: Playbook::Props::Array,
+                     default: []
+      prop :is_visible, type: Playbook::Props::Boolean,
+                        default: false
+      prop :selected_count, type: Playbook::Props::Number,
+                            default: 0
+
+      def classname
+        # Just use row-selection-actions-card as the base class
+        generate_classname("row-selection-actions-card", separator: " ")
+      end
+    end
+  end
+end

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

@@ -55,7 +55,15 @@ module Playbook
         # Subrow header if applicable
         output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
-        current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
+        current_data_attributes = if current_depth.zero?
+                                    {
+                                      row_depth: 0,
+                                      advanced_table_content: row.object_id.to_s,
+                                      row_parent: nil,
+                                    }
+                                  else
+                                    table_data_attributes
+                                  end
 
         # Additional class and data attributes needed for toggle logic
         output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })

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

@@ -15,6 +15,8 @@ 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 = []
@@ -27,6 +29,7 @@ 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
@@ -46,6 +49,7 @@ 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: {
@@ -54,9 +58,6 @@ module Playbook
             pb_rails("checkbox", props: {
                        id: "select-all-rows",
                        name: "select-all-rows",
-                       data: {
-                         action: "click->pb-advanced-table#toggleAllRowSelection",
-                       },
                      })
           end
         end

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

@@ -60,7 +60,7 @@ module Playbook
                        name: "select-row-#{row_id || row.object_id}",
                        data: {
                          row_id: row_id || row.object_id.to_s,
-                         action: "click->pb-advanced-table#toggleRowSelection",
+                         flat_advanced_table_select: true,
                        },
                      })
           end
@@ -75,7 +75,6 @@ module Playbook
                      name: "select-row-#{row_id || row.object_id}",
                      data: {
                        row_id: row_id || row.object_id.to_s,
-                       action: "click->pb-advanced-table#toggleRowSelection",
                      },
                    })
         end

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -82,6 +82,10 @@ $avatar-sizes: (
           object-fit: cover;
           display: block;
         }
+
+        .grayscale {
+          filter: grayscale(1);
+        }
       }
     }
   }