playbook_ui 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8462d011ee01fbc2e1dcbcc3da414e4c97080fd50b0fca45cbdaa02e39015a4
-  data.tar.gz: 1ca28020da66e69a5262d5817ab9a827f82586f861ffeb2657d939fe1e0335a7
+  metadata.gz: 9c4f4443e97e76b02ed78fb7b306ff8aeaca79582b9fe38a02cfa09e5d90c148
+  data.tar.gz: 8d08a8b0471fee5d751c9dabce727e28812b912bbfc69db54400092534f19def
 SHA512:
-  metadata.gz: 6cdcb36480d01c4657d5dcc7614a39b8d4f068c5122242d2eea84e189216cc146fb14ba5c17d0a9716211284fb542c15c6a4a9902274236f2623a0a9cc46b1b0
-  data.tar.gz: 6f2d7d27c882350ea27cf7c31dac83c82b029b32e54511f0783b85d3279be6314eb19253a9e3680d81cf5f0b7112c25f78b593dfa9c686a284148616dbfc0db2
+  metadata.gz: 6cdbfaee7b1b250617196e44a4cefc228b59cacd980d227eb817bd5ed88fbd2cc64c4c692a0ede4b1c8c79b7aaf172113509e9e132f2dce771dd6411cb6bccce
+  data.tar.gz: 5134dbe6b5f7861d5715818df3e136f69eb8089549f6715cac53aff1f251d16ec76c3cef912efbe4fd624bf3e4be79cb380767c475671302c3650b9729afd316

data/app/pb_kits/playbook/_playbook.scss

@@ -1,5 +1,4 @@
 
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -15,8 +14,8 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
-@import 'pb_contact/contact';
 @import 'pb_copy_button/copy_button';
+@import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
@@ -46,7 +45,6 @@
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
-@import 'pb_icon_button/icon_button';
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';
@@ -111,7 +109,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_empty_state/empty_state';
+@import 'pb_icon_button/icon_button';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -1,145 +1,5 @@
-import React, { createContext, useRef, useMemo, useEffect } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { createContext } from "react"
 
-import { Row } from "@tanstack/react-table";
-import { GenericObject } from "../../types";
-import { getRowHeightEstimate } from '../Utilities/TableContainerStyles';
+const AdvancedTableContext = createContext<any>({})
 
