playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2215githubactionsdepupdate8717

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -16,6 +16,7 @@ type TableBodyProps = {
   dark?: boolean
   id?: string
   subRowHeaders?: string[]
+  isFetching: boolean
 }
 
 export const TableBody = ({
@@ -24,6 +25,7 @@ export const TableBody = ({
   dark = false,
   id,
   subRowHeaders,
+  isFetching,
   ...props
 }: TableBodyProps) => {
 
@@ -63,6 +65,7 @@ export const TableBody = ({
           // Virtualized table view
           <VirtualizedTableView
               collapsibleTrail={collapsibleTrail}
+              isFetching={isFetching}
               subRowHeaders={subRowHeaders}
           />
         ) : (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -40,9 +40,13 @@ export const TableHeader = ({
     showActionsBar,
     selectableRows,
     responsive,
-    headerRef
+    headerRef,
+    virtualizedRows,
+    enableVirtualization,
   } = useContext(AdvancedTableContext)
 
+  const isVirtualized = virtualizedRows || enableVirtualization;
+
   const classes = classnames(
     buildCss("pb_advanced_table_header"),
     globalProps(props),
@@ -57,46 +61,93 @@ export const TableHeader = ({
     `${isChrome() ? "chrome-styles" : ""}`,
     `${responsive === "scroll" && "pinned-left"}`,
   );
+
+  const renderRegularTableHeader = () => (
+    <thead className={classes} 
+        id={id}
+    >
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
+        <tr 
+            key={`${headerGroup.id}-headerGroup`}
+            ref={index === 0 ? headerRef : null}
+        >
+          {!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}
+                  sortIcon={sortIcon}
+                  table={table}
+              />
+            )
+          })}
+        </tr>
+      ))}
+    </thead>
+  );
+
+  const renderVirtualizedTableHeader = () => (
+    <thead 
+        className={classes} 
+        data-virtualized="true"
+        id={id}
+    >
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
+        <tr 
+            className="virtualized-header-row-header"
+            key={`${headerGroup.id}-headerGroup-virtualized`}
+            ref={index === 0 ? headerRef : null}
+        >
+          {!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}
+                  sortIcon={sortIcon}
+                  table={table}
+              />
+            )
+          })}
+        </tr>
+      ))}
+    </thead>
+  );
   return (
-    <>
-      <thead className={classes}
-          id={id}
-      >
-        {/* Get the header groups (only one in this example) */}
-        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-          <tr 
-              key={`${headerGroup.id}-headerGroup`}
-              ref={index === 0 ? headerRef : null}
-          >
-            {!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}
-                    sortIcon={sortIcon}
-                    table={table}
-                />
-              )
-            })}
-          </tr>
-        ))}
-      </thead>
+    <>      
+      {isVirtualized ? renderVirtualizedTableHeader() : renderRegularTableHeader()}
     </>
   )
 }

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

