playbook_ui 14.23.0.pre.alpha.PLAY2138advtableselectablerowsindeterminatecheckboxes9289 → 14.23.0.pre.alpha.PLAY2146dropdownactivestylesreact9141

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 878a16a8d123c0cc9a1485cfdd71c63850b3bd6b879a6d627d12f1552d39ff63
-  data.tar.gz: 0b4f935fe4c2c01650cc94d33ef93a5a2ed4be582279bced2a6bdcb311a2c32a
+  metadata.gz: b783164512f6b5e7e98483119372bb12b40995eb3e6d26e82b404adf26a087f5
+  data.tar.gz: 95361abd82579e6d3ce4c721386b6939fd878d1d17c040294745b9a30ef9cf1c
 SHA512:
-  metadata.gz: 984ea246b1c8387e0d1a114f719aa43b6ce5294aac8c0cf12e8cc0cb8ff27ad3c9e540cf421d63eddee202ef08deecd2b07b1d3c8b4e0a1d61ef6e579d96a38e
-  data.tar.gz: 353913795fc7ecccef58edfba7ee3e2d53e6566ad00b24cca8676a0b8aedfee1401127b90f88658b77fab6aaa817d97805b5519711a0115bfd73070c5c8ae4f2
+  metadata.gz: 1ec3ee8c3daaaa8a0efa2af68a2a25975d8c8a079b9b8da8cfe3f3e19464801cddcdf8507949cdb04d1cc24399ca29369345de0e05fc83494e515317293cb97b
+  data.tar.gz: 3a0e4707bfd204588fc5b5559a8d4dc3bc6f628d901b8d8f36ec626ce9f226933583e47649b80a9f7b1fef729ddefafbdc8f146a18bd2e344fd9a53ebcbd297c

data/app/pb_kits/playbook/_playbook.scss

@@ -107,6 +107,7 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
+@import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import 'pb_empty_state/empty_state';
 @import 'utilities/mixins';

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

@@ -112,7 +112,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
             paddingBottom="xs"
             text={node.label}
         />
