playbook_ui 18.3.0.pre.alpha.PLAY3353ATselectall20974 → 18.3.0.pre.alpha.forwardrefwarnings20879

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f9b4809fd0eaae6c78ca3e4974fcabf0c17d94bab7faa4135164e4361aa4ea62
-  data.tar.gz: f5bd947efc3cb866c9482b95335493a56ab2b18c029cc90cd9b8329b661d1314
+  metadata.gz: af48353705b1ce87159c9761f41618cbb21c66e593c0e6c3a7eca1ba3cd7d2a3
+  data.tar.gz: ab45901796d0cfff09d8d199d320c83cd58429b7831544aa427865306d6e5d96
 SHA512:
-  metadata.gz: ba18f2d83a5827bdb20795ad4e9212b1d1c4c17c0dcf5acf5f0962454d1541e93f84eaa05ddac530b755afaed46fefed09c06b1d1f81b6fb4b62e5520de036ba
-  data.tar.gz: a40e05d0bf5d74b2e58932249fca3b9087a8bf18360ce3fda60e63afaa05af9c31dd0124671ac04707ef00b0e631d4151fa1d227b9aa19b32917fd6ccaa235e1
+  metadata.gz: fcdf296d7ddc231a54b735b920bc650387c76f8364531ee44950d80d4e819b16dc188a102b4ca44d92964a60498272d00b33d5fbdaf4edd3bdfb4e7c9a466e7a
+  data.tar.gz: 0142e30f5c5b217699a9e3b2059117fd350cfa51dac2ab3fc6c3e2c9b700707f068412da119e437b81574b4f4844f7781ce9f6bd9ea075717c6127400bf1a3c4

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

@@ -1,17 +1,10 @@
-import React, { useContext } from "react"
-
-import AdvancedTableContext from "../Context/AdvancedTableContext"
+import React from "react"
 
 //CollapsibleTrail component
 const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
-  const { groupSeparators } = useContext(AdvancedTableContext)
   const style: { [key: string]: string | number } = {
     left: `${leftOffset}em`,
   }
