playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5ac75f8f899c8e692ebc15d9e4c233540f1b055707c362099ca5f6bd23da085
-  data.tar.gz: 96f74ff346de6735599cbd46bf9d8b81e541b7ad7b258275e4174a922fe637ac
+  metadata.gz: 106354f9d720a7693c85b275f1de67cb17a21e3e28f28f90a758ee9b19942367
+  data.tar.gz: 9a5fbcd069bdaf722663195395f810d351e72e322a527e0157d666609363cc60
 SHA512:
-  metadata.gz: c8dc8cf0775094f3d738ff9fdb1bc5a7101d9f950c6503dd75c598da03e0a4353d9466a864947fbc905a42997a60f3e8ee29569179106b9c8fc796feb2fe6819
-  data.tar.gz: 119a30f2687af34eb8bfbc1c942182d128838437cb8c15f71a061600892d9fe5498fe400db526ee306120e4b90f220d0f97bb1467e829191e6b5fe9c35a09eaf
+  metadata.gz: 8a13eb3272cf0c06bb2defa816ca14a48f2cb2fffd1185516f6ff40556fab6e9c9766d3929929680ea18511efc952ebefa5a1d836e554c99df384a1d9ef88ea4
+  data.tar.gz: d754688073c058e93739e273d4f6d8f54fa26f5a86869c7e764a3dddfb492f6c63efb86b914b6d9d45424f859e0996269f416b8ab38411268a8b89b23b17915c

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

@@ -1,10 +1,17 @@
-import React from "react"
+import React, { useContext } from "react"
+
+import AdvancedTableContext from "../Context/AdvancedTableContext"
 
 //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 } from "react"