@@ -17,7 +17,8 @@ export const createCellFunction = (
   customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element,
   isFirstColumn?: boolean,
   onRowToggleClick?: (row: Row<GenericObject>) => void,
-  selectableRows?: boolean
+  selectableRows?: boolean,
+  rowStyling?: GenericObject
 ) => {
   // Add display name to the returned function
   const cellRenderer = ({
@@ -28,6 +29,7 @@ export const createCellFunction = (
     getValue: Getter<string>
   }) => {
     const rowData = row.original;
+    const customStyle = rowStyling?.length > 0 && rowStyling?.find((s:GenericObject) => s?.rowId === row.id);
 
     if (isFirstColumn) {
       switch (row.depth) {
@@ -35,6 +37,7 @@ export const createCellFunction = (
           return (
             <CustomCell
                 customRenderer={customRenderer}
+                customStyle={customStyle}
                 getValue={getValue}
                 onRowToggleClick={onRowToggleClick}
                 row={row}

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

@@ -0,0 +1,15 @@
+export const findColumnDefByAccessor = (
+  defs: any[],
+  targetAccessor: string
+): any | undefined => {
+  for (const def of defs) {
+    if (def.accessor === targetAccessor) {
+      return def;
+    }
+    if (Array.isArray(def.columns) && def.columns.length) {
+      const found = findColumnDefByAccessor(def.columns, targetAccessor);
+      if (found) return found;
+    }
+  }
+  return undefined;
+};

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

@@ -57,7 +57,6 @@ export const getVirtualizedContainerStyles = (maxHeight?: string): React.CSSProp
       position: 'absolute',
       top: 0,
       left: 0,
-      width: '100%',
       height: '40px', // Match standard table row height
       transform: `translateY(${startPosition}px)`,
       tableLayout: 'fixed',
@@ -67,12 +66,14 @@ export const getVirtualizedContainerStyles = (maxHeight?: string): React.CSSProp
   /**
    * Get height estimates for different row types
    */
-  export const getRowHeightEstimate = (rowType: 'header' | 'row' | 'loading') => {
+  export const getRowHeightEstimate = (rowType: 'header' | 'row' | 'loading' | 'footer') => {
     switch (rowType) {
       case 'header':
         return 40; // Header height
       case 'loading':
         return 30; // Loading indicator height
+      case 'footer':
+        return 40
       case 'row':
       default:
         return 40; // Standard row height - match this to your design system

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

@@ -56,18 +56,37 @@
   }
 
   .bg-row-selection {
-    background-color: $info_subtle;
+    background-color: #E5EEFA;
   }
 
   .full-width {
     width: 100%;
   }
 
-  // Virtualized table styles
+  // Virtualized Table and Rows for Infinite Scroll
+  scrollbar-gutter: stable right-edges;
+  .virtualized-header-row-header {
+    width: 100% !important;
+    .table-header-cells:first-child {
+      min-width: 180px;
+    }
+  }
+
+  .virtualized-footer {
+    width: 100% !important;
+    td {
+      border-bottom-left-radius: 4px !important;
+      border-bottom-right-radius: 4px !important;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   .virtualized-table-row {
     display: table !important;
     table-layout: fixed !important;
-    width: 100% !important;
+    box-sizing: border-box !important;
 
     td {
       display: table-cell !important;
@@ -104,7 +123,7 @@
 
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
-    }
+  }
   
 
   .row-selection-actions-card {
@@ -170,6 +189,11 @@
         box-sizing: border-box !important;
       }
     }
+    // Fixes for tooltip picking up th styling from Table kit
+    .pb_tooltip_kit {
+      font-weight: unset;
+      text-transform: unset;
+    }
   }
 
   .pb_advanced_table_body {
@@ -193,7 +217,6 @@
 
     // Fix virtualized row borders
     tr.virtualized-table-row {
-      border-bottom: 1px solid $border_light;
 
       &.bg-silver {
         td:first-child {
@@ -209,7 +232,7 @@
 
       &.bg-row-selection {
         td:first-child {
-          background-color: $info_subtle;
+          background-color: #E5EEFA;
         }
       }
     }
@@ -606,6 +629,16 @@
         td.sticky-left {
           border-right: 1px solid $border_light !important;
         }
+        // Virtualized Table in Responsive Styles
+        .virtualized-header,
+        .virtualized-header-row-header,
+        .virtualized-table-row,
+        .virtualized-footer {
+          border-right: 1px solid $border_light !important;
+          .table-header-cells:first-child {
+            box-shadow: 0 0 10px 0 rgba($shadow, 0.16) !important;
+          }
+        }
       }
     }
   }
@@ -621,6 +654,23 @@
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
   }
 
+  // For Rails, we can't target the &:last-child since collapsed rows are display: none;
+  // With JS, we add a .last-visible-row class and add rounded corners to bottom row
+  .last-visible-row {
+    td, .pb_table_td {
+      border-width: 0 0 1px 0;
+
+      &:first-child {
+        border-radius: 0 0 0 4px;
+        border-width: 0 0 1px 1px;
+      }
+      &:last-child {
+        border-radius: 0 0 4px 0;
+        border-width: 0 1px 1px 0;
+      }
+    }
+  }
+
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};
@@ -847,6 +897,18 @@
         }
       }
     }
+    .bg-row-selection {
+      background-color: #202850;
+    }
+    .pb_advanced_table_body {
+      tr.virtualized-table-row {
+        &.bg-row-selection {
+          td:first-child {
+            background-color: #202850;
+          }
+        }
+      }
+    }
   }
 }
 

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

@@ -36,6 +36,7 @@ type AdvancedTableProps = {
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
   columnVisibilityControl?: GenericObject
+  customSort?:boolean;
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -57,6 +58,7 @@ type AdvancedTableProps = {
     onChange?: (value: RowPinningState) => void;
   };
   responsive?: "scroll" | "none",
+  rowStyling?: GenericObject[],
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
@@ -66,6 +68,7 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
+  onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
   allowFullScreen?: boolean
   fullScreenControl?: (controls: FullscreenControls) => void
@@ -80,6 +83,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnDefinitions,
     columnGroupBorderColor,
     columnVisibilityControl,
+    customSort,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -94,10 +98,12 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight,
     onRowToggleClick,
     onToggleExpansionClick,
+    onCustomSortClick,
     pagination = false,
     paginationProps,
     pinnedRows,
     responsive = "scroll",
+    rowStyling,
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
@@ -144,6 +150,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     columnVisibilityControl,
     pinnedRows,
+    rowStyling
   });
 
   // Initialize table actions
@@ -266,6 +273,29 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   // Visibility flag for action bar
   const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
 
+  // The actual Main <Table /> element
+  const tableElement = (
+    <Table
+        className={`${loading ? "content-loading" : ""}`}
+        dark={dark}
+        dataTable
+        numberSpacing="tabular"
+        responsive="none"
+        {...tableProps}
+    >
+      {children ? (
+        children
+      ) : (
+        <>
+          <TableHeader />
+          <TableBody   
+              isFetching={isFetching}
+          />
+        </>
+      )}
+    </Table>
+  )
+
   return (
     <>
       {/* Top Pagination */}
@@ -299,6 +329,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}
+            customSort={customSort}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -310,9 +341,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isActionBarVisible={isActionBarVisible}
             isFullscreen={isFullscreen}
             loading={loading}
+            onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}
+            rowStyling={rowStyling}
             selectableRows={selectableRows}
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}
@@ -322,6 +355,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             table={table}
             tableContainerRef={tableWrapperRef}
             toggleExpansionIcon={toggleExpansionIcon}