-  // Read by groupSeparators CSS to decide which trails stop at the stroke
-  if (groupSeparators) {
-    style["--collapsible-trail-left"] = `${leftOffset}em`
-  }
 
   return (
     <div 

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from "react"
+import React, { useContext, useEffect } from "react"
 import classnames from "classnames"
 import { flexRender, Row, Cell } from "@tanstack/react-table"
 
@@ -6,7 +6,7 @@ import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
-import { buildGroupSeparatorInsets, getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
+import { getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -125,7 +125,6 @@ export const RegularTableView = ({
 }: RegularTableViewProps) => {
   const {
     enableToggleExpansion,
-    groupSeparators,
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
@@ -159,30 +158,14 @@ export const RegularTableView = ({
     (obj: Record<string, unknown>) => "columns" in obj
   );
 
-  // One map from the full row model so pinning a non-last sibling cannot
-  // invent a second separator just because that section only sees that row.
-  const rowModelRows = table.getRowModel().rows
-  const groupSeparatorInsets = useMemo(
-    () => (groupSeparators ? buildGroupSeparatorInsets(rowModelRows) : new Map<string, number>()),
-    [groupSeparators, rowModelRows]
-  )
-
-  function PinnedRow({
-    position,
-    row,
-  }: {
-    position: 'top' | 'bottom'
-    row: Row<any>
-  }) {
+  // Row pinning
+  function PinnedRow({ row, position }: { row: Row<any>; position: 'top' | 'bottom' }) {
     const customRowStyle = getRowStyle(rowStyling, row);
     const bottomRowsCount = table.getBottomRows().length;
-    const groupSeparatorInsetEm = groupSeparatorInsets.get(row.id)
-    const showGroupSeparator = groupSeparatorInsetEm !== undefined
 
     return (
       <tr
           className={classnames('pinned-row', {
-            'group-separator-row': showGroupSeparator,
             'pinned-row-bottom': position === 'bottom',
           })}
           style={{
@@ -199,9 +182,6 @@ export const RegularTableView = ({
                   : undefined,
             zIndex: '3',
             fontWeight: getFontWeight(customRowStyle),
-            ...(showGroupSeparator && {
-              ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
-            }),
           }}
       >
         <TableCellRenderer
@@ -218,13 +198,11 @@ export const RegularTableView = ({
     )
   }
 
-  const totalRows = pinnedRows ? table.getCenterRows() : rowModelRows
-  const topRows = pinnedRows ? table.getTopRows() : []
-  const bottomRows = pinnedRows ? table.getBottomRows() : []
+  const totalRows = pinnedRows ? table.getCenterRows() : table.getRowModel().rows
 
   return (
     <>
-      {topRows.map((row: Row<GenericObject>) => (
+      {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
         <PinnedRow key={row.id}
             position="top"
             row={row}
@@ -241,8 +219,6 @@ export const RegularTableView = ({
         // Use functions from RowUtils for consistent cell coloring
         const rowColor = getRowColorClass(row, inlineRowLoading || false);
         const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
-        const groupSeparatorInsetEm = groupSeparatorInsets.get(row.id)
-        const showGroupSeparator = groupSeparatorInsetEm !== undefined
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -258,20 +234,13 @@ export const RegularTableView = ({
             )}
 
             <tr
-                className={classnames(
-                  rowColor,
-                  row.depth > 0 && `depth-sub-row-${row.depth}`,
-                  showGroupSeparator && "group-separator-row"
-                )}
+                className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
                 ref={isFirstRegularRow ? sampleRowRef : null}
                 style={{
                   backgroundColor: customRowStyle?.backgroundColor,
                   color: customRowStyle?.fontColor,
                   fontWeight: getFontWeight(customRowStyle),
-                  ...(showGroupSeparator && {
-                    ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
-                  }),
                 }}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
@@ -311,7 +280,7 @@ export const RegularTableView = ({
           </React.Fragment>
         );
       })}
-      {bottomRows.map((row: Row<GenericObject>) => (
+      {pinnedRows && table.getBottomRows().map((row: Row<GenericObject>) => (
         <PinnedRow key={row.id}
             position="bottom"
             row={row}

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

@@ -105,7 +105,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       }
     };
     return (
-      <React.Fragment key={node.id}>
+      <>
         <Checkbox
             checked={allOn}
             indeterminate={!allOn && someOn}
@@ -120,7 +120,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
             child.children ? renderGroup(child) : renderLeaf(child.id, child.label),
           )}
         </Flex>
-      </React.Fragment>
+      </>
     );
   };
 // ------------ End of column visibility logic --------
@@ -143,47 +143,6 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
   const handleShouldClose = (shouldClose: boolean) =>
     setShowPopover(!shouldClose)
 
-  // Select All only changes columns listed in the popover that can be hidden.
-  // The first column and ids omitted by includeIds stay as they are.
-  // Skip the leaf walk unless the checkbox is enabled.
-  const selectAllRequested = columnVisibilityControl?.showSelectAll === true
-  const availableColumns = selectAllRequested
-    ? tree.flatMap(gatherLeafIds).flatMap((id) => {
-        const column = table.getColumn(id)
-        return column?.getCanHide() ? [column] : []
-      })
-    : []
-  const allAvailableVisible =
-    availableColumns.length > 0 &&
-    availableColumns.every((column) => column.getIsVisible())
-  const someAvailableVisible = availableColumns.some((column) => column.getIsVisible())
-  const showSelectAll = availableColumns.length > 0
-  const selectAllLabel = allAvailableVisible ? "Deselect All" : "Select All"
-
-  // Uses the same updater form as toggleVisibility, so onChange gets the same kind of value.
-  const handleSelectAllChange = () => {
-    const selectAllVisibility = Object.fromEntries(
-      availableColumns.map((column) => [column.id, !allAvailableVisible])
-    )
-    table.setColumnVisibility((previousVisibility: { [id: string]: boolean }) => ({
-      ...previousVisibility,
-      ...selectAllVisibility,
-    }))
-
-    if (columnVisibilityControl?.onColumnVisibilityChange) {
-      const nextVisibility = { ...table.getState().columnVisibility, ...selectAllVisibility }
-      // Same shape as the single toggles: root column ids, groups visible if any leaf is visible
-      const updatedVisibilityState = table.getAllColumns().reduce((
-        acc: { [id: string]: boolean },
-        column: { getLeafColumns: () => { id: string }[]; id: string }
-      ) => {
-        acc[column.id] = column.getLeafColumns().some((leaf) => nextVisibility[leaf.id] ?? true)
-        return acc
-      }, {})
-      columnVisibilityControl.onColumnVisibilityChange(updatedVisibilityState)
-    }
-  }
-
   const popoverReference = (
     <Tooltip
         placement="top"
@@ -238,25 +197,6 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
                   textAlign="center"
               />
               <SectionSeparator paddingBottom="xs" />
-              {showSelectAll && (
-                <>
-                  <Flex
-                      cursor="pointer"
-                      flexDirection="column"
-                      paddingX="xs"
-                  >
-                    <Checkbox
-                        aria={{ label: selectAllLabel }}
-                        checked={allAvailableVisible}
-                        indeterminate={!allAvailableVisible && someAvailableVisible}
-                        onChange={handleSelectAllChange}
-                        paddingBottom="xs"
-                        text={selectAllLabel}
-                    />
-                  </Flex>
-                  <SectionSeparator paddingBottom="xs" />
-                </>
-              )}
               {tree.map((node: VisibilityNode) => (
                 <Flex cursor="pointer"
                     flexDirection="column"

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useLayoutEffect, useMemo, useState } from "react"
+import React, { useContext, useLayoutEffect, useState, useEffect, useRef } from "react"
 import classnames from "classnames"
 import { flexRender, Cell, Row } from "@tanstack/react-table"
 import { VirtualItem } from "@tanstack/react-virtual"
@@ -7,7 +7,7 @@ import { GenericObject } from "../../types"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
-import { buildGroupSeparatorInsets, getRowColorClass } from "../Utilities/RowUtils"
+import { getRowColorClass } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -34,7 +34,6 @@ export const VirtualizedTableView = ({
 }: VirtualizedTableViewProps) => {
   const {
     enableToggleExpansion,
-    groupSeparators,
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
@@ -120,13 +119,6 @@ export const VirtualizedTableView = ({
     };
   }, [table, selectableRows, hasAnySubRows]);
 
-  // Memoize against scroll-driven re-renders; only rebuild when the row model changes.
-  const rowModelRows = table.getRowModel().rows
-  const groupSeparatorInsets = useMemo(
-    () => (groupSeparators ? buildGroupSeparatorInsets(rowModelRows) : new Map<string, number>()),
-    [groupSeparators, rowModelRows]
-  )
-
   // Safety check
   if (!virtualizer || !flattenedItems) {
     return (
@@ -188,17 +180,10 @@ export const VirtualizedTableView = ({
 
           // Use the utility function to get consistent row color
           const rowColor = getRowColorClass(row, inlineRowLoading || false);
-          const groupSeparatorInsetEm = groupSeparatorInsets.get(row.id)
-          const showGroupSeparator = groupSeparatorInsetEm !== undefined
 
           return (
             <tr
-                className={classnames(
-                  "virtualized-table-row",
-                  rowColor,
-                  row.depth > 0 && `depth-sub-row-${row.depth}`,
-                  showGroupSeparator && "group-separator-row"
-                )}
+                className={`virtualized-table-row ${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 data-index={virtualRow.index}
                 key={`row-${item.id}-sort-${sortingState}`}
                 ref={(node) => {
@@ -210,12 +195,7 @@ export const VirtualizedTableView = ({
                     }
                   }
                 }}
-                style={{
-                  ...virtualItemStyle,
-                  ...(showGroupSeparator && {
-                    ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
-                  }),
-                }}
+                style={virtualItemStyle}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -32,7 +32,6 @@ export const TableHeader = ({
   ...props
 }: TableHeaderProps) => {
   const {
-    columnVisibilityControl,
     enableToggleExpansion,
     handleExpandOrCollapse,
     loading,
@@ -64,40 +63,11 @@ export const TableHeader = ({
     `${responsive === "scroll" && "pinned-left"}`,
   );
 
-  // TanStack drops header rows when every leaf in a group is hidden.
-  // Spacer rows keep that height only when Select All can hide a whole group.
-  const showSelectAll = columnVisibilityControl?.showSelectAll === true
-  let hiddenHeaderRowCount = 0
-  let spacerColSpan = 0
-  if (showSelectAll) {
-    const columnHeaderDepth = Math.max(
-      ...table.getAllFlatColumns().map((column: GenericObject) => column.depth + 1)
-    )
-    hiddenHeaderRowCount = columnHeaderDepth - table.getHeaderGroups().length
-    spacerColSpan = table.getVisibleLeafColumns().length + (!hasAnySubRows && selectableRows ? 1 : 0)
-  }
-
-  const renderSpacerRows = (rowClassName?: string) =>
-    Array.from({ length: Math.max(0, hiddenHeaderRowCount) }, (_, index) => (
-      <tr
-          aria-hidden="true"
-          className={classnames("header-spacer-row", rowClassName)}
-          key={`header-spacer-${index}`}
-      >
-        {/* header-spacer-cell stays off .table-header-cells so width measurement and sticky-left styles skip it. */}
-        <th
-            className="header-spacer-cell"
-            colSpan={spacerColSpan}
-        />
-      </tr>
-    ))
-
   const renderRegularTableHeader = () => (
     <thead className={classes}
         id={id}
         ref={headerRef}
     >
-      {renderSpacerRows()}
       {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
         <tr key={`${headerGroup.id}-headerGroup`}>
           {!hasAnySubRows && selectableRows && (
@@ -139,7 +109,6 @@ export const TableHeader = ({
         id={id}
         ref={headerRef}
     >
-      {renderSpacerRows("virtualized-header-row-header")}
       {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
         <tr
             className="virtualized-header-row-header"

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -53,35 +53,6 @@ export const getFontWeight = (rowStyle?: GenericObject) => {
   if (rowStyle?.fontWeight === "regular") return 400
 }
 
-// Matches the `left` of the nth collapsible-trail (see CollapsibleTrail.tsx).
-const getCollapsibleTrailLeftEm = (trailIndex: number): number =>
-  trailIndex * 1.0 + (trailIndex > 1 ? (trailIndex - 1) * 0.25 : 0)
-
-/**
- * One O(n) pass over the full visible row model → Map of row id to its
- * `--group-separator-inset` (em). Call once (and memoize) for the whole table —
- * do not rebuild per pinned section, or a pinned non-last sibling can look like
- * a last sibling and invent a second separator.
- *
- * A row closes every group between its depth and the next visible row's depth
- * (so expanded parents defer to their last visible descendant, and sort/filter
- * is respected). One stroke is drawn, inset to the outermost closed group:
- * year-level → 0 / full-bleed, otherwise that group's collapsible-trail.
- */
-export const buildGroupSeparatorInsets = (
-  visibleRows: Row<GenericObject>[]
-): Map<string, number> => {
-  const insets = new Map<string, number>()
-
-  visibleRows.forEach((row, index) => {
-    if (row.depth === 0) return
-    const nextDepth = visibleRows[index + 1]?.depth ?? 0
-    if (nextDepth >= row.depth) return
-    insets.set(row.id, nextDepth === 0 ? 0 : getCollapsibleTrailLeftEm(nextDepth + 1))
-  })
-  return insets
-}
-
 /**
  * Creates a virtual item style object for virtualized rows
  */

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

@@ -15,8 +15,6 @@
 
   // Base vertical border color variable setup
   --column-border-color: #{$border_light};
-  --group-separator-color: #{$input_border_default};
-  --group-separator-row-border-color: #{$border_light};
 
   // Define color tokens once
   $border_color_options: (
@@ -251,10 +249,6 @@
     th[colspan]:not([colspan="1"]) {
       border-right: 1px solid $border_light !important;
     }
-    // Spacer rows have no text, so give them one line of header height.
-    .header-spacer-cell::before {
-      content: "\00a0";
-    }
     .table-header-cells-custom {
       text-align: center;
       [class^="pb_checkbox_kit"] .pb_checkbox_label {
@@ -530,48 +524,6 @@
     border-bottom-color: $border_light !important;
   }
 
-  // 2px group separator on last sibling of each nested group. It replaces the
-  // default border-bottom: the border goes transparent and the stroke paints
-  // over its spot, with a 1px default line underneath for any part left of
-  // --group-separator-inset (0 = year-level full-bleed). Rails:
-  // .group-separator-expanded defers to the leaf.
-  tr.group-separator-row:not(.group-separator-expanded) {
-    > td,
-    > .pb_table_td {
-      border-bottom-color: transparent !important;
-      background-image:
-        linear-gradient(var(--group-separator-color), var(--group-separator-color)),
-        linear-gradient(var(--group-separator-row-border-color), var(--group-separator-row-border-color));
-      // Padding-box origin so the inset matches the trails' `left` (a first-cell
-      // border-left would otherwise shift the stroke 1px past its trail); the
-      // +1px pushes both layers down over the 1px bottom border.
-      background-origin: padding-box;
-      background-position: 0 calc(100% + 1px), 0 calc(100% + 1px);
-      background-repeat: no-repeat;
-      background-size: 100% 2px, 100% 1px;
-      // Table hover sets `transition: all` on cells, which slides the stroke in
-      // from the top when a row becomes a separator. Keep only the hover border fade.
-      transition-property: border-color !important;
-    }
-
-    > td:first-child:not(.checkbox-cell),
-    > .pb_table_td:first-child:not(.checkbox-cell),
-    > td.checkbox-cell + td,
-    > td.checkbox-cell + .pb_table_td {
-      background-position: var(--group-separator-inset, 0em) calc(100% + 1px), 0 calc(100% + 1px);
-      background-size: calc(100% - var(--group-separator-inset, 0em)) 2px, 100% 1px;
-
-      // Trails left of the inset belong to groups that stay open, so they run
-      // through; trails at or past it stop on top of the stroke, which rises
-      // 1px above the (now transparent) border (0 or 1px).
-      // Avoid `* 1000` inside this clamp: dart-sass strips the calc() and leaves
-      // `(var() - var()) * 1000`, which SassC rejects when nitro recompiles playbook.css.
-      .collapsible-trail {
-        bottom: clamp(0px, calc(var(--collapsible-trail-left, 0em) - var(--group-separator-inset, 0em) + 1px), 1px);
-      }
-    }
-  }
-
   // Apply border colors when columnGroupBorderColor is set
   &[class*="column-group-border-"] {
     // For top-level column groups
@@ -837,8 +789,6 @@
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};
-    --group-separator-color: #{$input_border_default_dark};
-    --group-separator-row-border-color: #{$border_dark};
 
     // Dark mode default border colors for trails and horizontal borders
     .collapsible-trail {
@@ -850,26 +800,6 @@
       border-bottom-color: $border_dark !important;
     }
 
-    // table-dark sets `border-color: … !important` (rest + hover), and
-    // column-group-border sets `.toggle-content td { border-bottom: … !important }`.
-    // Those beat the shared separator rule, so the opaque border paints over the
-    // 2px stroke. Reassert transparent bottom with higher specificity.
-    .pb_table.dark,
-    .pb_table.table-dark {
-      tbody > tr.group-separator-row:not(.group-separator-expanded),
-      .pb_table_tbody > .pb_table_tr.group-separator-row:not(.group-separator-expanded) {
-        > td,
-        > .pb_table_td {
-          border-bottom-color: transparent !important;
-        }
-
-        &:hover > td,
-        &:hover > .pb_table_td {
-          border-bottom-color: transparent !important;
-        }
-      }
-    }
-
     .pb-bg-row-white {
       background: $bg_dark_card;
     }
@@ -878,22 +808,21 @@
       background: $bg_dark;
     }
 
-    // Dark mode virtualized rows — use background-color (not the background
-    // shorthand) so group-separator background-image is not cleared.
+    // Dark mode virtualized rows
     .virtualized-table-row {
       &.pb-bg-row-white {
-        background-color: $bg_dark_card !important;
+        background: $bg_dark_card !important;
 
         td:first-child {
-          background-color: $bg_dark_card !important;
+          background: $bg_dark_card !important;
         }
       }
 
       &.bg-silver {
-        background-color: $bg_dark;
+        background: $bg_dark;
 
         td:first-child {
-          background-color: $bg_dark;
+          background: $bg_dark;
         }
       }
     }

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

@@ -37,7 +37,6 @@ type AdvancedTableProps = {
   expandByDepth?: GenericObject[]
   onExpandByDepthClick?: (arg: number, arg1: any) => void
   fullWidthCell?: boolean
-  groupSeparators?: boolean
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   initialLoadingRowsCount?: number
@@ -101,7 +100,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     expandByDepth,
     onExpandByDepthClick,
     fullWidthCell = false,
-    groupSeparators = false,
     htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
@@ -328,7 +326,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             expandByDepth={expandByDepth}
             expanded={expanded}
             expandedControl={expandedControl}
-            groupSeparators={groupSeparators}
             handleExpandOrCollapse={handleExpandOrCollapse}
             hasAnySubRows={hasAnySubRows}
             inlineRowLoading={inlineRowLoading}

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

@@ -12,7 +12,7 @@
       <% content.presence %>
     <% else %>
       <%= pb_rails("advanced_table/table_header", props: { table_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, inline_row_loading: object.inline_row_loading, persist_toggle_expansion_button: object.persist_toggle_expansion_button, table_data: object.table_data }) %>
-      <%= pb_rails("advanced_table/table_body", props: { table_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, inline_row_loading: object.inline_row_loading, full_width_cell: object.full_width_cell, group_separators: object.group_separators, pinned_rows: object.pinned_rows }) %>
+      <%= pb_rails("advanced_table/table_body", props: { table_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, inline_row_loading: object.inline_row_loading, full_width_cell: object.full_width_cell, pinned_rows: object.pinned_rows }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -37,19 +37,11 @@ module Playbook
                                 default: false
       prop :full_width_cell, type: Playbook::Props::Boolean,
                              default: false
-      prop :group_separators, type: Playbook::Props::Boolean,
-                              default: false
       prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
                                              default: false
       prop :pinned_rows, type: Playbook::Props::HashProp,
                          default: {}
 
-      # Marker for Rails JS: only toggle group-separator-expanded when this is set.
-      # Use merge (not tap/mutate) so we don't write onto the shared default {} or a caller-owned data hash.
-      def data
-        Hash(prop(:data)).merge(group_separators ? { group_separators: true } : {})
-      end
-
       def classname
         additional_classes = [
           responsive_classname,