playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b1bf2d157b05e934cbfa3297c60f74cabb576373b5cb3b4a2b61d48df0ed27a3
-  data.tar.gz: 91635a39004a1f4169780f5065c21207b407308d0509d88710e9ad55b5eefc3c
+  metadata.gz: 47abbd6021f5f2e78c6eec2c21e748448cbdc2a3b5699f97914e9dec865836ea
+  data.tar.gz: 1e3542fd598d4209193fc2f6f1357d06ab1fffcb17fef11b0d84aa322663fb7b
 SHA512:
-  metadata.gz: f9d9fe0b6fea54f0eb1a347d9dd1b7d6c4d7a930825e5818c781c406edd89d444675b5772e3cba27e4d4de5f60acdf6e536a7f98dd905d91669dc95d616db777
-  data.tar.gz: 37fa1f6e6c2610ecfd26f259be1e048053c37a562511007f05efb577cc3659ba9745518ff9214d63e92da275b45210228d86fe2f3e2500e5e91b1f5f9edc404c
+  metadata.gz: '02951b7c75b1fc99bffa8893be7def930da61e5f98f1ecda05df882085a94ce56b07ba45131f0fe96f8e14b48db98d5ae414c68de8f05b439396d4735c743b00'
+  data.tar.gz: ab82942a91594a7e180f52942659480309c98210bce7cb630a7ca8308f3dad9ca977859088147cfc039716362af2af0dc18f4fe8c5fd2f064c55b3d15a9f3ca4

data/app/pb_kits/playbook/_playbook.scss

@@ -36,6 +36,7 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
+@import 'pb_full_screen/full_screen';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -128,3 +129,4 @@
 @import 'utilities/vertical_align';
 @import 'utilities/height';
 @import 'utilities/gap';
+@import 'utilities/border';

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

