playbook_ui 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PBNTR924reacttablecustomheaders6846

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a671aef2ddd39a78ec98fcb4073566d8d8c07c887e206ef6e83c6bea4bbeae07
-  data.tar.gz: 79a8b005d92dfb2a80c0908349254e76a931f8e366abccbdd079bcf3b57725bd
+  metadata.gz: dd82bb6f3ee44ed655fa00a9063867e0bf1b2475e14053635cfa045d9eabc19c
+  data.tar.gz: 17de2ee4fb645c07918923b762f2c4195ff451056c85e4dd41fd7655fd1004a7
 SHA512:
-  metadata.gz: 9e1497589d4831e05816145ea26dd5f174b94d035cdfd46ec112f973ad6ffa860821535adced274c664a81dcd356b14876a11f5162a6bb6d1a0a2fda12038799
-  data.tar.gz: 985f3701953d47a71657c909d63303cfe60413b0a374bafc96f611fbb477b4262ab4b5011c16c31e124ca05581a66af587c7d6d15b5e99997f2efd2cd43d5ad0
+  metadata.gz: e798db2746cc1381cdf2a6bf3d988f784a133ad65cddc0e6cc5085eb7586e28808b461d1d9aae1e5ad4b579474698380765c393a3ab6ff9b8537541ca8d299a5
+  data.tar.gz: 5bee6ba2e97346c45b8b38df8839d6f2e0ad481eb8c4f2299cdb01eb3b8b79a6df40c919236a4f765b0de50d9a29a8a4c877ed9a1374348f3ab14cb92f45e302

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,5 @@
 
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -14,8 +15,8 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
-@import 'pb_copy_button/copy_button';
 @import 'pb_contact/contact';
+@import 'pb_copy_button/copy_button';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
@@ -45,6 +46,7 @@
 @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';
@@ -109,7 +111,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_icon_button/icon_button';
+@import 'pb_empty_state/empty_state';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

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

