playbook_ui 14.19.0 → 14.20.0.pre.alpha.PLAY2127dropdowncloseonselectionpropreact8006

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

@@ -79,7 +79,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       }
       if (!allChildrenChecked) {
         parentRow.classList.remove("bg-row-selection");
-  
+
         if (this.isRowExpanded(parentRow)) {
           parentRow.classList.remove("bg-silver");
           parentRow.classList.add("bg-white");
@@ -201,15 +201,15 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.toggleElement(this.target);
       }
     });
-  
+
     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) => {
@@ -219,7 +219,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.handleCheckboxClick(event);
       });
     });
-  
+
     // Bind nested row expansion logic
     const nestedButtons = table.querySelectorAll("[data-advanced-table]");
     nestedButtons.forEach((button) => {
@@ -233,18 +233,18 @@ 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;
@@ -260,14 +260,14 @@ export default class PbAdvancedTable extends PbEnhancedElement {
             rowEl?.classList.add("bg-white");
           }
         });
-  
+
         checkboxes.forEach((cb) => this.updateParentCheckboxes(cb));
-  
+
         this.updateTableSelectedRowsAttribute();
       });
     }
   }
-  
+
 
   hideCloseIcon() {
     const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
@@ -449,6 +449,149 @@ 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);
 };

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_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: {

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,16 +1,9 @@
 <%= pb_content_tag(:label) do %>
   <%= content.presence || object.input %>
-  <% if object.indeterminate %>
-    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
-      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
-      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
-    </span>
-  <% else %>
-    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
-      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
-      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
-    </span>
-  <% end %>
+  <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
+    <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
+    <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
+  </span>
   <span class="pb_checkbox_label">
     <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
   </span>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -5,7 +5,8 @@ module Playbook
     class Checkbox < Playbook::KitBase
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate, type: Playbook::Props::Boolean, default: false
+      prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
+      prop :indeterminate_parent
       prop :text
       prop :value
       prop :name
@@ -19,7 +20,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
+        generate_classname("pb_checkbox_kit", checked_class) + error_class
       end
 
       def input
@@ -30,6 +31,13 @@ module Playbook
         error ? "negative" : nil
       end
 
+      def data
+        Hash(prop(:data)).merge(
+          pb_checkbox_indeterminate_main: indeterminate_main,
+          pb_checkbox_indeterminate_parent: indeterminate_parent
+        )
+      end
+
     private
 
       def error_class
@@ -39,10 +47,6 @@ module Playbook
       def checked_class
         checked ? "on" : "off"
       end
-
-      def indeterminate_class
-        indeterminate ? " indeterminate" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,11 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
-          checked: true,
           text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
-          indeterminate: true,
+          indeterminate_main: true,
           id: "indeterminate-checkbox"
         }) %>
       </th>
@@ -30,55 +29,10 @@
             value: checkbox[:id],
             name: "#{checkbox[:id]}-indeterminate-checkbox",
             id: "#{checkbox[:id]}-indeterminate-checkbox",
+            indeterminate_parent: "indeterminate-checkbox",
           }) %>
         </td>
       </tr>
     <% end %>
   </tbody>
 <% end %>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
-    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
-    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
-
-    const updateMainCheckbox = () => {
-      // Count the number of checked child checkboxes
-      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
-      // Determine if the main checkbox should be in an indeterminate state
-      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
-      
-      // Set the main checkbox states
-      mainCheckbox.indeterminate = indeterminate;
-      mainCheckbox.checked = checkedCount > 0;
-
-      // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
-
-      // Determine the icon class to add and remove based on the number of checked checkboxes
-      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
-
-      // Update main checkbox label
-      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
-      
-      // Add and remove the icon class to the main checkbox wrapper
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
-      
-      // Toggle the visibility of the checkbox icon based on the indeterminate state
-      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
-      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
-    };
-
-    mainCheckbox.addEventListener('change', function() {
-      childCheckboxes.forEach(cb => cb.checked = this.checked);
-      updateMainCheckbox();
-    });
-
-    childCheckboxes.forEach(cb => {
-      cb.addEventListener('change', updateMainCheckbox);
-    });
-  });
-</script>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -0,0 +1 @@
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.

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

@@ -0,0 +1,56 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+const INDETERMINATE_MAIN_CHECKBOX_SELECTOR = "[data-pb-checkbox-indeterminate-main='true']"
+
+export default class PbCheckbox extends PbEnhancedElement {
+  static get selector() {
+    return INDETERMINATE_MAIN_CHECKBOX_SELECTOR
+  }
+
+  connect() {
+    const mainCheckboxWrapper = this.element;
+    const mainCheckbox = mainCheckboxWrapper.querySelector('input')
+    const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+
+    const updateMainCheckbox = () => {
+      // Count the number of checked child checkboxes
+      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+      // Determine if the main checkbox should be in an indeterminate state
+      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+      
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
+
+      // Determine the main checkbox label based on the number of checked checkboxes
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+
+      // Determine the icon class to add and remove based on the number of checked checkboxes
+      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      
+      // Add and remove the icon class to the main checkbox wrapper
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      
+      // Toggle the visibility of the checkbox icon based on the indeterminate state
+      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+    };
+
+    // Set indeterminate icon on main checkbox if initial children checkboxes are checked
+    updateMainCheckbox();
+
+    this.element.querySelector('input').addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateMainCheckbox();
+    });
+
+    childCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateMainCheckbox);
+    });
+  }
+}

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -15,7 +15,7 @@
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
-      height: 45px;
+      min-height: 45px;
       @media (hover: hover) {
         &:hover,
         &:active,