playbook_ui 16.10.0.pre.rc.1 → 16.10.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c56cffd7ae20d303e7ebfb111960cd77e6b3ef3020867b335b91ad0743ec88c
-  data.tar.gz: 12ed387ffcb0607f46a4ef6f231bb7823b5b3c81f7a988783b8b652491ef29cf
+  metadata.gz: 9c106506aaabdf972085be91718db366bd7fedcd876fbb790451952f6be69f40
+  data.tar.gz: 658df9449e22d82fee8e4faeaa020c81876b6cbb435e399f1deeb3f9ab877426
 SHA512:
-  metadata.gz: dc097cb2fe1d11fefe23ea335188808e0a15abcf214e0de13c7f8b6f1320974af4f1d33c813bf46c3650007ab0e903e838e91738ae8cb48c93c9875f28ccfc66
-  data.tar.gz: 2ef66b6d238eb564c593ceb9eaad541f898a5bbad90afd2c834b53dfbcf4624ce56e350eae499b674f7cccece8ff40d1c50201838529782fbf330a92c920b86a
+  metadata.gz: 04f3e7df0c8f462350f090b3da1b59becb573547690516c09e9f7e4836ade7afb78cf8bbf635741fc9d61da70cb63263ce67d6e56e29450575f32c38dcec98fe
+  data.tar.gz: 8598d0d5d9884ae6bf320b3bd6538ef6db48edde4b853d4252aa20e9b6e5f4df5c5eb7e162a7d9ae0e139513ce5152fbcca5a8a0ae4f96cbca5b163a559a3865

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;
@@ -401,55 +429,6 @@
     @include scrollbar-styling;
   }
 
-  // Fullscreen
-  &.advanced-table-allow-fullscreen {
-    transition: all 0.3s ease;
-  }
-
-  &.advanced-table-fullscreen {
-    background-color: $bg_light;
-    box-sizing: border-box;
-    height: 100vh;
-    left: 0;
-    overflow: auto;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: $z_10;
-
-    .pb_table {
-      th,
-      td,
-      div,
-      button {
-        font-size: calc(100%);
-      }
-      box-sizing: border-box;
-      margin: $space_lg;
-      max-width: calc(100% - 64px);
-      width: calc(100% - 64px);
-    }
-
-    .pb_table.sticky-header {
-      thead,
-      .pb_advanced_table_header {
-        position: sticky !important;
-        top: 44px !important;
-        z-index: $z_10;
-      }
-    }
-  }
-
-  .advanced-table-fullscreen-header {
-    background-color: $white;
-    height: 44px;
-    padding: 13px 20px;
-    position: sticky;
-    top: 0;
-    width: 100%;
-    z-index: $z_10;
-  }
-
   // Icons
   .button-icon {
     display: flex;
@@ -507,16 +486,6 @@
     }
   }
 
-  .fullscreen-icon {
-    @extend .button-icon;
-    @extend %primary-color-pseudo;
-    padding: 2px 0;
-
-    &:focus-visible {
-      border-radius: $border_rad_lighter;
-    }
-  }
-
   // First column separator/border
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
@@ -987,6 +956,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 {
@@ -1002,18 +978,6 @@
       }
     }
 
