playbook_ui 16.9.0.pre.alpha.PLAY3011datepickertimepickerportalling17140 → 16.9.0.pre.alpha.PLAY3027advancedtablestickyactioncolumnvisbar17109

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 33a9d2e80c1caf913c3ffe776626ca4fc00a3e8b9c84a9e61c4eb51a35d7213a
-  data.tar.gz: d9f4a72a0aafe754b769792dd29c4a253a864d888f9ca23fb50246a18c62e23a
+  metadata.gz: 1170d3e8d9859ad6a2009997a4730ba0d2e1e2c11dbe075bb4c2ebddd4fb7c62
+  data.tar.gz: d5e4f2cdc2bae585c702408327de2759a46991209b0c21ef9fee0107875ec948
 SHA512:
-  metadata.gz: a993c299c8c01eda50f73f47d27b412d52258306269b6b898b0e8bd99abd0db7b2151a43327bf57344b9ce73a6bd8027978d5cd3a171803fe21f0f98cac17faa
-  data.tar.gz: 630b1cebfebf664f4659d5e9112bb3d192e8dcae8ba3b22a48756d7894da60d047a29ab7e176bb2304982176d7a3978cb1e6eb9d35a560b59965ae3fe6a827b7
+  metadata.gz: be6b4ea315a20a436bc9f8fc4ea13cccbdcd09f69400cbdc52c124fabc85276617e8c4067da8433e85a155003658daf54656b71db2c32a0528b0262a150d7d05
+  data.tar.gz: 99171bbc5a8d3b9cfea7b3521d4b151dcd3a57293b6439b953f9417cfee3c3c000aea61bec26b5474e7e8c4589acf89ce10ec0d376ed8a248156f1bdc891ec73

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

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

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

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

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

@@ -4,6 +4,7 @@ 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>({});
 
@@ -30,8 +31,11 @@ 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();
@@ -45,7 +49,21 @@ 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(() => {
@@ -56,6 +74,12 @@ 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);
     }
@@ -72,7 +96,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   useEffect(() => {
     measureHeights();
-  }, [table?.getRowModel().rows.length, headerGroupCount, measureHeights]);
+  }, [table?.getRowModel().rows.length, headerGroupCount, props.isActionBarVisible, measureHeights]);
 
 
   // Create a flattened data array that includes ALL components for virtualization
@@ -202,6 +226,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     keepPinnedRows: props.keepPinnedRows,
     headerHeight,
     rowHeight,
+    actionBarHeight,
     headerRef,
     sampleRowRef,
     measureHeights,

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

@@ -0,0 +1,100 @@
+const VISIBLE_ACTION_BAR_SELECTOR =
+  ".row-selection-actions-card.is-visible, .row-selection-actions-card.show-action-card";
+
+const ACTION_BAR_HEIGHT_TRANSITION_MS = 350;
+
+export const measureElementHeight = (element: HTMLElement): number => {
+  const { height: rectHeight } = element.getBoundingClientRect();
+  const scrollHeight = element.scrollHeight;
+  const offsetHeight = element.offsetHeight;
+
+  return Math.ceil(Math.max(rectHeight, scrollHeight, offsetHeight));
+};
+
+export const updateStickyActionBarHeight = (
+  advancedTableWrapper: HTMLElement | null
+): number => {
+  if (!advancedTableWrapper) return 0;
+
+  const actionBar = advancedTableWrapper.querySelector(
+    VISIBLE_ACTION_BAR_SELECTOR
+  ) as HTMLElement | null;
+
+  if (!actionBar) {
+    advancedTableWrapper.style.setProperty(
+      "--advanced-table-action-bar-height",
+      "0px"
+    );
+    return 0;
+  }
+
+  const actionBarHeight = measureElementHeight(actionBar);
+
+  advancedTableWrapper.style.setProperty(
+    "--advanced-table-action-bar-height",
+    `${actionBarHeight}px`
+  );
+
+  return actionBarHeight;
+};
+
+export const scheduleStickyActionBarHeightUpdate = (
+  advancedTableWrapper: HTMLElement | null
+): void => {
+  if (!advancedTableWrapper) return;
+
+  updateStickyActionBarHeight(advancedTableWrapper);
+
+  requestAnimationFrame(() => {
+    updateStickyActionBarHeight(advancedTableWrapper);
+    requestAnimationFrame(() => {
+      updateStickyActionBarHeight(advancedTableWrapper);
+    });
+  });
+
+  window.setTimeout(() => {
+    updateStickyActionBarHeight(advancedTableWrapper);
+  }, ACTION_BAR_HEIGHT_TRANSITION_MS);
+};
+
+export const updateStickyHeaderRowHeights = (
+  advancedTableWrapper: HTMLElement | null
+): void => {
+  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 height = tr.offsetHeight;
+    if (index === 0) {
+      advancedTableWrapper.style.setProperty(
+        "--advanced-table-header-row-0-height",
+        `${height}px`
+      );
+    } else if (index === 1) {
+      advancedTableWrapper.style.setProperty(
+        "--advanced-table-header-row-1-height",
+        `${height}px`
+      );
+    }
+    totalHeight += height;
+  });
+
+  advancedTableWrapper.style.setProperty(
+    "--advanced-table-header-height",
+    `${totalHeight}px`
+  );
+
+  updateStickyActionBarHeight(advancedTableWrapper);
+};
+
+export const updateStickyLayoutHeights = (
+  advancedTableWrapper: HTMLElement | null
+): void => {
+  updateStickyHeaderRowHeights(advancedTableWrapper);
+};

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

@@ -364,6 +364,34 @@
     }
   }
 
+  &.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;
@@ -434,7 +462,7 @@
       thead,
       .pb_advanced_table_header {
         position: sticky !important;
-        top: 44px !important;
+        top: calc(44px + var(--advanced-table-action-bar-height, 0px)) !important;
         z-index: $z_10;
       }
     }
@@ -987,6 +1015,13 @@
       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,6 +18,7 @@ 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"
@@ -283,6 +284,33 @@ 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"),
@@ -295,6 +323,7 @@ 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,6 +46,7 @@ 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?
@@ -75,6 +76,12 @@ 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,6 +418,56 @@ 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,26 +1,44 @@
+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');
 
-  // Show action bar directly
-  actionBar.style.height = "auto";
+  // 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";
   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);
   }
 
-  // Update the count
-  const countElement = actionBar.querySelector(".selected-count");
-  if (countElement) {
-    countElement.textContent = `${selectedCount} Selected`;
-  }
+  actionBar.style.transitionProperty = ACTION_BAR_TRANSITION_PROPERTIES;
 }
 
 function hideActionBar(actionBar) {
@@ -28,6 +46,7 @@ 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";
@@ -37,7 +56,10 @@ 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) {