@@ -0,0 +1,127 @@
+import React, { useContext } from "react"
+import classnames from "classnames"
+import { flexRender, Row, Cell } from "@tanstack/react-table"
+
+import { GenericObject } from "../../types"
+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"
+
+type RegularTableViewProps = {
+  collapsibleTrail?: boolean
+  subRowHeaders?: string[]
+}
+
+export const RegularTableView = ({
+  collapsibleTrail = true,
+  subRowHeaders,
+}: RegularTableViewProps) => {
+  const {
+    enableToggleExpansion,
+    handleExpandOrCollapse,
+    inlineRowLoading,
+    loading,
+    responsive,
+    table,
+    selectableRows,
+    hasAnySubRows,
+    isPinnedLeft = false,
+  } = useContext(AdvancedTableContext)
+
+  const columnPinning = table.getState().columnPinning || { left: [] };
+  const columnDefinitions = table.options.meta?.columnDefinitions || [];
+
+  return (
+    <>
+      {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`}
+            >
+              {/* 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: Cell<GenericObject, unknown>, i: number) => {
+                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>
+            )}
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+}
+
+export default RegularTableView;

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

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from "react";
+import Card from "../../pb_card/_card";
+import Caption from "../../pb_caption/_caption";
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+import { showActionBar, hideActionBar } from "../Utilities/ActionBarAnimationHelper";
+
+interface TableActionBarProps {
+  isVisible: boolean;
+  selectedCount: number;
+  actions?: React.ReactNode[] | React.ReactNode;
+}
+
+const TableActionBar: React.FC<TableActionBarProps> = ({
+  isVisible,
+  selectedCount,
+  actions
+}) => {
+  const cardRef = useRef(null);
+
+  useEffect(() => {
+    if (cardRef.current) {
+      if (isVisible) {
+        showActionBar(cardRef.current);
+      } else {
+        hideActionBar(cardRef.current);
+      }
+    }
+  }, [isVisible]);
+
+  return (
+    <Card
+        borderNone={!isVisible}
+        className={`${isVisible && "show-action-card row-selection-actions-card"}`}
+        htmlOptions={{ ref: cardRef as any }}
+        padding={`${isVisible ? "xs" : "none"}`}
+    >
+      <Flex
+          alignItems="center"
+          justify="between"
+      >
+        <Caption
+            color="light"
+            paddingLeft="xs"
+            size="xs"
+        >
+          {selectedCount} Selected
+        </Caption>
+        <FlexItem>{actions}</FlexItem>
+      </Flex>
+    </Card>
+  );
+};
+
+export default TableActionBar;

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

@@ -0,0 +1,33 @@
+import React from "react";
+import Pagination from "../../pb_pagination/_pagination";
+
+interface TablePaginationProps {
+  table: any;
+  onChange: (page: number) => void;
+  position: "top" | "bottom";
+  range?: number;
+}
+
+const TablePagination: React.FC<TablePaginationProps> = ({
+  table,
+  onChange,
+  position,
+  range = 5
+}) => {
+  const current = table.getState().pagination.pageIndex + 1;
+  const total = table.getPageCount();
+
+  return (
+    <Pagination
+        current={current}
+        key={`pagination-${position}-${current}`}
+        marginBottom={position === "top" ? "xs" : undefined}
+        marginTop={position === "bottom" ? "xs" : undefined}
+        onChange={onChange}
+        range={range}
+        total={total}
+    />
+  );
+};
+
+export default TablePagination;

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

@@ -0,0 +1,275 @@
+import React, { useContext, useLayoutEffect, useState, useEffect } from "react"
+import classnames from "classnames"
+import { flexRender, Cell } from "@tanstack/react-table"
+import { VirtualItem } from "@tanstack/react-virtual"
+
+import { GenericObject } from "../../types"
+
+import { isChrome } from "../Utilities/BrowserCheck"
+import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
+
+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"
+
+type VirtualizedTableViewProps = {
+  collapsibleTrail?: boolean
+  subRowHeaders?: string[]
+}
+
+export const VirtualizedTableView = ({
+  collapsibleTrail = true,
+  subRowHeaders,
+}: VirtualizedTableViewProps) => {
+  const {
+    enableToggleExpansion,
+    handleExpandOrCollapse,
+    inlineRowLoading,
+    loading,
+    table,
+    selectableRows,
+    hasAnySubRows,
+    virtualizer,
+    flattenedItems,
+  } = useContext(AdvancedTableContext)
+
+  const columnPinning = table.getState().columnPinning || { left: [] };
+  const sortingState = JSON.stringify(table.getState().sorting || []);
+  
+  // Store column widths extracted from header
+  const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
+  
+  // Function to get header cell widths
+  const getHeaderCellWidths = () => {
+    const widths: {[key: string]: string} = {};
+
+    // Get all header cells
+    const headerCells = document.querySelectorAll('.table-header-cells, .table-header-cells-custom');
+
+    // If checkbox is present in header
+    if (selectableRows && !hasAnySubRows && headerCells.length > 0) {
+      widths['checkbox'] = `${headerCells[0].getBoundingClientRect().width}px`;
+    }
+
+    // Process regular header cells
+    table.getFlatHeaders().forEach((header: any, index: number) => {
+      // Adjust index if checkbox column exists
+      const headerIndex = (selectableRows && !hasAnySubRows) ? index + 1 : index;
+
+      if (headerCells[headerIndex]) {
+        const width = headerCells[headerIndex].getBoundingClientRect().width;
+        widths[header.id] = `${width}px`;
+      }
+    });
+
+    return widths;
+  };
+
+  // Debounce function to prevent too many updates during resize
+  const debounce = <T extends (...args: any[]) => any>(func: T, wait: number): ((...args: Parameters<T>) => void) => {
+    let timeout: ReturnType<typeof setTimeout>;
+    return function executedFunction(...args: Parameters<T>) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  };
+
+  // Update column widths when component mounts and when sorting changes
+  useLayoutEffect(() => {
+    // Apply widths after a small delay to ensure header is rendered
+    const timer = setTimeout(() => {
+      setColumnWidths(getHeaderCellWidths());
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [table, selectableRows, hasAnySubRows, sortingState]);
+
+  // Add window resize listener to update widths on window resize
+  useEffect(() => {
+    // Create debounced version of the width measurement function
+    const handleResize = debounce(() => {
+      setColumnWidths(getHeaderCellWidths());
+    }, 0);
+
+    // Add the event listener
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [table, selectableRows, hasAnySubRows]);
+
+  // Safety check
+  if (!virtualizer || !flattenedItems) {
+    return (
+      <tr>
+        <td colSpan={table.getAllFlatColumns().length || 1}>
+          No data to display.
+        </td>
+      </tr>
+    );
+  }
+
+  // Get virtual items
+  let virtualItems: VirtualItem[] = [];
+  try {
+    virtualItems = virtualizer.getVirtualItems();
+  } catch (err) {
+    return (
+      <tr>
+        <td colSpan={table.getAllFlatColumns().length || 1}>
+          Error loading virtualized data.
+        </td>
+      </tr>
+    );
+  }
+
+  if (!virtualItems.length) {
+    return (
+      <tr>
+        <td colSpan={table.getAllFlatColumns().length || 1}>
+          No items to display.
+        </td>
+      </tr>
+    );
+  }
+
+  return (
+    <>
+      {virtualItems.map((virtualRow: VirtualItem) => {
+        const item = flattenedItems[virtualRow.index];
+        if (!item) return null;
+
+        // Use consistent row styling
+        const virtualItemStyle = getVirtualizedRowStyle(virtualRow.start);
+
+        if (item.type === 'header') {
+          return (
+            <tr
+                className="virtualized-table-row virtualized-header-row"
+                key={`header-${item.id}-sort-${sortingState}`}
+                style={virtualItemStyle}
+            >
+              <td colSpan={table.getAllFlatColumns().length}>
+                <SubRowHeaderRow
+                    collapsibleTrail={collapsibleTrail}
+                    enableToggleExpansion={enableToggleExpansion}
+                    onClick={handleExpandOrCollapse}
+                    row={item.row}
+                    subRowHeaders={subRowHeaders}
+                    table={table}
+                />
+              </td>
+            </tr>
+          );
+        }
+
+        if (item.type === 'row') {
+          const row = item.row;
+          const isExpandable = row.getIsExpanded();
+          const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
+          const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
+          const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
+
+          return (
+            <tr
+                className={`virtualized-table-row ${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
+                data-index={virtualRow.index}
+                key={`row-${item.id}-sort-${sortingState}`}
+                ref={(node) => {
+                  if (node) {
+                    try {
+                      virtualizer.measureElement(node);
+                    } catch (err) {
+                      // Silent error handling
+                    }
+                  }
+                }}
+                style={virtualItemStyle}
+            >
+              {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
+              {selectableRows && !hasAnySubRows && (
+                <td
+                    className="checkbox-cell"
+                    style={{ width: columnWidths['checkbox'] || 'auto' }}
+                >
+                  <Checkbox
+                      checked={row.getIsSelected()}
+                      disabled={!row.getCanSelect()}
+                      indeterminate={row.getIsSomeSelected()}
+                      name={row.id}
+                      onChange={row.getToggleSelectedHandler()}
+                  />
+                </td>
+              )}
+
+              {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
+                const isPinnedLeft = columnPinning.left.includes(cell.column.id);
+                const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
+                const cellWidth = columnWidths[cell.column.id] || 'auto';
+
+                return (
+                  <td
+                      align="right"
+                      className={classnames(
+                        `${cell.id}-cell position_relative`,
+                        isChrome() ? "chrome-styles" : "",
+                        isPinnedLeft && 'pinned-left',
+                        isLastCell && 'last-cell',
+                      )}
+                      key={`${cell.id}-data`}
+                      style={{ width: cellWidth }}
+                  >
+                    {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>
+          );
+        }
+
+        if (item.type === 'loading') {
+          // Render loading indicator
+          const row = item.row;
+          const numberOfColumns = table.getAllFlatColumns().length;
+
+          return (
+            <tr
+                className="virtualized-table-row virtualized-loading-row"
+                key={`loading-${item.id}-sort-${sortingState}`}
+                style={virtualItemStyle}
+            >
+              <td
+                  colSpan={numberOfColumns}
+                  style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
+              >
+                <LoadingInline />
+              </td>
+            </tr>
+          );
+        }
+
+        return null;
+      })}
+    </>
+  );
+}
+
+export default VirtualizedTableView;

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

@@ -1,5 +1,145 @@
-import { createContext } from "react"
+import React, { createContext, useRef, useMemo, useEffect } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
-const AdvancedTableContext = createContext<any>({})
+import { Row } from "@tanstack/react-table";
+import { GenericObject } from "../../types";
+import { getRowHeightEstimate } from '../Utilities/TableContainerStyles';
 
-export default AdvancedTableContext
+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;