+            totalAvailableCount={fullData.length}
             virtualizedRows={virtualizedRows}
         >
           <React.Fragment>
@@ -333,24 +367,14 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
-            {/* Main Table */}
-            <Table
-                className={`${loading ? "content-loading" : ""}`}
-                dark={dark}
-                dataTable
-                numberSpacing="tabular"
-                responsive="none"
-                {...tableProps}
-            >
-              {children ? (
-                children
-              ) : (
-                <>
-                  <TableHeader />
-                  <TableBody />
-                </>
-              )}
-            </Table>
+            {/* Virtualized wrapper div only if virtualizedRows is true */}
+            {virtualizedRows ? (
+              <div style={{ overflow: 'auto', width: '100%' }}>
+                {tableElement}
+              </div>
+            ) : (
+              tableElement
+            )}
           </React.Fragment>
         </AdvancedTableProvider>
 

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

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable, Pill } from "playbook-ui"
+import { AdvancedTable, Pill, colors } from "playbook-ui"
 
 global.ResizeObserver = class {
   observe() {}
@@ -572,4 +572,107 @@ test("pinnedRows prop renders pinned rows at top", () => {
   const firstPinnedRow = pinnedRows[0]
   expect(firstPinnedRow).toHaveStyle("position: sticky")
   expect(firstPinnedRow).toHaveStyle("background-color: white")
-})
+})
+
+test("columnStyling.headerAlignment aligns header as expected", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { headerAlignment: "left" },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const headerCell = screen.getByText("New Enrollments").closest("th");
+  expect(headerCell).toHaveAttribute("align", "left");
+});
+
+test("columnStyling.cellAlignment sets each <td> align attribute as expected", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { cellAlignment: "left" },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
+  expect(firstEnrollmentCell).toHaveAttribute("align", "left");
+});
+
+test("renders virtualized table rows and header", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA_WITH_ID}
+        virtualizedRows
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const virtualizedHeader = kit.querySelector('.virtualized-header-row-header')
+  expect(virtualizedHeader).toBeInTheDocument()
+
+  const virtualizedRows = kit.querySelectorAll('.virtualized-table-row')
+  expect(virtualizedRows.length).toBeLessThan(MOCK_DATA_WITH_ID.length)
+})
+
+test("rowStyling prop works as expected", () => {
+  const rowStyling = [
+  {
+    rowId: "1",
+    backgroundColor: colors.white,
+    fontColor: colors.black
+  },
+];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        rowStyling={rowStyling}
+        tableData={MOCK_DATA_WITH_ID}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const tableBody = kit.querySelector('tbody')
+  const row1 = tableBody.querySelector('tr:nth-child(1)') 
+  expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
+})

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

@@ -0,0 +1,36 @@
+function showActionBar(actionBar, selectedCount) {
+  // 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");
+
+  // Update the count
+  const countElement = actionBar.querySelector(".selected-count");
+  if (countElement) {
+    countElement.textContent = `${selectedCount} Selected`;
+  }
+}
+
+function hideActionBar(actionBar) {
+  // Hide action bar directly
+  actionBar.style.height = "0px";
+  actionBar.style.overflow = "hidden";
+  actionBar.style.opacity = "0";
+  actionBar.classList.add("p_none");
+  actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+}
+
+export function updateSelectionActionBar(table, selectedCount) {
+  const actionBar = table.querySelector(".row-selection-actions-card");
+  if (!actionBar) return;
+
+  if (selectedCount > 0) {
+    showActionBar(actionBar, selectedCount);
+  } else {
+    hideActionBar(actionBar);
+  }
+}

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

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -34,7 +34,7 @@
   subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>