playbook_ui 14.20.0.pre.alpha.revert4637revert4621PLAY2033atactionbarrails7855 → 14.20.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cb057816a6e246cd6fdb0328481780c4c643745f743a30a7d8e8d7e3945edb52
-  data.tar.gz: 5cbbcb97be3bdb84207a0c02564c0d69526dbcc6ab4c225be46054eaa7d7e835
+  metadata.gz: 8fa79ee278fc38b79bf8ba0d013868027d1b9b26029ccb1cf2f173b2a7797c83
+  data.tar.gz: 9e914077f1ad480c8f7ffa9bb65a6828a7b9a887d7b8b3e536bacfa5ab7c5a6e
 SHA512:
-  metadata.gz: 0a8324314d5a306344d06b8624cc9778135d054a604935fe18b48aacd834206f9af94ef059d56e8b4cc6dc10644b6d18358bc59353893e0be2fd36a43de3d6c6
-  data.tar.gz: 1cc55b5f08ff76e1acad406002cf428b9606c8e8c3c75a137a3f89b3a2c7be299fee1c93d2ae57e921cf59994779a13f8c98074e8af00da71cc0d5aabe2f7589
+  metadata.gz: 4ef970a5758c8caf8a18b1d242eaf93c406318aaa676c2515200ed8e35fb8391de2acb7c2bc22f9350d6dd8555e26707fcdae48d0b779ee50372d35606364f86
+  data.tar.gz: 1b0da522bd01978c4087c086cc6ec8d0066296696a7c8ff82d26e74d6d126694c83f2b3fa7d39b2cafb97678a9f66a4a175864a8c534d273590a763c03b18171

data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useContext, useState } from "react";
+import React, { useEffect, useRef, useContext } from "react";
 
 import AdvancedTableContext from "../Context/AdvancedTableContext";
 import { buildVisibilityTree } from "../Utilities/VisibilityTree";
@@ -7,11 +7,13 @@ import Card from "../../pb_card/_card";
 import Caption from "../../pb_caption/_caption";
 import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer";
+import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger";
 import Icon from "../../pb_icon/_icon";
 import Checkbox from "../../pb_checkbox/_checkbox";
 import SectionSeparator from "../../pb_section_separator/_section_separator";
 import Tooltip from "../../pb_tooltip/_tooltip";
-import PbReactPopover from "../../pb_popover/_popover";
 
 import {
   showActionBar,
@@ -54,24 +56,11 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
     const col   = table.getColumn(id);
     const show  = col.getIsVisible();
 
-    const handleVisibilityChange = () => {
-      col.toggleVisibility();
-      if (columnVisibilityControl?.onColumnVisibilityChange) {
-        const updatedVisibilityState = {
-          ...table.getAllColumns().reduce((acc: { [x: string]: any; }, col: { id: string | number; getIsVisible: () => any; }) => {
-            acc[col.id] = col.getIsVisible();
-            return acc;
-          }, {}),
-        };
-        columnVisibilityControl?.onColumnVisibilityChange(updatedVisibilityState);
-      }
-    };
-
     return (
       <Checkbox
           checked={show}
           key={id}
-          onChange={handleVisibilityChange}
+          onChange={() => col.toggleVisibility()}
           paddingBottom="xs"
           text={label}
       />
@@ -91,24 +80,16 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
     const allOn    = visibleArray.every(Boolean);
     const someOn   = visibleArray.some(Boolean);
 
-       const handleGroupVisibilityChange = () => {
-      leaves.forEach((id) => table.getColumn(id).toggleVisibility(!allOn));
-      if (columnVisibilityControl?.onColumnVisibilityChange) {
-        const updatedVisibilityState = {
-          ...table.getAllColumns().reduce((acc: { [x: string]: any; }, col: { id: string | number; getIsVisible: () => any; }) => {
-            acc[col.id] = col.getIsVisible();
-            return acc;
-          }, {}),
-        };
-        columnVisibilityControl?.onColumnVisibilityChange(updatedVisibilityState);
-      }
-    };
     return (
       <>
         <Checkbox
             checked={allOn}
             indeterminate={!allOn && someOn}
-            onChange={handleGroupVisibilityChange}
+            onChange={() =>
+              leaves.forEach((id) =>
+                table.getColumn(id).toggleVisibility(!allOn),
+              )
+            }
             paddingBottom="xs"
             text={node.label}
         />
@@ -132,28 +113,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
         hideActionBar(cardRef.current);
       }
     }
-  }, [isVisible, type]);
-
-  const [showPopover, setShowPopover] = useState(false)
-
-  const togglePopover = () => setShowPopover((prev) => !prev)
-  const handleShouldClose = (shouldClose: boolean) =>
-    setShowPopover(!shouldClose)
-
-  const popoverReference = (
-    <Tooltip 
-        placement="top" 
-        text="Column Configuration"
-    >
-      <div onClick={togglePopover}>
-      <Icon
-          color="primary"
-          cursor="pointer"
-          icon="sliders-h"
-      />
-      </div>
-    </Tooltip>
-  )
+  }, [isVisible]);
 
   return (
     <Card
@@ -179,17 +139,30 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
             <FlexItem>{actions}</FlexItem>
           </>
         ) : (
-          <PbReactPopover
-              closeOnClick="outside"
-              placement="bottom-end"
-              reference={popoverReference}
-              shouldClosePopover={handleShouldClose}
-              show={showPopover}
-              zIndex={3}
+          <Dropdown
+              className="column-visibility-dropdown-wrapper"
+              options={columnDefinitions}
           >
-            <>
+            <DropdownTrigger>
+            <Tooltip 
+                placement='top' 
+                text="Column Configuration" 
+                zIndex={10}
+            >
+                <Icon 
+                    color="primary" 
+                    cursor="pointer" 
+                    icon="sliders-h" 
+                />
+            </Tooltip>
+            </DropdownTrigger>
+            <DropdownContainer
+                className="column-visibility-dropdown"
+                paddingTop="sm"
+            >
+              <>
               <Caption 
-                  paddingY="sm" 
+                  paddingBottom="sm" 
                   text="Columns Config"
                   textAlign="center" 
               />
@@ -204,7 +177,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
                 </Flex>
               ))}
               </>
