playbook_ui 16.9.0.pre.alpha.touchdragmulticontainers17271 → 16.9.0.pre.alpha.typeaheaddraggablepills16995

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68c5efbb867c4afb1698ad5d63b0280a6a93aa798f60f2e974ac82beab57232e
-  data.tar.gz: 63e67402a6e5a31443575dbf19f2710f4c4ff397013d82cbc9515cb8193dcec8
+  metadata.gz: 7a84cb51d7be77ac0d75a6df6b3c1cbec0d4a67ee51ec7b920ca1d198571d732
+  data.tar.gz: d55f43c6412c9d19c9bd6874df9e0c3616a0666315eaf5f7e5ce15c178bdfca8
 SHA512:
-  metadata.gz: eeed97fa95a5195c7c9c15a500508e67fd5010f1d8a753df55cc6b0bee173a83cd7b202eb7d110cba69b2d7500d7c3df8ab552fa0482e3da779e969f09ae6289
-  data.tar.gz: 85126a6b3965ec648c12b6557b7ea1b562fc797d52b7191d6305d3f4eb1a4faba78da313da747719d9328115d7d560ef1aec736db2441b8084b1c1eb6cf61838
+  metadata.gz: c80dbf093eaec7adc049d90d4a2d85e9e6b6fec506cb066f936a9ccf47074c42222fda0d9a368faccfff1653f42607427a5c88fdfcbdf9d101b8d6d54989086c
+  data.tar.gz: bf7e63be9a5a44694af5893ecb30145e7f2e790581fe67f7839921485eff18bff0e67a701c58fd0f37d739144571b68ed7c775ad4e01379f09639b3463c968fd

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

@@ -136,7 +136,6 @@ export const RegularTableView = ({
     pinnedRows,
     headerHeight,
     rowHeight,
-    actionBarHeight,
     rowStyling = [],
     sampleRowRef,
   } = useContext(AdvancedTableContext)
@@ -173,7 +172,7 @@ export const RegularTableView = ({
             position: 'sticky',
             top:
               row.getIsPinned() === 'top'
-                  ? `${row.getPinnedIndex() * rowHeight + headerHeight + actionBarHeight}px`
+                  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
                   : undefined,
             zIndex: '3'
           }}

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

@@ -17,7 +17,6 @@ import {
   showActionBar,
   hideActionBar,
 } from "../Utilities/ActionBarAnimationHelper";
-import { scheduleStickyActionBarHeightUpdate } from "../Utilities/StickyLayoutHelper";
 import { GenericObject } from "../../types";
 
 interface TableActionBarProps {
@@ -40,7 +39,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
   type = "row-selection",
 }) => {
   const cardRef = useRef(null);
-  const { table, columnVisibilityControl, columnDefinitions, tableContainerRef } =
+  const { table, columnVisibilityControl, columnDefinitions } =
     useContext(AdvancedTableContext);
 
   // ----------- Column visibility logic -----------
@@ -132,10 +131,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       } else {
         hideActionBar(cardRef.current);
       }
-
-      scheduleStickyActionBarHeightUpdate(tableContainerRef?.current ?? null);
     }
-  }, [isVisible, type, tableContainerRef]);
+  }, [isVisible, type]);
 
   const [showPopover, setShowPopover] = useState(false)
 

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -4,7 +4,6 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { Row } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { getRowHeightEstimate } from '../Utilities/TableContainerStyles';
-import { measureElementHeight } from '../Utilities/StickyLayoutHelper';
 
 const AdvancedTableContext = createContext<any>({});
 
@@ -31,11 +30,8 @@ export const AdvancedTableProvider = ({ children, ...props }: {
   
   const [headerHeight, setHeaderHeight] = useState(44);
   const [rowHeight, setRowHeight] = useState(38);
-  const [actionBarHeight, setActionBarHeight] = useState(0);
 
   const measureHeights = useCallback(() => {
-    const wrapper = (props.tableContainerRef?.current || tableContainerRef.current) as HTMLElement | null;
-
     if (headerRef.current) {
       const headerElement = headerRef.current as HTMLElement;
       const headerRect = headerElement.getBoundingClientRect();
@@ -49,21 +45,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
         setRowHeight(rowRect.height);
       }
     }
-
-    if (wrapper) {
-      const actionBar = wrapper.querySelector(
-        ".row-selection-actions-card.is-visible, .row-selection-actions-card.show-action-card"
-      ) as HTMLElement | null;
-      const measuredActionBarHeight = actionBar
-        ? measureElementHeight(actionBar)
-        : 0;
-      setActionBarHeight(measuredActionBarHeight);
-      wrapper.style.setProperty(
-        "--advanced-table-action-bar-height",
-        `${measuredActionBarHeight}px`
-      );
-    }
-  }, [props.tableContainerRef]);
+  }, []);
 
   useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