-const AdvancedTableContext = createContext<any>({});
-
-interface FlattenedItem {
-    type: 'header' | 'row' | 'loading';
-    row: Row<GenericObject>;
-    id: string;
-}
-
-export const AdvancedTableProvider = ({ children, ...props }: {
-    children: React.ReactNode,
-    [key: string]: any
-}) => {
-  // Always initialize refs and state unconditionally, even if not used
-  const tableContainerRef = useRef(null);
-  const containerRef = props.tableContainerRef || tableContainerRef;
-
-  const table = props.table;
-  const isVirtualized = props.virtualizedRows || props.enableVirtualization;
-
-  // Create a flattened data array that includes ALL components for virtualization
-  const flattenedItems = useMemo(() => {
-    if (!isVirtualized || !table) {
-      return [];
-    }
-
-    const tableRows = table.getRowModel().rows;
-    const items: FlattenedItem[] = [];
-    const subRowHeaders = props.subRowHeaders;
-    const inlineRowLoading = props.inlineRowLoading;
-    const columnDefinitions = props.columnDefinitions;
-
-    // Process each row and insert special components
-    tableRows.forEach((row: Row<GenericObject>, index: number) => {
-      const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
-
-      if (isFirstChildofSubrow && subRowHeaders) {
-        items.push({
-          type: 'header',
-          row: row,
-          id: `header-${row.id}-${index}`,
-        });
-      }
-
-      items.push({
-        type: 'row',
-        row: row,
-        id: `row-${row.id}-${index}`
-      });
-
-      const isExpandable = row.getIsExpanded();
-      const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
-      const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && 
-        (row.depth < (columnDefinitions[0]?.cellAccessors?.length || 0));
-
-      if (isDataLoading) {
-        items.push({
-          type: 'loading',
-          row: row,
-          id: `loading-${row.id}-${index}`
-        });
-      }
-    });
-
-    return items;
-  }, [
-    isVirtualized,
-    table,
-    props.subRowHeaders,
-    props.inlineRowLoading,
-    props.columnDefinitions,
-    // Add dependency on row model hash to refresh when data changes
-    table?.getRowModel().rows.length,
-    // Important: Add sorting state as a dependency to refresh when sorting changes
-    JSON.stringify(table?.getState().sorting || []),
-    // Also add expanded state as a dependency
-    JSON.stringify(table?.getState().expanded || {}),
-  ]);
-
-  // Always initialize the virtualizer, even if we don't use it
-  // This satisfies the React hooks rules by ensuring hooks are called unconditionally
-  const virtualizer = useVirtualizer({
-    count: isVirtualized && flattenedItems.length > 0 ? flattenedItems.length : 0,
-    getScrollElement: () => containerRef.current,
-    estimateSize: (index) => {
-      // Skip if virtualization isn't enabled
-      if (!isVirtualized || flattenedItems.length === 0) return 0;
-
-      // Use consistent row height estimates
-      const item = flattenedItems[index];
-      if (!item) return getRowHeightEstimate('row'); // Default
-
-      return getRowHeightEstimate(item.type);
-    },
-    overscan: 10, // Load more items for smoother scrolling
-    getItemKey: (index) => {
-      if (!isVirtualized || flattenedItems.length === 0 || index >= flattenedItems.length) {
-        return `item-${index}`;
-      }
-      return flattenedItems[index]?.id || `item-${index}`;
-    },
-  });
-
-  // Reset virtualizer scroll position when important state changes
-  useEffect(() => {
-    if (isVirtualized && virtualizer && table && containerRef.current) {
-      // Force recalculation of all virtual items
-      virtualizer.measure();
-
-      // Reset scroll position when sorting changes
-      containerRef.current.scrollTop = 0;
-    }
-  }, [
-    isVirtualized,
-    virtualizer,
-    table,
-    containerRef,
-    JSON.stringify(table?.getState().sorting || []),
-    JSON.stringify(table?.getState().expanded || {})
-  ]);
-
-  const contextValue = {
-    ...props,
-    table,
-    tableContainerRef: containerRef,
-    virtualizer: isVirtualized ? virtualizer : null,
-    flattenedItems,
-    virtualizedRows: isVirtualized,
-    enableVirtualization: isVirtualized
-  };
-
-  return (
-    <AdvancedTableContext.Provider value={contextValue}>
-      {children}
-    </AdvancedTableContext.Provider>
-  );
-};
-
-export default AdvancedTableContext;
+export default AdvancedTableContext

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

@@ -1,14 +1,21 @@
 import React, { useContext } from "react"
 import classnames from "classnames"
+import { flexRender, Row } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 
 import { buildCss } from "../../utilities/props"
 import { globalProps } from "../../utilities/globalProps"