+import React, { useContext, useEffect, useMemo } 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 { getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
+import { buildGroupSeparatorInsets, getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -125,6 +125,7 @@ export const RegularTableView = ({
 }: RegularTableViewProps) => {
   const {
     enableToggleExpansion,
+    groupSeparators,
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
@@ -158,14 +159,30 @@ export const RegularTableView = ({
     (obj: Record<string, unknown>) => "columns" in obj
   );
 
-  // Row pinning
-  function PinnedRow({ row, position }: { row: Row<any>; position: 'top' | 'bottom' }) {
+  // 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>
+  }) {
     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={{
@@ -182,6 +199,9 @@ export const RegularTableView = ({
                   : undefined,
             zIndex: '3',
             fontWeight: getFontWeight(customRowStyle),
+            ...(showGroupSeparator && {
+              ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
+            }),
           }}
       >
         <TableCellRenderer
@@ -198,11 +218,13 @@ export const RegularTableView = ({
     )
   }
 
-  const totalRows = pinnedRows ? table.getCenterRows() : table.getRowModel().rows
+  const totalRows = pinnedRows ? table.getCenterRows() : rowModelRows
+  const topRows = pinnedRows ? table.getTopRows() : []
+  const bottomRows = pinnedRows ? table.getBottomRows() : []
 
   return (
     <>
-      {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
+      {topRows.map((row: Row<GenericObject>) => (
         <PinnedRow key={row.id}
             position="top"
             row={row}
@@ -219,6 +241,8 @@ 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`}>
@@ -234,13 +258,20 @@ export const RegularTableView = ({
             )}
 
             <tr
-                className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
+                className={classnames(
+                  rowColor,
+                  row.depth > 0 && `depth-sub-row-${row.depth}`,
+                  showGroupSeparator && "group-separator-row"
+                )}
                 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 */}
@@ -280,7 +311,7 @@ export const RegularTableView = ({
           </React.Fragment>
         );
       })}
-      {pinnedRows && table.getBottomRows().map((row: Row<GenericObject>) => (
+      {bottomRows.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,6 +143,47 @@ 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"
@@ -197,6 +238,25 @@ 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, useLayoutEffect, useState, useEffect, useRef } from "react"
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useState } 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 { getRowColorClass } from "../Utilities/RowUtils"
+import { buildGroupSeparatorInsets, getRowColorClass } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -34,6 +34,7 @@ export const VirtualizedTableView = ({
 }: VirtualizedTableViewProps) => {
   const {
     enableToggleExpansion,
+    groupSeparators,
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
@@ -119,6 +120,13 @@ 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 (
@@ -180,10 +188,17 @@ 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={`virtualized-table-row ${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
+                className={classnames(
+                  "virtualized-table-row",
+                  rowColor,
+                  row.depth > 0 && `depth-sub-row-${row.depth}`,
+                  showGroupSeparator && "group-separator-row"
+                )}
                 data-index={virtualRow.index}
                 key={`row-${item.id}-sort-${sortingState}`}
                 ref={(node) => {
@@ -195,7 +210,12 @@ export const VirtualizedTableView = ({
                     }
                   }
                 }}
-                style={virtualItemStyle}
+                style={{
+                  ...virtualItemStyle,
+                  ...(showGroupSeparator && {
+                    ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
+                  }),
+                }}
             >
               {/* 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,6 +32,7 @@ export const TableHeader = ({
   ...props
 }: TableHeaderProps) => {
   const {
+    columnVisibilityControl,
     enableToggleExpansion,
     handleExpandOrCollapse,
     loading,
@@ -63,42 +64,83 @@ 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>
+    ))
+
+  // Empty checkbox-column cell on upper multi-header rows; checkbox only on the lowest row.
+  const renderSelectableHeaderCell = (
+    isLowestHeaderRow: boolean,
+    extraClassName?: string
+  ) => (
+    <th className={classnames(customCellClassnames, "checkbox-cell-header", extraClassName)}>
+      {isLowestHeaderRow ? (
+        <Checkbox
+            checked={table?.getIsAllRowsSelected()}
+            indeterminate={table?.getIsSomeRowsSelected()}
+            onChange={table?.getToggleAllRowsSelectedHandler()}
+        />
+      ) : null}
+    </th>
+  )
+
   const renderRegularTableHeader = () => (
     <thead className={classes}
         id={id}
         ref={headerRef}
     >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
-        <tr key={`${headerGroup.id}-headerGroup`}>
-          {!hasAnySubRows && selectableRows && (
-            <th className={customCellClassnames}>
-              <Checkbox
-                  checked={table?.getIsAllRowsSelected()}
-                  indeterminate={table?.getIsSomeRowsSelected()}
-                  onChange={table?.getToggleAllRowsSelectedHandler()}
-              />
-            </th>
-          )}
-          {headerGroup.headers.map(header => {
-            const isPinnedLeft = columnPinning.left.includes(header.id)
-            return (
-              <TableHeaderCell
-                  enableSorting={enableSorting}
-                  enableToggleExpansion={enableToggleExpansion}
-                  handleExpandOrCollapse={handleExpandOrCollapse}
-                  header={header}
-                  headerChildren={children}
-                  isPinnedLeft={isPinnedLeft}
-                  key={`${header.id}-header`}
-                  loading={loading}
-                  persistToggleExpansionButton={persistToggleExpansionButton}
-                  sortIcon={sortIcon}
-                  table={table}
-              />
-            )
-          })}
-        </tr>
-      ))}
+      {renderSpacerRows()}
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, headerGroupIndex: number, headerGroups: HeaderGroup<GenericObject>[]) => {
+        const isLowestHeaderRow = headerGroupIndex === headerGroups.length - 1
+
+        return (
+          <tr key={`${headerGroup.id}-headerGroup`}>
+            {!hasAnySubRows && selectableRows && renderSelectableHeaderCell(isLowestHeaderRow)}
+            {headerGroup.headers.map(header => {
+              const isPinnedLeft = columnPinning.left.includes(header.id)
+              return (
+                <TableHeaderCell
+                    enableSorting={enableSorting}
+                    enableToggleExpansion={enableToggleExpansion}
+                    handleExpandOrCollapse={handleExpandOrCollapse}
+                    header={header}
+                    headerChildren={children}
+                    isPinnedLeft={isPinnedLeft}
+                    key={`${header.id}-header`}
+                    loading={loading}
+                    persistToggleExpansionButton={persistToggleExpansionButton}
+                    sortIcon={sortIcon}
+                    table={table}
+                />
+              )
+            })}
+          </tr>
+        )
+      })}
     </thead>
   );
 
@@ -109,41 +151,38 @@ export const TableHeader = ({
         id={id}
         ref={headerRef}
     >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
-        <tr
-            className="virtualized-header-row-header"
-            key={`${headerGroup.id}-headerGroup-virtualized`}
-        >
-          {!hasAnySubRows && selectableRows && (
-            <th className={classnames(customCellClassnames, "virtualized-header-cell")}>
-              <Checkbox
-                  checked={table?.getIsAllRowsSelected()}
-                  indeterminate={table?.getIsSomeRowsSelected()}
-                  onChange={table?.getToggleAllRowsSelectedHandler()}
-              />
-            </th>
-          )}
-          {headerGroup.headers.map(header => {
-            const isPinnedLeft = columnPinning.left.includes(header.id)
-            return (
-              <TableHeaderCell
-                  enableSorting={enableSorting}
-                  enableToggleExpansion={enableToggleExpansion}
-                  handleExpandOrCollapse={handleExpandOrCollapse}
-                  header={header}
-                  headerChildren={children}
-                  isPinnedLeft={isPinnedLeft}
-                  isVirtualized
-                  key={`${header.id}-header-virtualized`}
-                  loading={loading}
-                  persistToggleExpansionButton={persistToggleExpansionButton}
-                  sortIcon={sortIcon}
-                  table={table}
-              />
-            )
-          })}
-        </tr>
-      ))}
+      {renderSpacerRows("virtualized-header-row-header")}
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, headerGroupIndex: number, headerGroups: HeaderGroup<GenericObject>[]) => {
+        const isLowestHeaderRow = headerGroupIndex === headerGroups.length - 1
+
+        return (
+          <tr
+              className="virtualized-header-row-header"
+              key={`${headerGroup.id}-headerGroup-virtualized`}
+          >
+            {!hasAnySubRows && selectableRows && renderSelectableHeaderCell(isLowestHeaderRow, "virtualized-header-cell")}
+            {headerGroup.headers.map(header => {
+              const isPinnedLeft = columnPinning.left.includes(header.id)
+              return (
+                <TableHeaderCell
+                    enableSorting={enableSorting}
+                    enableToggleExpansion={enableToggleExpansion}
+                    handleExpandOrCollapse={handleExpandOrCollapse}
+                    header={header}
+                    headerChildren={children}
+                    isPinnedLeft={isPinnedLeft}
+                    isVirtualized
+                    key={`${header.id}-header-virtualized`}
+                    loading={loading}
+                    persistToggleExpansionButton={persistToggleExpansionButton}
+                    sortIcon={sortIcon}
+                    table={table}
+                />
+              )
+            })}
+          </tr>
+        )
+      })}
     </thead>
   );
   return (

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

@@ -53,6 +53,35 @@ 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
  */