-    // Fullscreen
-    &.advanced-table-fullscreen {
-      background: $bg_dark;
-    }
-
-    .advanced-table-fullscreen-header {
-      background-color: $bg_dark_card;
-      position: sticky;
-      top: 0;
-      z-index: $z_10;
-    }
-
     &[class*="advanced-table-sticky-left-columns"] {
       .sticky-left {
         background-color: $bg_dark;

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useCallback } from "react";
+import React, { useRef, useEffect } from "react";
 import classnames from "classnames";
 
 import { GenericObject } from "../types";
@@ -18,15 +18,7 @@ import TableActionBar from "./Components/TableActionBar";
 
 import { useTableState } from "./Hooks/useTableState";
 import { useTableActions } from "./Hooks/useTableActions";
-
-import Card from "../pb_card/_card"
-import Flex from "../pb_flex/_flex"
-import Icon from "../pb_icon/_icon"
-
-type FullscreenControls = {
-  toggleFullscreen: () => void;
-  isFullscreen: boolean;
-};
+import { updateStickyLayoutHeights, scheduleStickyActionBarHeightUpdate } from "./Utilities/StickyLayoutHelper";
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -74,8 +66,6 @@ type AdvancedTableProps = {
   onRowSelectionChange?: (arg: RowSelectionState) => void
   onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
-  allowFullScreen?: boolean
-  fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
 /**
@@ -135,8 +125,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
     virtualizedRows = false,
-    allowFullScreen = false,
-    fullScreenControl,
   } = props;
 
   const noTableCardContainer = tableProps?.container === false;
@@ -214,87 +202,51 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     );
   }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
 
-  // Fullscreen
-  const [isFullscreen, setIsFullscreen] = useState(false)
+  // Build CSS classes and props
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
 
-  const toggleFullscreen = useCallback(() => {
-    setIsFullscreen(prevState => !prevState)
-  }, [])
+  // Visibility flag for action bar
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+  const isStickyHeader = Boolean(tableProps?.sticky);
 
   useEffect(() => {
-    if (allowFullScreen && fullScreenControl) {
-      fullScreenControl({
-        toggleFullscreen,
-        isFullscreen
-      })
-    }
-  }, [allowFullScreen, fullScreenControl, toggleFullscreen, isFullscreen])
+    if (!isStickyHeader || !tableWrapperRef.current) return;
 
-  const renderFullscreenHeader = () => {
-    if (!isFullscreen) return null
+    const wrapper = tableWrapperRef.current;
+    const updateHeights = () => updateStickyLayoutHeights(wrapper);
 
-    const defaultMinimizeIcon = (
-      <button
-          className="gray-icon fullscreen-icon"
-          onClick={toggleFullscreen}
-      >
-        <Icon
-            cursor="pointer"
-            fixedWidth
-            icon="arrow-down-left-and-arrow-up-right-to-center"
-            {...props}
-        />
-      </button>
-    )
-
-    return (
-      <Card
-          borderNone
-          borderRadius="none"
-          className="advanced-table-fullscreen-header"
-          {...props}
-      >
-          <Flex justify="end">
-            {defaultMinimizeIcon}
-          </Flex>
-      </Card>
-    )
-  }
+    updateHeights();
+    scheduleStickyActionBarHeightUpdate(wrapper);
 
-  useEffect(() => {
-    if (!allowFullScreen) return
+    const resizeObserver = new ResizeObserver(updateHeights);
+    resizeObserver.observe(wrapper);
 
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isFullscreen) {
-        event.preventDefault()
-        toggleFullscreen()
-      }
+    const actionBar = wrapper.querySelector(".row-selection-actions-card");
+    if (actionBar) {
+      resizeObserver.observe(actionBar);
     }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [allowFullScreen, toggleFullscreen, isFullscreen])
 
-  // Build CSS classes and props
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
+    const table = wrapper.querySelector("table.pb_table");
+    const thead = table?.querySelector("thead");
+    if (thead) {
+      resizeObserver.observe(thead);
+    }
 
-  // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+    return () => resizeObserver.disconnect();
+  }, [isStickyHeader, isActionBarVisible, columnDefinitions, tableData]);
 
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     {
-      '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},
+    { 'advanced-table-sticky-header': isStickyHeader },
     { 'advanced-table-no-table-container': noTableCardContainer },
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
     scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
@@ -358,7 +310,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           ref={tableWrapperRef}
           style={tableWrapperStyle as React.CSSProperties}
       >
-        {renderFullscreenHeader()}
         <AdvancedTableProvider
             cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
@@ -375,7 +326,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             hasAnySubRows={hasAnySubRows}
             inlineRowLoading={inlineRowLoading}
             isActionBarVisible={isActionBarVisible}
-            isFullscreen={isFullscreen}
             loading={loading}
             onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}

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", () => {
@@ -646,19 +696,6 @@ test("customRenderer prop functions as expected", () => {
   expect(pill).toBeInTheDocument()
 })
 
-test("allowFullScreen prop adds fullscreen class", () => {
-  render(
-    <AdvancedTable
-        allowFullScreen
-        columnDefinitions={columnDefinitions}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const tableContainer = screen.getByRole("table").closest("div")
-  expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
-})
-
 test("pinnedRows prop renders pinned rows at top", () => {
   const pinnedRowsControl = {
     value: { top: ["1", "3"] },