+import { isChrome } from "../Utilities/BrowserCheck"
+
+import LoadingInline from "../../pb_loading_inline/_loading_inline"
+import Checkbox from "../../pb_checkbox/_checkbox"
+
+import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
+import { LoadingCell } from "../Components/LoadingCell"
+import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { RegularTableView } from "../Components/RegularTableView"
-import { VirtualizedTableView } from "../Components/VirtualizedTableView"
 
 type TableBodyProps = {
   className?: string
@@ -28,15 +35,18 @@ export const TableBody = ({
 }: TableBodyProps) => {
 
   const {
-    responsive,
+    columnDefinitions,
+    enableToggleExpansion,
+    handleExpandOrCollapse,
     isPinnedLeft = false,
-    virtualizer,
-    virtualizedRows,
-    enableVirtualization
+    inlineRowLoading,
+    loading,
+    responsive,
+    table,
+    selectableRows,
+    hasAnySubRows
   } = useContext(AdvancedTableContext)
 
-  const isVirtualized = virtualizedRows || enableVirtualization;
-
   const classes = classnames(
     buildCss("pb_advanced_table_body"),
     { 'pinned-left': responsive === "scroll" && isPinnedLeft },
@@ -44,49 +54,93 @@ export const TableBody = ({
     className
   )
 
-  // Style for virtualized table container
-  const style: React.CSSProperties = virtualizer ? {
-    height: `${virtualizer.getTotalSize()}px`, // tells scrollbar how big the table is
-    position: 'relative', // needed for absolute positioning of rows
-    width: '100%',
-  } : {};
+  const columnPinning = table.getState().columnPinning;
 
   return (
     <>
-      <tbody
-          className={classes}
-          data-virtualized={isVirtualized ? 'true' : 'false'}
+      <tbody className={classes} 
           id={id}
-          style={style}
       >
-        {isVirtualized && virtualizer ? (
-          // Virtualized table view
-          <VirtualizedTableView
-              collapsibleTrail={collapsibleTrail}
-              subRowHeaders={subRowHeaders}
-          />
-        ) : (
-          // Regular non-virtualized table view
-          <RegularTableView
-              collapsibleTrail={collapsibleTrail}
-              subRowHeaders={subRowHeaders}
-          />
-        )}
-
-        {/* Fallback for when virtualization should be enabled but virtualizer isn't available */}
-        {isVirtualized && !virtualizer && (
-          <tr>
-            <td
-                colSpan={999}
-                style={{ padding: '10px', textAlign: 'center' }}
+        {table.getRowModel().rows.map((row: Row<GenericObject>) => {
+          const isExpandable = row.getIsExpanded()
+          const isFirstChildofSubrow = row.depth > 0 && row.index === 0
+          const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
+          const numberOfColumns = table.getAllFlatColumns().length
+          const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
+          const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren))
+          const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white"
+          return (
+            <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
+              {isFirstChildofSubrow && subRowHeaders && (
+                <SubRowHeaderRow
+                    collapsibleTrail={collapsibleTrail}
+                    enableToggleExpansion={enableToggleExpansion}
+                    onClick={handleExpandOrCollapse}
+                    row={row}
+                    subRowHeaders={subRowHeaders}
+                    table={table}
+                />
+              )}
+            <tr
+                className={`${rowColor} ${
+                  row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
+              }`}
+                id={`${row.index}-${row.id}-${row.depth}-row`}
             >
-              <div>No data to display.</div>
-            </td>
-          </tr>
-        )}
+              {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
+              {selectableRows && !hasAnySubRows && (
+                  <td className="checkbox-cell">
+                    <Checkbox
+                        checked={row.getIsSelected()}
+                        disabled={!row.getCanSelect()}
+                        indeterminate={row.getIsSomeSelected()}
+                        name={row.id}
+                        onChange={row.getToggleSelectedHandler()}
+                    />
+                  </td>
+                )}
+              {row.getVisibleCells().map((cell, i) => {
+                const isPinnedLeft = columnPinning.left.includes(cell.column.id)
+                const isLastCell = cell.column.parent?.columns.at(-1)?.id === cell.column.id
+
+                return (
+                  <td
+                      align="right"
+                      className={classnames(
+                        `${cell.id}-cell position_relative`,
+                        isChrome() ? "chrome-styles" : "",
+                        isPinnedLeft && 'pinned-left',
+                        isLastCell && 'last-cell',
+                      )}
+                      key={`${cell.id}-data`}
+                  >
+                    {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
+                    <span id={`${cell.id}-span`}>
+                      {loading ? (
+                        <LoadingCell />
+                      ) : (
+                        flexRender(cell.column.columnDef.cell, cell.getContext())
+                      )}
+                    </span>
+                  </td>
+                )
+              })}
+            </tr>
+
+              {/* Display LoadingInline if Row Data is querying and there are no children already */}
+              {isDataLoading ? (
+                <tr key={`${row.id}-row`}>
+                  <td colSpan={numberOfColumns}
+                      style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
+                  >
+                    <LoadingInline />
+                  </td>
+                </tr>
+              ) : null}
+            </React.Fragment>
+          )
+        })}
       </tbody>
     </>
-  );
+  )
 }
-
-export default TableBody;

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

@@ -31,46 +31,12 @@
     width: 100%;
   }
 
-  // Virtualized table styles
-  .virtualized-table-row {
-    display: table !important;
-    table-layout: fixed !important;
-    width: 100% !important;
-
-    td {
-      display: table-cell !important;
-      box-sizing: border-box !important;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    .row-selection-actions-card {
+      border-bottom-right-radius: 0px !important;
+      border-bottom-left-radius: 0px !important;
+      border-bottom-color: transparent;
+      transition: height 300ms ease;
     }
-
-    // Ensure the first column has proper width
-    td:first-child {
-      min-width: 180px;
-    }
-
-    // First column (typically the checkbox column)
-    td:first-child.checkbox-cell {
-      width: 40px !important; // Set a fixed width that matches header
-      min-width: 40px !important;
-      box-sizing: border-box !important;
-      text-align: center;
-    }
-
-    // Ensure the first data column has proper alignment with header
-    td:first-of-type:not(.checkbox-cell) {
-      min-width: 180px;
-      text-align: left;
-    }
-  }
-
-  .row-selection-actions-card {
-    border-bottom-right-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    border-bottom-color: transparent;
-    transition: height 300ms ease;
-  }
   .table-header-cells:first-child {
     min-width: 180px;
   }
@@ -101,23 +67,6 @@
       border-top-left-radius: 0px !important;
       border-top-right-radius: 0px !important;
     }
-
-    // Set fixed width for header cells to match table body
-    th {
-      box-sizing: border-box !important;
-      // Apply min-width to ensure consistent sizing
-      &.table-header-cells:first-child,
-      &.table-header-cells-custom:first-child {
-        min-width: 180px;
-      }
-
-      // Set fixed width for checkbox column
-      &.table-header-cells-custom {
-        width: 40px !important;
-        min-width: 40px !important;
-        box-sizing: border-box !important;
-      }
-    }
   }
 
   .pb_advanced_table_body {
@@ -138,36 +87,6 @@
         padding-left: 0px;
       }
     }
