playbook_ui 14.22.0.pre.alpha.testdialog8898 → 14.22.0.pre.rc.0

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

@@ -16,7 +16,6 @@ type TableBodyProps = {
   dark?: boolean
   id?: string
   subRowHeaders?: string[]
-  isFetching: boolean
 }
 
 export const TableBody = ({
@@ -25,7 +24,6 @@ export const TableBody = ({
   dark = false,
   id,
   subRowHeaders,
-  isFetching,
   ...props
 }: TableBodyProps) => {
 
@@ -65,7 +63,6 @@ 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,13 +40,9 @@ export const TableHeader = ({
     showActionsBar,
     selectableRows,
     responsive,
-    headerRef,
-    virtualizedRows,
-    enableVirtualization,
+    headerRef
   } = useContext(AdvancedTableContext)
 
-  const isVirtualized = virtualizedRows || enableVirtualization;
-
   const classes = classnames(
     buildCss("pb_advanced_table_header"),
     globalProps(props),
@@ -61,93 +57,46 @@ 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 (
-    <>      
-      {isVirtualized ? renderVirtualizedTableHeader() : renderRegularTableHeader()}
+    <>
+      <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>
     </>
   )
 }

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

@@ -17,8 +17,7 @@ export const createCellFunction = (
   customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element,
   isFirstColumn?: boolean,
   onRowToggleClick?: (row: Row<GenericObject>) => void,
-  selectableRows?: boolean,
-  rowStyling?: GenericObject
+  selectableRows?: boolean
 ) => {
   // Add display name to the returned function
   const cellRenderer = ({
@@ -29,7 +28,6 @@ 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) {
@@ -37,7 +35,6 @@ export const createCellFunction = (
           return (
             <CustomCell
                 customRenderer={customRenderer}
-                customStyle={customStyle}
                 getValue={getValue}
                 onRowToggleClick={onRowToggleClick}
                 row={row}

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

@@ -57,6 +57,7 @@ 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',
@@ -66,14 +67,12 @@ export const getVirtualizedContainerStyles = (maxHeight?: string): React.CSSProp
   /**
    * Get height estimates for different row types
    */
-  export const getRowHeightEstimate = (rowType: 'header' | 'row' | 'loading' | 'footer') => {
+  export const getRowHeightEstimate = (rowType: 'header' | 'row' | 'loading') => {
     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,37 +56,18 @@
   }
 
   .bg-row-selection {
-    background-color: #E5EEFA;
+    background-color: $info_subtle;
   }
 
   .full-width {
     width: 100%;
   }
 
-  // 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 styles
   .virtualized-table-row {
     display: table !important;
     table-layout: fixed !important;
-    box-sizing: border-box !important;
+    width: 100% !important;
 
     td {
       display: table-cell !important;
@@ -123,7 +104,7 @@
 
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
-  }
+    }
   
 
   .row-selection-actions-card {
@@ -189,11 +170,6 @@
         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 {
@@ -217,6 +193,7 @@
 
     // Fix virtualized row borders
     tr.virtualized-table-row {
+      border-bottom: 1px solid $border_light;
 
       &.bg-silver {
         td:first-child {
@@ -232,7 +209,7 @@
 
       &.bg-row-selection {
         td:first-child {
-          background-color: #E5EEFA;
+          background-color: $info_subtle;
         }
       }
     }
@@ -629,16 +606,6 @@
         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;
-          }
-        }
       }
     }
   }
@@ -654,23 +621,6 @@
     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};
@@ -897,18 +847,6 @@
         }
       }
     }
-    .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,7 +36,6 @@ 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"
@@ -58,7 +57,6 @@ type AdvancedTableProps = {
     onChange?: (value: RowPinningState) => void;
   };
   responsive?: "scroll" | "none",
-  rowStyling?: GenericObject[],
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
@@ -68,7 +66,6 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
-  onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
   allowFullScreen?: boolean
   fullScreenControl?: (controls: FullscreenControls) => void
@@ -83,7 +80,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnDefinitions,
     columnGroupBorderColor,
     columnVisibilityControl,
-    customSort,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -98,12 +94,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight,
     onRowToggleClick,
     onToggleExpansionClick,
-    onCustomSortClick,
     pagination = false,
     paginationProps,
     pinnedRows,
     responsive = "scroll",
-    rowStyling,
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
@@ -150,7 +144,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     columnVisibilityControl,
     pinnedRows,
-    rowStyling
   });
 
   // Initialize table actions
@@ -273,29 +266,6 @@ 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 */}
@@ -329,7 +299,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}
-            customSort={customSort}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -341,11 +310,9 @@ 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}
@@ -355,7 +322,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             table={table}
             tableContainerRef={tableWrapperRef}
             toggleExpansionIcon={toggleExpansionIcon}
-            totalAvailableCount={fullData.length}
             virtualizedRows={virtualizedRows}
         >
           <React.Fragment>
@@ -367,14 +333,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
-            {/* Virtualized wrapper div only if virtualizedRows is true */}
-            {virtualizedRows ? (
-              <div style={{ overflow: 'auto', width: '100%' }}>
-                {tableElement}
-              </div>
-            ) : (
-              tableElement
-            )}
+            {/* Main Table */}
+            <Table
+                className={`${loading ? "content-loading" : ""}`}
+                dark={dark}
+                dataTable
+                numberSpacing="tabular"
+                responsive="none"
+                {...tableProps}
+            >
+              {children ? (
+                children
+              ) : (
+                <>
+                  <TableHeader />
+                  <TableBody />
+                </>
+              )}
+            </Table>
           </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, colors } from "playbook-ui"
+import { AdvancedTable, Pill } from "playbook-ui"
 
 global.ResizeObserver = class {
   observe() {}
@@ -572,107 +572,4 @@ 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/docs/_advanced_table_beta_sort.html.erb

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) 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, id: "test_table" }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) 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 %>

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

@@ -55,4 +55,4 @@
   },
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "loading_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx

@@ -35,7 +35,7 @@ const AdvancedTableRowPinning = (props) => {
     },
   ]
 
-  const [pinnedRows, setPinnedRows] = useState({top: ["8"]})
+  const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
 
   return (
     <div>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md

@@ -1,7 +1,5 @@
-Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and reorganizing via sorting.
 
-**NOTE:** 
+**NOTE:** This prop is in Beta. Current Requirements for V1:
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
-- Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
-- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below. 
-- For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned. 
+- Row ids required: Pass an array of row ids to the `top` property. For expandable rows, both parent and all its child row ids must be included individually