-        <Flex flexDirection="column"
+        <Flex flexDirection="column" 
             paddingLeft="lg"
         >
           {node?.children?.map((child) =>
@@ -141,8 +141,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
     setShowPopover(!shouldClose)
 
   const popoverReference = (
-    <Tooltip
-        placement="top"
+    <Tooltip 
+        placement="top" 
         text="Column Configuration"
     >
       <div onClick={togglePopover}>
@@ -170,8 +170,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       >
         {type === "row-selection" ? (
           <>
-            <Caption color="light"
-                paddingLeft="xs"
+            <Caption color="light" 
+                paddingLeft="xs" 
                 size="xs"
             >
               {selectedCount} Selected
@@ -188,15 +188,15 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
               zIndex={3}
           >
             <>
-              <Caption
-                  paddingY="sm"
+              <Caption 
+                  paddingY="sm" 
                   text="Columns Config"
-                  textAlign="center"
+                  textAlign="center" 
               />
               <SectionSeparator paddingBottom="xs" />
               {tree.map((node: VisibilityNode) => (
-                <Flex cursor="pointer"
-                    flexDirection="column"
+                <Flex cursor="pointer" 
+                    flexDirection="column" 
                     key={node.id}
                     paddingX="xs"
                 >

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

@@ -124,65 +124,13 @@
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
   }
-
-  // When action bar is hidden, ensure proper border radius for header corners
-  &.hidden-action-bar {
-    .pb_advanced_table_header {
-      > tr:first-child {
-        th:first-child {
-          border-top-left-radius: 4px !important;
-        }
-        th:last-child {
-          border-top-right-radius: 4px !important;
-        }
-      }
-    }
-
-    // Also handle the case when there are multiple header rows
-    .pb_advanced_table_header {
-      > tr:first-child {
-        th:first-child,
-        .table-header-cells:first-child,
-        .table-header-cells-custom:first-child {
-          border-top-left-radius: 4px !important;
-        }
-        th:last-child,
-        .table-header-cells:last-child,
-        .table-header-cells-custom:last-child {
-          border-top-right-radius: 4px !important;
-        }
-      }
-    }
-  }
-
-  // When action bar is shown, remove border radius from header
-  .row-selection-actions-card.is-visible ~ * .pb_advanced_table_header,
-  .row-selection-actions-card.show-action-card ~ * .pb_advanced_table_header {
-    > tr:first-child {
-      th:first-child,
-      th:last-child,
-      .table-header-cells:first-child,
-      .table-header-cells:last-child,
-      .table-header-cells-custom:first-child,
-      .table-header-cells-custom:last-child {
-        border-top-left-radius: 0 !important;
-        border-top-right-radius: 0 !important;
-      }
-    }
-  }
-
+  
 
   .row-selection-actions-card {
     border-bottom-right-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
     border-bottom-color: transparent;
     transition: height 300ms ease;
-
-    &.is-visible,
-    &.show-action-card {
-      border-top-left-radius: 4px !important;
-      border-top-right-radius: 4px !important;
-    }
   }
   .table-header-cells:first-child {
     min-width: 180px;

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

@@ -218,10 +218,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     )
 
     return (
-      <Card
+      <Card 
           borderNone
           borderRadius="none"
-          className="advanced-table-fullscreen-header"
+          className="advanced-table-fullscreen-header" 
           {...props}
       >
           <Flex justify="end">
@@ -250,10 +250,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-
-  // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
-
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
@@ -261,8 +257,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     {
       'advanced-table-fullscreen': isFullscreen,
       'advanced-table-allow-fullscreen': allowFullScreen,
-      // Add the hidden-action-bar class when action bar functionality exists but is not visible
-      'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
@@ -276,6 +270,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     ? getVirtualizedContainerStyles(maxHeight)
     : {};
 
+  // Visibility flag for action bar
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+
   // The actual Main <Table /> element
   const tableElement = (
     <Table
@@ -291,7 +288,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       ) : (
         <>
           <TableHeader />
-          <TableBody
+          <TableBody   
               isFetching={isFetching}
           />
         </>

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

@@ -11,7 +11,7 @@
     <% if content.present? %>
       <% content.presence %>
     <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { id: object.id, 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_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, row_styling: object.row_styling }) %>
     <% end %>
   <% end %>

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

@@ -35,12 +35,7 @@ module Playbook
                          default: []
 
       def classname
-        additional_classes = [
-          responsive_classname,
-          max_height_classname,
-          hide_scroll_bar_class,
-          hidden_action_bar_class,
-        ]
+        additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
         generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
@@ -54,12 +49,7 @@ module Playbook
       end
 
       def hide_scroll_bar_class
-        scroll_bar_none ? "advanced-table-hide-scrollbar" : ""
-      end
-
-      def hidden_action_bar_class
-        # Add hidden-action-bar class when action bar functionality is enabled but not currently visible
-        selectable_rows && !is_action_bar_visible ? "hidden-action-bar" : ""
+        scroll_bar_none ? "advanced-table-hide-scrollbar " : ""
       end
 
       def selected_rows

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

@@ -1,7 +1,4 @@
 function showActionBar(actionBar, selectedCount) {
-  // Get container
-  const tableContainer = actionBar.closest('.pb_advanced_table');
-
   // Show action bar directly
   actionBar.style.height = "auto";
   actionBar.style.overflow = "visible";
@@ -11,11 +8,6 @@ function showActionBar(actionBar, selectedCount) {
   actionBar.classList.remove("p_none");
   actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 
-  // Remove hidden-action-bar class when action bar is shown
-  if (tableContainer) {
-    tableContainer.classList.remove("hidden-action-bar");
-  }
-
   // Update the count
   const countElement = actionBar.querySelector(".selected-count");
   if (countElement) {
@@ -24,20 +16,12 @@ function showActionBar(actionBar, selectedCount) {
 }
 
 function hideActionBar(actionBar) {
-  // Get container
-  const tableContainer = actionBar.closest('.pb_advanced_table');
-
   // 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");
-
-  // Add hidden-action-bar class when action bar is hidden
-  if (tableContainer) {
-    tableContainer.classList.add("hidden-action-bar");
-  }
 }
 
 export function updateSelectionActionBar(table, selectedCount) {

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

@@ -31,7 +31,7 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: {
-  id: "selectable_rows_with_header_no_action_bar",
+  id: "selectable_rows_with_actions",
   table_data: @table_data_no_subrows,
   column_definitions: column_definitions,
   selectable_rows: true,

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

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

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

@@ -2,6 +2,7 @@ import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
 
 const FLAT_SELECTOR = "[data-flat-advanced-table-select='true']";
+const SELECT_ALL_SELECTOR = "#select-all-rows input[type='checkbox']";
 
 export default class PbFlatAdvancedTable extends PbEnhancedElement {
   static get selector() {
@@ -36,12 +37,9 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
       }
     };
 
-    const selectAllId = this.element.getAttribute('data-pb-checkbox-indeterminate-parent')
-    const selectAllSelector = `#${selectAllId} input[type='checkbox']`
-
     table.addEventListener("change", (e) => {
       const rowCb = e.target.closest(FLAT_SELECTOR + " input[type='checkbox']");
-      const allCb = e.target.closest(selectAllSelector);
+      const allCb = e.target.closest(SELECT_ALL_SELECTOR);
       if (!rowCb && !allCb) return;
 
       if (rowCb) {
@@ -52,6 +50,15 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
         const tr = rowCb.closest("tr");
         tr?.classList.toggle("bg-row-selection", rowCb.checked);
         tr?.classList.toggle("bg-white", !rowCb.checked);
+
+        // Sync header checkbox
+        const header = table.querySelector(SELECT_ALL_SELECTOR);
+        if (header) {
+          const all = Array.from(
+            table.querySelectorAll(FLAT_SELECTOR + " input[type='checkbox']")
+          ).every((cb) => cb.checked);
+          header.checked = all;
+        }
       }
 
       if (allCb) {

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

@@ -39,70 +39,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     );
   }
 
-  // Recalculate selected count based on all checked checkboxes
-  recalculateSelectedCount() {
-    const table = this.element.closest("table");
-    
-    // Get all checkboxes that could be part of the selection
-    // This includes row checkboxes and any parent checkboxes that might be programmatically checked
-    const rowCheckboxes = table.querySelectorAll(
-      'label[data-row-id] input[type="checkbox"]'
-    );
-    
-    // Also get any checkboxes that might be parent checkboxes (those with data-pb-checkbox-indeterminate-main)
-    // But exclude the select-all checkbox itself from the count
-    const parentCheckboxes = table.querySelectorAll(
-      '[data-pb-checkbox-indeterminate-main="true"] input[type="checkbox"]'
-    );
-    
-    // Filter out the select-all checkbox from parent checkboxes
-    const selectAllCheckbox = table.querySelector('#select-all-rows input[type="checkbox"]');
-    const filteredParentCheckboxes = Array.from(parentCheckboxes).filter(checkbox => 
-      checkbox !== selectAllCheckbox && !checkbox.id.includes('select-all-rows')
-    );
-    
-    // Combine all checkboxes and remove duplicates
-    const allCheckboxes = new Set([...rowCheckboxes, ...filteredParentCheckboxes]);
-    
-    // Clear the selectedRows Set and rebuild it from checked checkboxes
-    PbAdvancedTable.selectedRows.clear();
-    
-    allCheckboxes.forEach((checkbox) => {
-      const rowEl = checkbox.closest("tr");
-      const isChecked = checkbox.checked;
-      
-      if (isChecked) {
-        PbAdvancedTable.selectedRows.add(checkbox.id);
-        // Only apply styling if the checkbox is inside a table row
-        if (rowEl) {
-          rowEl.classList.add("bg-row-selection");
-          rowEl.classList.remove("bg-white", "bg-silver");
-        }
-      } else {
-        // Only apply styling if the checkbox is inside a table row
-        if (rowEl) {
-          rowEl.classList.remove("bg-row-selection");
-          
-          if (this.isRowExpanded(rowEl)) {
-            rowEl.classList.remove("bg-silver");
-            rowEl.classList.add("bg-white");
-          } else {
-            rowEl.classList.remove("bg-white");
-            rowEl.classList.add("bg-silver");
-          }
-        }
-      }
-    });
-    
-    this.updateTableSelectedRowsAttribute();
-    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
-    
-    // Sync header select-all state
-    if (selectAllCheckbox) {
-      selectAllCheckbox.checked = Array.from(rowCheckboxes).every((cb) => cb.checked);
-    }
-  }
-
   // Check if the row is expanded or collapsed
   // This is used to determine the background color of the row
   // when the checkbox is checked or unchecked
@@ -111,6 +47,75 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return closeIcon?.style.display === "none" || !closeIcon;
   }
 
+  updateParentCheckboxes(checkbox) {
+    const rowEl = checkbox.closest("tr");
+    if (!rowEl) return;
+
+    const table = rowEl.closest("table");
+    if (!table) return;
+
+    const contentTrail = rowEl.dataset.advancedTableContent;
+    if (!contentTrail) return;
+
+    const ancestorIds = contentTrail.split("-").slice(0, -1);
+
+    ancestorIds.reverse();
+    ancestorIds.forEach((ancestorId) => {
+      const parentRowSelector = `[data-advanced-table-content$="${ancestorId}"]`;
+      const parentRow = table.querySelector(parentRowSelector);
+      if (!parentRow) return;
+
+      const parentLabel = parentRow.querySelector("label[data-row-id]");
+      if (!parentLabel) return;
+
+      const parentCheckbox = parentLabel.querySelector(
+        "input[type='checkbox']"
+      );
+      if (!parentCheckbox) return;
+
+      // Find all immediate children of parent linked to ancestor Id, filter our subrow headers
+      const children = Array.from(
+        table.querySelectorAll(`tr[data-row-parent$="_${ancestorId}"]`)
+      ).filter((child) => {
+        const content = child.dataset.advancedTableContent;
+        return !(content && content.endsWith("sr"));
+      });
+
+      const allChildrenChecked = Array.from(children).every((child) => {
+        const childLabel = child.querySelector("label[data-row-id]");
+        if (!childLabel) return false;
+        const childCheckbox = childLabel.querySelector(
+          "input[type='checkbox']"
+        );
+        if (!childCheckbox) return false;
+        return childCheckbox.checked;
+      });
+
+      // Update parent checkbox
+      parentCheckbox.checked = allChildrenChecked;
+
+      const parentCheckboxId = parentCheckbox.id;
+      if (allChildrenChecked) {
+        PbAdvancedTable.selectedRows.add(parentCheckboxId);
+        parentRow.classList.add("bg-row-selection");
+        parentRow.classList.remove("bg-white", "bg-silver");
+      } else {
+        PbAdvancedTable.selectedRows.delete(parentCheckboxId);
+      }
+      if (!allChildrenChecked) {
+        parentRow.classList.remove("bg-row-selection");
+
+        if (this.isRowExpanded(parentRow)) {
+          parentRow.classList.remove("bg-silver");
+          parentRow.classList.add("bg-white");
+        } else {
+          parentRow.classList.remove("bg-white");
+          parentRow.classList.add("bg-silver");
+        }
+      }
+    });
+  }
+
   handleCheckboxClick(event) {
     const checkbox = event.currentTarget;
     const rowId = checkbox.id;
@@ -136,6 +141,49 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         rowEl.classList.add("bg-silver");
       }
     }
+    if (rowEl) {
+      const table = rowEl.closest("table");
+      const rowContent = rowEl.dataset.advancedTableContent;
+
+      if (rowContent) {
+        const childRows = table.querySelectorAll(
+          `[data-advanced-table-content^="${rowContent}-"]`
+        );
+
+        childRows.forEach((childRow) => {
+          const label = childRow.querySelector("label[data-row-id]");
+          if (!label) return;
+
+          const childCheckbox = label.querySelector("input[type='checkbox']");
+          if (!childCheckbox) return;
+
+          childCheckbox.checked = isChecked;
+
+          const childRowId = childCheckbox.id;
+          const childRowEl = childCheckbox.closest("tr");
+          if (isChecked) {
+            PbAdvancedTable.selectedRows.add(childRowId);
+            childRowEl?.classList.add("bg-row-selection");
+            childRowEl?.classList.remove("bg-white", "bg-silver");
+          } else {
+            PbAdvancedTable.selectedRows.delete(childRowId);
+          }
+          if (!isChecked) {
+            childRowEl?.classList.remove("bg-row-selection");
+
+            if (this.isRowExpanded(childRowEl)) {
+              childRowEl?.classList.remove("bg-silver");
+              childRowEl?.classList.add("bg-white");
+            } else {
+              childRowEl?.classList.remove("bg-white");
+              childRowEl?.classList.add("bg-silver");
+            }
+          }
+        });
+      }
+    }
+
+    this.updateParentCheckboxes(checkbox);
 
     this.updateTableSelectedRowsAttribute();
 
@@ -201,11 +249,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
             this.handleCheckboxClick({ currentTarget: cb });
           }
         });
-        
-        // Recalculate the count to ensure all checkboxes are properly tracked
-        setTimeout(() => {
-          this.recalculateSelectedCount();
-        }, 0);
+        this.updateTableSelectedRowsAttribute();
+        updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
         return;
       }
 
@@ -213,41 +258,17 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       const rowLabel = checkbox.closest("label[data-row-id]");
       if (rowLabel) {
         this.handleCheckboxClick({ currentTarget: checkbox });
-        
-        // Recalculate the count to ensure all checkboxes are properly tracked
-        setTimeout(() => {
-          this.recalculateSelectedCount();
-        }, 0);
-      }
-    });
-
-    // If a parent checkbox changed a checkbox, update styling
-    // Listen for programmatic checkbox changes from parent-child relationships
-    table.addEventListener("checkbox-programmatic-change", (event) => {
-      const checkbox = event.target;
-      if (!checkbox || checkbox.type !== 'checkbox') return;
+        this.updateTableSelectedRowsAttribute();
 
-      // Individual row checkbox logic
-      const rowLabel = checkbox.closest("label[data-row-id]");
-      if (rowLabel) {
-        this.handleCheckboxClick({ currentTarget: checkbox });
-      }
-      
-      // Recalculate the count to ensure all programmatically changed checkboxes are included
-      setTimeout(() => {
-        this.recalculateSelectedCount();
-      }, 10); // Slightly longer delay to ensure all changes are processed
-    });
-
-
-    // Also listen for all checkbox changes to ensure we catch everything
-    table.addEventListener("change", (event) => {
-      const checkbox = event.target;
-      if (checkbox && checkbox.type === 'checkbox') {
-        // Force recalculation after a short delay to ensure all changes are processed
-        setTimeout(() => {
-          this.recalculateSelectedCount();
-        }, 50);
+        // Sync header select-all state
+        const selectAllInput = table.querySelector(
+          '#select-all-rows input[type="checkbox"]'
+        );
+        if (selectAllInput) {
+          selectAllInput.checked = Array.from(
+            table.querySelectorAll('label[data-row-id] input[type="checkbox"]')
+          ).every((cb) => cb.checked);
+        }
       }
     });
 

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

@@ -79,14 +79,8 @@
     left: 0;
     border-radius: unset;
     z-index: 5;
-
-    // Add proper border radius when action bar is visible
-    &.is-visible,
-    &.show-action-card {
-      border-top-left-radius: 4px !important;
-      border-top-right-radius: 4px !important;
-    }
   }
+
   .checkbox-cell {
     display: table-cell !important;
   }

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

@@ -40,14 +40,13 @@ module Playbook
         end.compact
       end
 
-      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {}, immediate_parent_row_id: nil)
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {})
         top_parent_id ||= row.object_id
         new_ancestor_ids = ancestor_ids + [row.object_id]
         leaf_columns = flatten_columns(column_definitions)
 
         output = ActiveSupport::SafeBuffer.new
         is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
-        last_row = subrow_headers.length == current_depth
 
         subrow_ancestor_ids = ancestor_ids + ["#{row.object_id}sr"]
         subrow_data_attributes = {
@@ -56,7 +55,7 @@ module Playbook
           row_parent: "#{id}_#{ancestor_ids.last}",
         }
         # Subrow header if applicable
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
         current_data_attributes = if current_depth.zero?
                                     {
@@ -69,7 +68,7 @@ module Playbook
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -84,7 +83,7 @@ module Playbook
               advanced_table_content: data_content,
             }
 
-            output << render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, additional_classes: "toggle-content", table_data_attributes: child_data_attributes, immediate_parent_row_id: row[:id])
+            output << render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, additional_classes: "toggle-content", table_data_attributes: child_data_attributes)
           end
         end