-          </PbReactPopover>
+            </DropdownContainer>
+          </Dropdown>
         )}
       </Flex>
     </Card>

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react"
+import React, { useContext } from "react"
 import classnames from "classnames"
 import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
 
@@ -8,8 +8,10 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Checkbox from "../../pb_checkbox/_checkbox"
-import SectionSeparator from "../../pb_section_separator/_section_separator"
-import PbReactPopover from "../../pb_popover/_popover";
+import Dropdown from "../../pb_dropdown/_dropdown"
+import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
+import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
+import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
 import Icon from "../../pb_icon/_icon"
 
 import { SortIconButton } from "./SortIconButton"
@@ -134,20 +136,6 @@ const isToggleExpansionEnabled =
     justifyHeader = isLeafColumn ? "end" : "center";
   }
   
-  const [showPopover, setShowPopover] = useState(false)
-
-  const togglePopover = () => setShowPopover((prev) => !prev)
-  const handleShouldClose = (shouldClose: boolean) =>
-    setShowPopover(!shouldClose)
-
-  const popoverReference = (
-      <div className="gray-icon toggle-all-icon" 
-          onClick={togglePopover}
-      >
-          <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
-      </div>
-  )
-
   const handleExpandDepth = (depth: number) => {
     if (onExpandByDepthClick) {
       const flatRows = table?.getRowModel().flatRows
@@ -203,33 +191,31 @@ const isToggleExpansionEnabled =
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
           {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
-
-                    <PbReactPopover
-                        closeOnClick="any"
-                        placement="bottom-start"
-                        reference={popoverReference}
-                        shouldClosePopover={handleShouldClose}
-                        show={showPopover}
-                        zIndex={3}
+              <Dropdown className="expand-by-depth-dropdown-wrapper" 
+                  options={expandByDepth}
+              >
+                <DropdownTrigger className="gray-icon toggle-all-icon">
+                  <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
+                </DropdownTrigger>
+                <DropdownContainer className="expand-by-depth-dropdown">
+                  {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
+                    <DropdownOption
+                        key={index}
+                        option={option}
+                        padding="none"
                     > 
-                    {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
-                      <>
                       <Flex
                           alignItems="center"
-                          className="pb-advanced-table-popover-option"
-                          cursor="pointer"
                           htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
                           paddingX="sm"
                           paddingY="xs"
                           >
                             {option.label}
-                      </Flex>
-                      {index !== expandByDepth.length - 1 && <SectionSeparator/>}
-                      </>
-                        ))}
-                    </PbReactPopover>
-                 
-
+                          </Flex>
+                    </DropdownOption>
+                  ))}
+                </DropdownContainer>
+              </Dropdown>
             )}
 
           {isToggleExpansionEnabledLoading &&(

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

@@ -53,6 +53,15 @@
     width: 100%;
   }
 
+  .column-visibility-dropdown-wrapper {
+    position: unset !important;
+  }
+  .column-visibility-dropdown {
+    width: unset !important;
+    right: $space_xxs;
+    text-align: left;
+  }
+
   // Virtualized table styles
   .virtualized-table-row {
     display: table !important;
@@ -150,6 +159,13 @@
         box-sizing: border-box !important;
       }
     }
+    .expand-by-depth-dropdown-wrapper {
+      position: unset !important;
+    }
+    .expand-by-depth-dropdown {
+      width: unset !important;
+      text-align: left;
+    }
   }
 
   .pb_advanced_table_body {
@@ -538,12 +554,14 @@
       background-color: $white;
       box-shadow: $shadow_deep;
     }
-
     @include advanced-table-sticky-mixin(
       $border_light,
       $white,
       lighten($silver, $opacity_7)
     );
+
+    // Apply border colors for sticky columns
+    @include apply-sticky-colors("light");
   }
 
   // Responsive Styles
@@ -809,8 +827,3 @@
     }
   }
 }
-
-// Outside of the pb_advanced_table class for popover
-.pb-advanced-table-popover-option:hover {
-  background-color: $bg_light;
-}

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_column_visibility_with_state.jsx

@@ -49,7 +49,6 @@ const AdvancedTableColumnVisibilityWithState = (props) => {
   const columnVisibilityControl = {
     value: columnVisibility,
     onChange: setColumnVisibility,
-    onColumnVisibilityChange: (currentState) => console.log(currentState),
   }
   return (
     <div>

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

@@ -1,3 +1 @@
-The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.
-
-The additional `onColumnVisibilityChange` provides a callback with the current state as the argument if needed. 
+The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.

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