@@ -6,7 +6,7 @@ import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
-import { getRowColorClass, 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"
@@ -81,6 +81,7 @@ const TableCellRenderer = ({
         
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
+        const fontWeight = getFontWeight(customRowStyle)
 
         return (
           <td
@@ -103,6 +104,7 @@ const TableCellRenderer = ({
                   : undefined,
                   backgroundColor: cellBackgroundColor || (i === 0 && customRowStyle?.backgroundColor),
                   color: cellFontColor || customRowStyle?.fontColor,
+                  fontWeight,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
@@ -136,6 +138,7 @@ export const RegularTableView = ({
     pinnedRows,
     headerHeight,
     rowHeight,
+    actionBarHeight,
     rowStyling = [],
     sampleRowRef,
   } = useContext(AdvancedTableContext)
@@ -159,22 +162,29 @@ export const RegularTableView = ({
   );
 
   // Row pinning
-  function PinnedRow({ row }: { row: Row<any> }) {
-    const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
+  function PinnedRow({ row, position }: { row: Row<any>; position: 'top' | 'bottom' }) {
+    const customRowStyle = getRowStyle(rowStyling, row);
+    const bottomRowsCount = table.getBottomRows().length;
+
     return (
       <tr
-          className={classnames(
-            `pinned-row`,
-          )}
+          className={classnames('pinned-row', {
+            'pinned-row-bottom': position === 'bottom',
+          })}
           style={{
             backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
             color: customRowStyle?.fontColor,
             position: 'sticky',
             top:
-              row.getIsPinned() === 'top'
-                  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
+            position === 'top'
+                ? `${row.getPinnedIndex() * rowHeight + headerHeight + actionBarHeight}px`
+                : undefined,
+            bottom:
+              position === 'bottom'
+                  ? `${(bottomRowsCount - 1 - row.getPinnedIndex()) * rowHeight}px`
                   : undefined,
-            zIndex: '3'
+            zIndex: '3',
+            fontWeight: getFontWeight(customRowStyle),
           }}
       >
         <TableCellRenderer
@@ -197,6 +207,7 @@ export const RegularTableView = ({
     <>
       {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
         <PinnedRow key={row.id}
+            position="top"
             row={row}
         />
       ))}
@@ -204,7 +215,7 @@ export const RegularTableView = ({
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
         const numberOfColumns = table.getAllFlatColumns().length;
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
-        const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
+        const customRowStyle = getRowStyle(rowStyling, row);
 
         // Use functions from RowUtils for consistent cell coloring
         const rowColor = getRowColorClass(row, inlineRowLoading || false);
@@ -227,7 +238,11 @@ export const RegularTableView = ({
                 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}}
+                style={{
+                  backgroundColor: customRowStyle?.backgroundColor,
+                  color: customRowStyle?.fontColor,
+                  fontWeight: getFontWeight(customRowStyle),
+                }}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (
@@ -266,6 +281,12 @@ export const RegularTableView = ({
           </React.Fragment>
         );
       })}
+      {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

@@ -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/Hooks/useTableState.ts

@@ -39,7 +39,7 @@ interface UseTableStateProps {
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
-  rowStyling?: GenericObject;
+  rowStyling?: GenericObject[];
   inlineRowLoading?: boolean;
   sortParentOnly?: boolean;
 }
@@ -72,6 +72,7 @@ export function useTableState({
   const [localColumnVisibility, setLocalColumnVisibility] = useState({});
   const [localRowPinning, setLocalRowPinning] = useState<RowPinningState>({
     top: [],
+    bottom: [],
   });
   // Manage local state to preserve current page index when inlineRowLoading is enabled so it does not boot table to page 1
   // We can extend this for more usecases, but for now scoping it only for inlineRowLoading
@@ -150,7 +151,7 @@ export function useTableState({
 
       return columnStructure;
     }) || [];
-  }, [columnHelper, onRowToggleClick, selectableRows]);
+  }, [columnHelper, onRowToggleClick, rowStyling, selectableRows]);
 
   const columns = useMemo(() => buildColumns(columnDefinitions), [buildColumns, columnDefinitions]);
 
@@ -235,22 +236,26 @@ export function useTableState({
   // Handle row pinning changes
     useEffect(() => {
     const topPins = pinnedRows?.value?.top ?? [];
-    if (topPins.length === 0) {
-      onRowPinningChange({ top: [] });
-      return;
-    }
+    const bottomPins = pinnedRows?.value?.bottom ?? [];
+    
     const rows = table.getRowModel().rows;
     const collectAllDescendantIds = (subs: Row<GenericObject>[]): string[] =>
       subs.flatMap(r => [r.id, ...collectAllDescendantIds(r.subRows)]);
-    const allPinned: string[] = [];
-    topPins.forEach(id => {
-      const parent = rows.find(r => r.id === id && r.depth === 0);
-      if (parent) {
-        allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
-      }
+    const expandPins = (ids: string[]): string[] => {
+      const allPinned: string[] = [];
+      ids.forEach(id => {
+        const parent = rows.find(r => r.id === id && r.depth === 0);
+        if (parent) {
+          allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
+        }
+      });
+      return allPinned;
+    };
+    onRowPinningChange({
+      top: expandPins(topPins),
+      bottom: expandPins(bottomPins),
     });
-    onRowPinningChange({ top: allPinned });
-  }, [table, pinnedRows?.value?.top?.join(',')]);
+  }, [table, pinnedRows?.value?.top?.join(','), pinnedRows?.value?.bottom?.join(',')]);
 
   // Set pagination state when pagination is enabled
   useEffect(() => {

data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Row, Getter } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { CustomCell } from "../Components/CustomCell";
+import { getRowStyle } from "./RowUtils";
 
 /**
  * Creates a cell render function for table columns
@@ -18,7 +19,7 @@ export const createCellFunction = (
   isFirstColumn?: boolean,
   onRowToggleClick?: (row: Row<GenericObject>) => void,
   selectableRows?: boolean,
-  rowStyling?: GenericObject
+  rowStyling?: GenericObject[]
 ) => {
   // Add display name to the returned function
   const cellRenderer = ({
@@ -29,7 +30,7 @@ export const createCellFunction = (
     getValue: Getter<string>
   }) => {
     const rowData = row.original;
-    const customStyle = rowStyling?.length > 0 && rowStyling?.find((s:GenericObject) => s?.rowId === row.id);
+    const customStyle = getRowStyle(rowStyling, row);
 
     if (isFirstColumn) {
       switch (row.depth) {
@@ -52,6 +53,7 @@ export const createCellFunction = (
           return accessorValue ? (
             <CustomCell
                 customRenderer={customRenderer}
+                customStyle={customStyle}
                 onRowToggleClick={onRowToggleClick}
                 row={row}
                 selectableRows={selectableRows}

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

@@ -36,6 +36,23 @@ export const shouldShowLoadingIndicator = (
     (row.depth < cellAccessorsLength);
 }
 
+export const getRowStyle = (
+  rowStyling: GenericObject[] | undefined,
+  row: Row<GenericObject>
+) => {
+  const rowId = row.original?.id ?? row.id
+  if (rowId == null) return
+
+  return rowStyling?.find((style: GenericObject) => (
+    String(style?.rowId) === String(rowId)
+  ))
+}
+
+export const getFontWeight = (rowStyle?: GenericObject) => {
+  if (rowStyle?.fontWeight === "bold") return 700
+  if (rowStyle?.fontWeight === "regular") return 400
+}
+
 /**
  * Creates a virtual item style object for virtualized rows
  */

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,
@@ -778,6 +747,9 @@
   // Row Pinning - React uses inline style; Rails passes same style via html_options from table_body
   .pinned-row {
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
+    &.pinned-row-bottom {
+      box-shadow: 0 -3px 8px 0 rgba($shadow, 0.1) !important;
+    }
   }
 
   // For Rails, we can't target the &:last-child since collapsed rows are display: none;
@@ -987,6 +959,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 +981,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;