-
-    // Fix virtualized row borders
-    tr.virtualized-table-row {
-      border-bottom: 1px solid $border_light;
-
-      &.bg-silver {
-        td:first-child {
-          background-color: lighten($silver, $opacity_7);
-        }
-      }
-
-      &.bg-white {
-        td:first-child {
-          background-color: $white;
-        }
-      }
-
-      &.bg-row-selection {
-        td:first-child {
-          background-color: $info_subtle;
-        }
-      }
-    }
-    td {
-      [class^=pb_text_input_kit] .text_input_wrapper input {
-        padding: 0 $space_xxs;
-        font-size: 14px;
-        text-align: right;
-      }
-    }
   }
 
   .table-header-cells-active:first-child {
@@ -210,6 +129,7 @@
     max-height: 1920px;
     overflow-y: auto;
   }
+  
   // Icons
   .button-icon {
     display: flex;
@@ -331,19 +251,6 @@
       .bg-white td:first-child {
           background-color: $white;
       }
-
-      .virtualized-table-row {
-        &.bg-silver td:first-child {
-          background-color: lighten($silver, $opacity_7);
-        }
-        &.bg-white td:first-child {
-          background-color: $white;
-        }
-        &.bg-row-selection td:first-child {
-          background-color: $info_subtle;
-        }
-      }
-
       .row-selection-actions-card {
         border-right-width: 0px;
         border-left-width: 0px;
@@ -382,25 +289,6 @@
       background: $bg_dark;
     }
 
-    // Dark mode virtualized rows
-    .virtualized-table-row {
-      &.bg-white {
-        background: $bg_dark_card !important;
-
-        td:first-child {
-          background: $bg_dark_card !important;
-        }
-      }
-
-      &.bg-silver {
-        background: $bg_dark;
-
-        td:first-child {
-          background: $bg_dark;
-        }
-      }
-    }
-
     .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
       box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
@@ -471,17 +359,6 @@
         .bg-white td:first-child {
           background-color: $bg_dark_card;
         }
-
-        // Dark mode virtualized rows
-        .virtualized-table-row {
-          &.bg-silver td:first-child {
-            background-color: $bg_dark;
-          }
-          &.bg-white td:first-child {
-            background-color: $bg_dark_card;
-          }
-        }
-
         .sticky-header {
           thead {
             th:first-child {
@@ -493,4 +370,4 @@
       }
     }
   }
-}
+}