playbook_ui 14.20.0.pre.alpha.play2224scrollbarfix7991 → 14.20.0.pre.alpha.revert4453PBNTR933reactdraggablebugdragbtwnexamples7854

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5ad2b50caa44bd7f1850679f7015d8737acc1c149b33bb0e03b1973c5b9d2632
-  data.tar.gz: 278a40c7d3f043dcd05ab9b352fca78a5f333ff8f0601b005c54b198071eb7c5
+  metadata.gz: d810ce992ce83180c727b57ffd2015356b7860a523383f4a8810b4b964c6ea1e
+  data.tar.gz: 7674cda91f367bc7ad377806520109d2ffd1cd9076e51c34fb5f1e3baf37120c
 SHA512:
-  metadata.gz: 5eb59491ed8f8ae13325bae41973837762368c1e7edb5867a42d027364a7185954fdc5fcf08c15ab13c3ba6889e4d4289438a8944da140b77a25cc30fd9fd4ac
-  data.tar.gz: 28d2c7c1f021ee5097e22a5b32e84e377af36185c2e1d61d966432c70d3d57f00e250683e4af5ebdf23d6165335aacea265a95b2785705d00e5f035363d16a11
+  metadata.gz: f5d3b8da029137dbf003df505ec900c151d0986db08089339e685d89a7a38ba4b830bf745ea5701aa439bdd2df0f9febcd5728caf65a642be9f1e58579fca37e
+  data.tar.gz: 8304eed6d900e0a9f052b7dec2066c713606a906b7f749bd47b36553dfb0ac2df3e8ecf4f76ca1c15d80a88398dfa0b5efc954d7ca0ca109d94eb8aa5292c01f

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -87,16 +87,6 @@
     }
   }
 
-  &.advanced-table-hide-scrollbar {
-      &::-webkit-scrollbar {
-        display: none !important;
-      }
-
-      -ms-overflow-style: none !important;
-      scrollbar-width: none !important;
-    }
-  
-
   .row-selection-actions-card {
     border-bottom-right-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
@@ -378,10 +368,6 @@
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
-  .pb_table_td:nth-child(2) {
-    box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
-  }
-
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -578,10 +564,6 @@
         box-shadow: $shadow_deep !important;
       }
 
-      .pb_table_td:nth-child(2) {
-        box-shadow: 0 0 0 0 !important;
-      }
-
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -53,7 +53,6 @@ type AdvancedTableProps = {
   pagination?: boolean,
   paginationProps?: GenericObject
   responsive?: "scroll" | "none",
-  scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
   sortControl?: GenericObject
@@ -93,7 +92,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     pagination = false,
     paginationProps,
     responsive = "scroll",
-    scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
     sortControl,
@@ -247,7 +245,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
-    scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
     globalProps(props),
     className
   );

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

@@ -1,18 +1,10 @@
 <%= pb_content_tag do %>
-  <% if object.id && object.selectable_rows && object.show_actions_bar %>
-    <%= pb_rails("advanced_table/table_action_bar", props: {
-      actions: object.actions,
-      is_visible: false,
-      selected_count: 0
-    }) %>
-  <% end %>
-
-  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
-    <% if content.present? %>
-      <% content.presence %>
-    <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
-      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
-    <% end %>
-  <% end %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
+          <% if content.present? %>
+            <% content.presence %>
+          <% else %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+          <% end %>
+        <% end %>
 <% end %>

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

@@ -25,10 +25,6 @@ module Playbook
                         default: "auto"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
-      prop :show_actions_bar, type: Playbook::Props::Boolean,
-                              default: true
-      prop :actions, type: Playbook::Props::Array,
-                     default: []
 
       def classname
         additional_classes = [responsive_classname, max_height_classname]
@@ -51,11 +47,6 @@ module Playbook
       def selected_rows_length
         selected_rows.length
       end
-
-      def is_action_bar_visible
-        # Action bar visibility is controlled by JS based on selection
-        false
-      end
     end
   end
 end

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

@@ -1,8 +1,4 @@
-The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has three required props__:
-
-### id
-
-A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar will not be able to properly reference the correct table.
+The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
 
 ### table_data
 
@@ -17,6 +13,6 @@ Column definitions are the single most important part of building a table as the
 - `accessor`: this is the key from your data for the value you want rendered in that column
 - `label`: this is what will be rendered as the column header label
 
-There is also one optional item that is only required if the table has nested data:
+There is also one optional item that is only required if the table has nested data: 
 
 - `cellAccessors`: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx

@@ -39,13 +39,9 @@ const AdvancedTableDefault = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          overflow="auto"
-          responsive="scroll"
-          scrollBarNone
           tableData={MOCK_DATA}
           {...props}
-          />
+      />
     </div>
   )
 }

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

@@ -3,7 +3,7 @@
 <br />
 <br />
 
-The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
+The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
 
 ### tableData
 

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions responsive }) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

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

@@ -15,8 +15,6 @@ examples:
   - advanced_table_column_border_color_rails: Column Group Border Color
   - 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)
 
   react:
   - advanced_table_default: Default (Required Props)

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,149 +449,6 @@ 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/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_checkbox/checkbox.html.erb

@@ -1,12 +1,16 @@
-<%= pb_content_tag(:label, data: {
-  pb_checkbox_indeterminate_main: object.indeterminate_main,
-  pb_checkbox_indeterminate_parent: object.indeterminate_parent,
-}) do %>
+<%= pb_content_tag(:label) do %>
   <%= content.presence || object.input %>
-  <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>
+  <% 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 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,8 +5,7 @@ module Playbook
     class Checkbox < Playbook::KitBase
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate_parent
+      prop :indeterminate, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :value
       prop :name
@@ -20,7 +19,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_checkbox_kit", checked_class) + error_class
+        generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
       end
 
       def input
@@ -40,6 +39,10 @@ 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,10 +9,11 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
+          checked: true,
           text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
-          indeterminate_main: true,
+          indeterminate: true,
           id: "indeterminate-checkbox"
         }) %>
       </th>
@@ -29,10 +30,55 @@
             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>