playbook_ui 14.20.0.pre.rc.2 → 14.21.0.pre.alpha.PLAY2167advtablenitrorowborderdoubling8097

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb

@@ -0,0 +1,137 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  }
+]
+
+actions = [
+  pb_rails("circle_icon_button", props: {
+    icon: "file-csv",
+    variant: "link",
+    id: "export-selected-rows-btn",
+    data: {
+      action_type: "export"
+    }
+  }),
+  pb_rails("circle_icon_button", props: {
+    icon: "trash-alt",
+    variant: "link",
+    id: "delete-selected-rows-btn",
+    data: {
+      action_type: "delete"
+    }
+  })
+]
+%>
+
+<%= pb_rails("advanced_table", props: {
+  id: "selectable_rows_with_actions",
+  table_data: @table_data_no_subrows,
+  column_definitions: column_definitions,
+  selectable_rows: true,
+  enable_toggle_expansion: "none",
+  actions: actions
+}) %>
+
+<script>
+  // Handle action clicks using the data-selected-rows attribute
+  window.handleActionClick = function(actionType) {
+    const tableContainer = document.getElementById('selectable_rows_with_actions');
+    if (!tableContainer) return;
+
+    // Get selected rows from the data attribute
+    const selectedRowsJSON = tableContainer.getAttribute('data-selected-rows');
+    let selectedRowIds = [];
+
+    try {
+      // Parse the JSON string from the data attribute
+      if (selectedRowsJSON) {
+        selectedRowIds = JSON.parse(selectedRowsJSON);
+      }
+    } catch (e) {
+      // Fallback if JSON parsing fails
+      const checkboxes = tableContainer.querySelectorAll('input[type="checkbox"]:checked');
+      const selectedCheckboxes = Array.from(checkboxes).filter(checkbox =>
+        checkbox.id !== 'select-all-rows' &&
+        !checkbox.closest('#select-all-rows')
+      );
+      selectedRowIds = selectedCheckboxes.map(checkbox => checkbox.id);
+    }
+
+    // Show appropriate message
+    if (!selectedRowIds || selectedRowIds.length === 0) {
+      alert('No Selection Made');
+    } else {
+      if (actionType === 'export') {
+        alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
+      } else if (actionType === 'delete') {
+        alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
+      }
+    }
+  };
+
+  // Add event listeners when the DOM is ready
+  document.addEventListener('DOMContentLoaded', function() {
+    // Get the buttons
+    const exportBtn = document.getElementById('export-selected-rows-btn');
+    const deleteBtn = document.getElementById('delete-selected-rows-btn');
+
+    // Add click event listeners
+    if (exportBtn) {
+      exportBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        window.handleActionClick('export');
+      });
+    }
+
+    if (deleteBtn) {
+      deleteBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        window.handleActionClick('delete');
+      });
+    }
+
+    // Optional: Event delegation through the action bar
+    const actionBar = document.querySelector('.row-selection-actions-card');
+    if (actionBar) {
+      actionBar.addEventListener('click', function(e) {
+        const exportButton = e.target.closest('#export-selected-rows-btn');
+        const deleteButton = e.target.closest('#delete-selected-rows-btn');
+
+        if (exportButton) {
+          e.preventDefault();
+          window.handleActionClick('export');
+        } else if (deleteButton) {
+          e.preventDefault();
+          window.handleActionClick('delete');
+        }
+      });
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.md

@@ -0,0 +1,3 @@
+Custom actions content can be rendered within the Actions Bar as shown in this doc example. The component passed to `actions` will be rendered on the right of the actionsBar.
+
+You can utilize script tags with your actions to provide your buttons with any clickable events needed.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb

@@ -0,0 +1,40 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  }
+] %>
+
+<%= pb_rails("advanced_table", props: {
+  id: "selectable_rows_with_actions",
+  table_data: @table_data_no_subrows,
+  column_definitions: column_definitions,
+  selectable_rows: true,
+  enable_toggle_expansion: "none",
+  show_actions_bar: false
+}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.md

@@ -0,0 +1 @@
+`show_actions_bar` is an optional prop that renders the header at the top showing the row count. This is set to `true` by default but can be toggled off by setting it to `false`

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

@@ -13,8 +13,12 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_border_color_rails: Column Group Border Color
+  - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
+  - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
+  - advanced_table_scrollbar_none: Advanced Table Scrollbar None
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -40,7 +44,7 @@ examples:
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   - advanced_table_column_border_color: Column Group Border Color
-  # - advanced_table_no_subrows: Table with No Subrows
+  - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
@@ -50,4 +54,6 @@ examples:
   - advanced_table_column_visibility: Column Visibility Control
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
-  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_pinned_rows: Pinned Rows
+  - advanced_table_scrollbar_none: Advanced Table Scrollbar None

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

@@ -31,4 +31,6 @@ export { default as AdvancedTableColumnBorderColor} from './_advanced_table_colu
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
 export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
 export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
-export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
+export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
+export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
+export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'

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,151 @@ 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.style.transitionProperty = 'all';
+    actionBar.style.transitionTimingFunction = 'ease-in-out';
+    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/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.