@@ -74,12 +56,6 @@ export const AdvancedTableProvider = ({ children, ...props }: {
       resizeObserver.observe(headerRef.current);
     }
 
-    const wrapper = (props.tableContainerRef?.current || tableContainerRef.current) as HTMLElement | null;
-    const actionBar = wrapper?.querySelector(".row-selection-actions-card");
-    if (actionBar) {
-      resizeObserver.observe(actionBar);
-    }
-
     if (sampleRowRef.current) {
       resizeObserver.observe(sampleRowRef.current);
     }
@@ -96,7 +72,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   useEffect(() => {
     measureHeights();
-  }, [table?.getRowModel().rows.length, headerGroupCount, props.isActionBarVisible, measureHeights]);
+  }, [table?.getRowModel().rows.length, headerGroupCount, measureHeights]);
 
 
   // Create a flattened data array that includes ALL components for virtualization
@@ -226,7 +202,6 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     keepPinnedRows: props.keepPinnedRows,
     headerHeight,
     rowHeight,
-    actionBarHeight,
     headerRef,
     sampleRowRef,
     measureHeights,

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

@@ -364,34 +364,6 @@
     }
   }
 
-  &.advanced-table-sticky-header {
-    .row-selection-actions-card.show-action-card,
-    .row-selection-actions-card.is-visible {
-      background-color: $white;
-      left: 0;
-      position: sticky;
-      top: 0;
-      z-index: 5;
-    }
-
-    .pb_table.sticky-header {
-      thead,
-      .pb_advanced_table_header {
-        top: var(--advanced-table-action-bar-height, 0px);
-        z-index: 3;
-      }
-    }
-
-    &.hidden-action-bar {
-      .pb_table.sticky-header {
-        thead,
-        .pb_advanced_table_header {
-          top: 0;
-        }
-      }
-    }
-  }
-
   // Max height overflow - the below prevents expansion from overflowing container at full screen for responsive and nonresponsive tables
   &.advanced-table-max-height-xs {
     max-height: 320px;
@@ -462,7 +434,7 @@
       thead,
       .pb_advanced_table_header {
         position: sticky !important;
-        top: calc(44px + var(--advanced-table-action-bar-height, 0px)) !important;
+        top: 44px !important;
         z-index: $z_10;
       }
     }
@@ -1015,13 +987,6 @@
       background-color: $bg_dark_card;
     }
 
-    &.advanced-table-sticky-header {
-      .row-selection-actions-card.show-action-card,
-      .row-selection-actions-card.is-visible {
-        background-color: $bg_dark_card;
-      }
-    }
-
     .loading-toggle-icon,
     .loading-cell {
       &::after {

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

@@ -18,7 +18,6 @@ import TableActionBar from "./Components/TableActionBar";
 
 import { useTableState } from "./Hooks/useTableState";
 import { useTableActions } from "./Hooks/useTableActions";
-import { updateStickyLayoutHeights, scheduleStickyActionBarHeightUpdate } from "./Utilities/StickyLayoutHelper";
 
 import Card from "../pb_card/_card"
 import Flex from "../pb_flex/_flex"
@@ -284,33 +283,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   // Visibility flag for action bar
   const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
-  const isStickyHeader = Boolean(tableProps?.sticky);
-
-  useEffect(() => {
-    if (!isStickyHeader || !tableWrapperRef.current) return;
-
-    const wrapper = tableWrapperRef.current;
-    const updateHeights = () => updateStickyLayoutHeights(wrapper);
-
-    updateHeights();
-    scheduleStickyActionBarHeightUpdate(wrapper);
-
-    const resizeObserver = new ResizeObserver(updateHeights);
-    resizeObserver.observe(wrapper);
-
-    const actionBar = wrapper.querySelector(".row-selection-actions-card");
-    if (actionBar) {
-      resizeObserver.observe(actionBar);
-    }
-
-    const table = wrapper.querySelector("table.pb_table");
-    const thead = table?.querySelector("thead");
-    if (thead) {
-      resizeObserver.observe(thead);
-    }
-
-    return () => resizeObserver.disconnect();
-  }, [isStickyHeader, isActionBarVisible, columnDefinitions, tableData]);
 
   const classes = classnames(
     buildCss("pb_advanced_table"),
@@ -323,7 +295,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
-    { 'advanced-table-sticky-header': isStickyHeader },
     { 'advanced-table-no-table-container': noTableCardContainer },
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
     scrollBarNone ? 'advanced-table-hide-scrollbar' : '',

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

@@ -46,7 +46,6 @@ module Playbook
           max_height_classname,
           hide_scroll_bar_class,
           hidden_action_bar_class,
-          sticky_header_class,
         ]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
         additional_classes << "advanced-table-no-table-container" if no_table_card_container?
@@ -76,12 +75,6 @@ module Playbook
         selectable_rows && !is_action_bar_visible ? "hidden-action-bar" : ""
       end
 
-      def sticky_header_class
-        return "" unless table_props.is_a?(Hash)
-
-        table_props[:sticky] || table_props["sticky"] ? "advanced-table-sticky-header" : ""
-      end
-
       def selected_rows
         @selected_rows ||= []
       end

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -418,56 +418,6 @@ test("tableProps prop functions as expected", () => {
   const kit = screen.getByTestId(testId)
   const table = kit.querySelector('table')
   expect(table).toHaveClass("pb_table table-sm table-responsive-none data_table sticky-header ns_tabular")
-  expect(kit).toHaveClass("advanced-table-sticky-header")
-})
-
-test("sticky header with column visibility control offsets layout heights", async () => {
-  const columnDefsWithIds = columnDefinitions.map((col) => ({
-    ...col,
-    id: col.accessor,
-  }))
-
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefsWithIds}
-        columnVisibilityControl={{ default: true }}
-        data={{ testid: testId }}
-        responsive="none"
-        tableData={MOCK_DATA}
-        tableProps={{ sticky: true }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("advanced-table-sticky-header")
-  expect(kit).not.toHaveClass("hidden-action-bar")
-
-  const actionBar = kit.querySelector(".row-selection-actions-card.show-action-card")
-  expect(actionBar).toBeInTheDocument()
-
-  await waitFor(() => {
-    expect(kit.style.getPropertyValue("--advanced-table-action-bar-height")).toMatch(/^\d+px$/)
-  })
-})
-
-test("sticky header without column visibility control keeps zero action bar offset", async () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        responsive="none"
-        tableData={MOCK_DATA}
-        tableProps={{ sticky: true }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("advanced-table-sticky-header")
-  expect(kit).not.toHaveClass("hidden-action-bar")
-
-  await waitFor(() => {
-    expect(kit.style.getPropertyValue("--advanced-table-action-bar-height")).toBe("0px")
-  })
 })
 
 test("enableExpansionIcon changes icon", () => {

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

@@ -1,44 +1,26 @@
-import {
-  scheduleStickyActionBarHeightUpdate,
-  updateStickyActionBarHeight,
-} from "./Utilities/StickyLayoutHelper";
-
-// Card kit defaults to `transition-property: all`, which can animate height/opacity
-// during expand/collapse. Limit transitions to decorative properties only.
-const ACTION_BAR_TRANSITION_PROPERTIES = "border-color, box-shadow";
-
 function showActionBar(actionBar, selectedCount) {
   // Get container
   const tableContainer = actionBar.closest('.pb_advanced_table');
 
-  // Update the count before measuring height so the label is included on first show
-  const countElement = actionBar.querySelector(".selected-count");
-  if (countElement) {
-    countElement.textContent = `${selectedCount} Selected`;
-  }
-
-  // Expand without animating height so sticky offsets measure the final size
-  actionBar.style.transitionProperty = "none";
+  // Show action bar directly
+  actionBar.style.height = "auto";
   actionBar.style.overflow = "visible";
   actionBar.style.opacity = "1";
+  actionBar.style.transitionProperty = "all";
+  actionBar.style.transitionTimingFunction = "ease-in-out";
   actionBar.classList.remove("p_none");
   actionBar.classList.add("p_xs", "is-visible", "show-action-card");
-  actionBar.style.height = "auto";
-
-  // Force layout so padding/content are included before measuring
-  void actionBar.offsetHeight;
-
-  const expandedHeight = actionBar.scrollHeight;
-  actionBar.style.height = `${expandedHeight}px`;
 
   // Remove hidden-action-bar class when action bar is shown
   if (tableContainer) {
     tableContainer.classList.remove("hidden-action-bar");
-    updateStickyActionBarHeight(tableContainer);
-    scheduleStickyActionBarHeightUpdate(tableContainer);
   }
 
-  actionBar.style.transitionProperty = ACTION_BAR_TRANSITION_PROPERTIES;
+  // Update the count
+  const countElement = actionBar.querySelector(".selected-count");
+  if (countElement) {
+    countElement.textContent = `${selectedCount} Selected`;
+  }
 }
 
 function hideActionBar(actionBar) {
@@ -46,7 +28,6 @@ function hideActionBar(actionBar) {
   const tableContainer = actionBar.closest('.pb_advanced_table');
 
   // Hide action bar directly
-  actionBar.style.transitionProperty = "none";
   actionBar.style.height = "0px";
   actionBar.style.overflow = "hidden";
   actionBar.style.opacity = "0";
@@ -56,10 +37,7 @@ function hideActionBar(actionBar) {
   // Add hidden-action-bar class when action bar is hidden
   if (tableContainer) {
     tableContainer.classList.add("hidden-action-bar");
-    updateStickyActionBarHeight(tableContainer);
   }
-
-  actionBar.style.transitionProperty = ACTION_BAR_TRANSITION_PROPERTIES;
 }
 
 export function updateSelectionActionBar(table, selectedCount) {

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

@@ -1,6 +1,6 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
-import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
 import colors from '../../tokens/exports/_colors.module.scss'
 
 
@@ -55,7 +55,7 @@ const rowStyling = [
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           rowStyling={rowStyling}
-          tableData={MOCK_DATA_WITH_ID}
+          tableData={MOCK_DATA}
           {...props}
       />
     </div>

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

@@ -1,39 +1,47 @@
 <% column_definitions = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    accessor: "newEnrollments",
-    label: "New Enrollments",
-  },
-  {
-    accessor: "scheduledMeetings",
-    label: "Scheduled Meetings",
-  },
-  {
-    accessor: "attendanceRate",
-    label: "Attendance Rate",
-  },
-  {
-    accessor: "completedClasses",
-    label: "Completed Classes",
-  },
-  {
-    accessor: "classCompletionRate",
-    label: "Class Completion Rate",
-  },
-  {
-    accessor: "graduatedStudents",
-    label: "Graduated Students",
-  },
+    {
+      accessor: "year",
+      label: "Year",
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
 ] %>
 
-<%= pb_rails("advanced_table", props: {
-  id: "table_props_sticky_table",
-  table_data: @table_data,
-  column_definitions: column_definitions,
-  max_height: "xs",
-  table_props: { sticky: true },
-}) %>
+<% table_data = 15.times.map do |index|
+  {
+    year: (2020 + index).to_s,
+    id: (2020 + index).to_s,
+    newEnrollments: (20 + index).to_s,
+    scheduledMeetings: (10 + index).to_s,
+    attendanceRate: "#{50 + index}%",
+    completedClasses: (3 + index).to_s,
+    classCompletionRate: "#{30 + index}%",
+    graduatedStudents: (19 + index).to_s,
+  }
+end %>
+
+<div style="max-height: 320px; overflow-y: auto;">
+  <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
+</div>

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

@@ -1,13 +1,21 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const tableData = Array.from({ length: 15 }, (_, index) => ({
+  year: String(2020 + index),
+  newEnrollments: String(20 + index),
+  scheduledMeetings: String(10 + index),
+  attendanceRate: `${50 + index}%`,
+  completedClasses: String(3 + index),
+  classCompletionRate: `${30 + index}%`,
+  graduatedStudents: String(19 + index),
+}))
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -36,17 +44,18 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   ]
 
   const tableProps = {
-    sticky: true,
+    sticky: true
   }
 
   return (
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        maxHeight="xs"
-        tableData={MOCK_DATA}
-        tableProps={tableProps}
-        {...props}
-    />
+    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={tableData}
+          tableProps={tableProps}
+          {...props}
+      />
+    </div>
   )
 }
 

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

@@ -2,6 +2,10 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
+Scroll inside the table preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
+
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

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

@@ -1,7 +1,9 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
 
-**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
+**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
 
-Expand the table above to see this in action.
+This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
+
+Expand the table above to see responsive behavior in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.

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

@@ -1,11 +1,6 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
 import { setArrowVisibility, toggleVisibility } from "../utilities/domHelpers";
-import {
-  updateStickyActionBarHeight as measureStickyActionBarHeight,
-  updateStickyHeaderRowHeights as measureStickyHeaderRowHeights,
-  updateStickyLayoutHeights,
-} from "./Utilities/StickyLayoutHelper";
 
 const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
 const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
@@ -201,7 +196,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (table.dataset.pbAdvancedTableInitialized) return;
     table.dataset.pbAdvancedTableInitialized = "true";
 
-    // Measure header/action bar height so sticky offsets stay accurate.
+    // Measure header height so pinned rows don't overlap when header wraps (e.g. mobile)
     if (mainTable) {
       PbAdvancedTable.updateStickyHeaderRowHeights(mainTable);
       const resizeObserver = new ResizeObserver(() => {
@@ -209,12 +204,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         PbAdvancedTable.updatePinnedRowsStickyTops(mainTable);
       });
       resizeObserver.observe(table);
-
-      const actionBar = mainTable.querySelector(".row-selection-actions-card");
-      if (actionBar) {
-        resizeObserver.observe(actionBar);
-      }
-
       mainTable._advancedTableHeaderResizeObserver = resizeObserver;
     }
 
@@ -348,11 +337,32 @@ export default class PbAdvancedTable extends PbEnhancedElement {
    * multi-row sticky headers use the correct offset. Re-run when header wraps (e.g. mobile).
    */
   static updateStickyHeaderRowHeights(advancedTableWrapper) {
-    measureStickyHeaderRowHeights(advancedTableWrapper);
-  }
-
-  static updateStickyActionBarHeight(advancedTableWrapper) {
-    return measureStickyActionBarHeight(advancedTableWrapper);
+    if (!advancedTableWrapper) return;
+    const table = advancedTableWrapper.querySelector("table.pb_table");
+    const thead = table?.querySelector("thead");
+    if (!thead) return;
+
+    const rows = Array.from(thead.querySelectorAll("tr"));
+    let totalHeight = 0;
+    rows.forEach((tr, index) => {
+      const h = tr.offsetHeight;
+      if (index === 0) {
+        advancedTableWrapper.style.setProperty(
+          "--advanced-table-header-row-0-height",
+          `${h}px`
+        );
+      } else if (index === 1) {
+        advancedTableWrapper.style.setProperty(
+          "--advanced-table-header-row-1-height",
+          `${h}px`
+        );
+      }
+      totalHeight += h;
+    });
+    advancedTableWrapper.style.setProperty(
+      "--advanced-table-header-height",
+      `${totalHeight}px`
+    );
   }
 
   /**
@@ -368,8 +378,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       (tr) => tr.style.display !== "none" && tr.offsetParent !== null
     );
 
-    const headerOffset =
-      "calc(var(--advanced-table-header-height, 44px) + var(--advanced-table-action-bar-height, 0px))";
+    const headerOffset = "var(--advanced-table-header-height, 44px)";
     visibleRows.forEach((tr, index) => {
       tr.style.top = `calc(${headerOffset} + 2.5em * ${index})`;
     });
@@ -580,7 +589,7 @@ window.expandAllSubRows = (element, rowDepth) => {
 // Fix header height and pinned row sticky tops on load (header wrap + collapsed rows)
 function updateAllAdvancedTableStickyHeights() {
   document.querySelectorAll(".pb_advanced_table").forEach((wrapper) => {
-    updateStickyLayoutHeights(wrapper);
+    PbAdvancedTable.updateStickyHeaderRowHeights(wrapper);
     PbAdvancedTable.updatePinnedRowsStickyTops(wrapper);
   });
 }

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

@@ -230,7 +230,7 @@ module Playbook
 
       # Build inline style for sticky pinned row (matches React). Pass via html_options so the tr gets the attribute.
       def build_pinned_row_style(pinned_index, background: "white")
-        header_offset = "calc(var(--advanced-table-header-height, 44px) + var(--advanced-table-action-bar-height, 0px))"
+        header_offset = "var(--advanced-table-header-height, 44px)"
         row_offset = "calc(2.5em * #{pinned_index})"
         "position: sticky; top: calc(#{header_offset} + #{row_offset}); z-index: 3; background: #{background};"
       end