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

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

@@ -1,275 +0,0 @@
-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/Hooks/useTableActions.ts

@@ -1,66 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { Row } from "@tanstack/react-table";
-import { GenericObject } from "../../types";
-import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers";
-
-interface UseTableActionsProps {
-  table: any;
-  expanded: GenericObject;
-  setExpanded: (expanded: GenericObject) => void;
-  onToggleExpansionClick?: (arg: Row<GenericObject>) => void;
-  onRowSelectionChange?: (rowSelection: any) => void;
-}
-
-export function useTableActions({
-  table,
-  expanded,
-  setExpanded,
-  onToggleExpansionClick,
-  onRowSelectionChange
-}: UseTableActionsProps) {
-
-  // Handle expand/collapse
-  const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
-    onToggleExpansionClick && onToggleExpansionClick(row);
-
-    const expandedState = expanded;
-    const targetParent = row?.parentId;
-    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
-    setExpanded(updatedRows);
-  }, [expanded, setExpanded, onToggleExpansionClick, table]);
-
-  // Handle pagination
-  const onPageChange = useCallback((page: number) => {
-    table.setPageIndex(page - 1);
-  }, [table]);
-
-  // Handle scroll detection for infinite scroll/virtualization
-  const fetchMoreOnBottomReached = useCallback((
-    containerRefElement: HTMLDivElement | null,
-    fetchNextPage: () => void,
-    isFetching: boolean,
-    totalFetched: number,
-    totalDBRowCount: number
-  ) => {
-    if (containerRefElement) {
-      const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-      // If user scrolls near bottom, fetch more data
-      if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && totalFetched < totalDBRowCount) {
-        fetchNextPage();
-      }
-    }
-  }, []);
-
-  // Update selection state
-  useEffect(() => {
-    if (onRowSelectionChange) {
-      onRowSelectionChange(table.getState().rowSelection);
-    }
-  }, [table.getState().rowSelection, onRowSelectionChange]);
-
-  return {
-    handleExpandOrCollapse,
-    onPageChange,
-    fetchMoreOnBottomReached
-  };
-}

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -1,195 +0,0 @@
-import { useState, useCallback, useMemo } from 'react';
-import {
-  useReactTable,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  RowSelectionState,
-  Row
-} from "@tanstack/react-table";
-import { GenericObject } from "../../types";
-import { createColumnHelper } from "@tanstack/react-table";
-import { createCellFunction } from "../Utilities/CellRendererUtils";
-
-interface UseTableStateProps {
-  tableData: GenericObject[];
-  columnDefinitions: GenericObject[];
-  expandedControl?: GenericObject;
-  sortControl?: GenericObject;
-  onRowToggleClick?: (arg: Row<GenericObject>) => void;
-  selectableRows?: boolean;
-  initialLoadingRowsCount?: number;
-  loading?: boolean | string;
-  pagination?: boolean;
-  paginationProps?: GenericObject;
-  virtualizedRows?: boolean;
-  tableOptions?: GenericObject;
-  onRowSelectionChange?: (arg: RowSelectionState) => void;
-}
-
-export function useTableState({
-  tableData,
-  columnDefinitions,
-  expandedControl,
-  sortControl,
-  onRowToggleClick,
-  selectableRows,
-  initialLoadingRowsCount = 10,
-  loading,
-  pagination = false,
-  paginationProps,
-  virtualizedRows = false,
-  tableOptions
-}: UseTableStateProps) {
-  // Create a local state for expanded and setExpanded if expandedControl not used
-  const [localExpanded, setLocalExpanded] = useState({});
-  const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-
-  // Determine whether to use the prop or the local state
-  const expanded = expandedControl ? expandedControl.value : localExpanded;
-  const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
-
-  // Virtualized data handling (chunked loading)
-  const fetchSize = 20; // Number of rows per "page"
-  const [fullData] = useState(tableData); // All data from the JSON file
-  const [dataChunk, setDataChunk] = useState(fullData.slice(0, fetchSize)); // Initial chunk
-  const [totalFetched, setTotalFetched] = useState(fetchSize); // Track loaded rows
-  const [isFetching, setIsFetching] = useState(false);
-
-  // Create column structure
-  const columnHelper = createColumnHelper();
-
-  // Build columns with proper cell renderers
-  const buildColumns = useCallback((columnDefinitions: GenericObject[], isRoot = true): any[] => {
-    return columnDefinitions?.map((column, index) => {
-      const isFirstColumn = isRoot && index === 0;
-
-      // Handle grouped columns
-      if (column.columns && column.columns.length > 0) {
-        return {
-          header: column.label || "",
-          columns: buildColumns(column.columns, false),
-        };
-      }
-
-      // Define the base column structure
-      const columnStructure = {
-        ...columnHelper.accessor(column.accessor, {
-          header: column.label || "",
-        }),
-      };
-
-      if (column.cellAccessors || column.customRenderer) {
-        columnStructure.cell = createCellFunction(
-          column.cellAccessors || [],
-          column.customRenderer,
-          isFirstColumn,
-          onRowToggleClick,
-          selectableRows
-        );
-      }
-
-      return columnStructure;
-    }) || [];
-  }, [columnHelper, onRowToggleClick, selectableRows]);
-
-  const columns = useMemo(() => buildColumns(columnDefinitions), [buildColumns, columnDefinitions]);
-
-  // Sorting configuration
-  const sorting = useMemo(() => ([{
-    id: columnDefinitions[0].accessor,
-    desc: sortControl && sortControl.value !== null ? !sortControl.value.desc : false,
-  }]), [columnDefinitions, sortControl]);
-
-  // Custom state based on features enabled
-  const customState = useCallback(() => {
-    if (sortControl && selectableRows) {
-      return { state: { expanded, sorting, rowSelection } };
-    } else if (sortControl) {
-      return { state: { expanded, sorting } };
-    } else if (selectableRows) {
-      return { state: { expanded, rowSelection } };
-    } else {
-      return { state: { expanded } };
-    }
-  }, [expanded, rowSelection, sortControl, selectableRows, sorting]);
-
-  // Pagination configuration
-  const paginationInitializer = useMemo(() => {
-    if (!pagination) return {};
-
-    return {
-      getPaginationRowModel: getPaginationRowModel(),
-      paginateExpandedRows: false,
-      initialState: {
-        pagination: {
-          pageIndex: paginationProps?.pageIndex ?? 0,
-          pageSize: paginationProps?.pageSize ?? 20,
-        },
-      },
-    };
-  }, [pagination, paginationProps]);
-
-  // Initialize the table
-  const table = useReactTable({
-    data: loading ? Array(loadingStateRowCount).fill({}) : (virtualizedRows ? dataChunk : tableData),
-    columns,
-    onExpandedChange: setExpanded,
-    getSubRows: (row: GenericObject) => row.children,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    enableSortingRemoval: false,
-    sortDescFirst: true,
-    onRowSelectionChange: setRowSelection,
-    getRowId: selectableRows ? row => row.id : undefined,
-    meta: {
-      columnDefinitions
-    },
-    ...customState(),
-    ...paginationInitializer,
-    ...tableOptions,
-  });
-
-  // Check if table has any sub-rows
-  const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
-  const selectedRowsLength = Object.keys(table.getState().rowSelection).length;
-
-  // Data fetching for virtualized view
-  const fetchNextPage = useCallback(() => {
-    if (isFetching || totalFetched >= fullData.length) return;
-
-    setIsFetching(true);
-    // Simulate API call delay
-    setTimeout(() => {
-      const nextChunk = fullData.slice(totalFetched, totalFetched + fetchSize);
-      setDataChunk(prev => [...prev, ...nextChunk]);
-      setTotalFetched(prev => prev + nextChunk.length);
-      setIsFetching(false);
-    }, 500);
-  }, [isFetching, totalFetched, fullData, fetchSize]);
-
-  // Update row count for loading state
-  const updateLoadingStateRowCount = useCallback(() => {
-    const rowsCount = table.getRowModel().rows.length;
-    if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
-      setLoadingStateRowCount(rowsCount);
-    }
-  }, [loadingStateRowCount, table]);
-
-  return {
-    table,
-    expanded,
-    setExpanded,
-    hasAnySubRows,
-    selectedRowsLength,
-    fetchNextPage,
-    updateLoadingStateRowCount,
-    rowSelection,
-    fullData,
-    totalFetched,
-    isFetching
-  };
-}

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

@@ -1,73 +0,0 @@
-import React from "react";
-import { Row, Getter } from "@tanstack/react-table";
-import { GenericObject } from "../../types";
-import { CustomCell } from "../Components/CustomCell";
-
-/**
- * Creates a cell render function for table columns
- *
- * @param cellAccessors Array of accessors to use based on row depth
- * @param customRenderer Optional custom renderer function
- * @param isFirstColumn Whether this is the first column (special handling)
- * @param onRowToggleClick Optional callback for row toggle
- * @param selectableRows Whether rows are selectable
- */
-export const createCellFunction = (
-  cellAccessors: string[],
-  customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element,
-  isFirstColumn?: boolean,
-  onRowToggleClick?: (row: Row<GenericObject>) => void,
-  selectableRows?: boolean
-) => {
-  // Add display name to the returned function
-  const cellRenderer = ({
-    row,
-    getValue,
-  }: {
-    row: Row<GenericObject>
-    getValue: Getter<string>
-  }) => {
-    const rowData = row.original;
-
-    if (isFirstColumn) {
-      switch (row.depth) {
-        case 0: {
-          return (
-            <CustomCell
-                customRenderer={customRenderer}
-                getValue={getValue}
-                onRowToggleClick={onRowToggleClick}
-                row={row}
-                selectableRows={selectableRows}
-            />
-          );
-        }
-        default: {
-          // Handle other depths based on cellAccessors
-          const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
-          const accessorValue = rowData[depthAccessor];
-          return accessorValue ? (
-            <CustomCell
-                customRenderer={customRenderer}
-                onRowToggleClick={onRowToggleClick}
-                row={row}
-                selectableRows={selectableRows}
-                value={accessorValue}
-            />
-          ) : (
-            "N/A"
-          );
-        }
-      }
-    }
-
-    return customRenderer
-      ? customRenderer(row, getValue())
-      : getValue();
-  };
-
-  // Add a display name to the function to fix the react/display-name warning
-  cellRenderer.displayName = 'CellRenderer';
-
-  return cellRenderer;
-};

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

@@ -1,52 +0,0 @@
-import { Row } from "@tanstack/react-table"
-import { GenericObject } from "../../types"
-
-/**
- * Determines the background color class for a row
- */
-export const getRowColorClass = (
-  row: Row<GenericObject>,
-  inlineRowLoading: boolean
-): string => {
-  const isExpandable = row.getIsExpanded();
-  const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
-  const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
-
-  return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
-}
-
-/**
- * Determines if loading indicator should be shown for a row
- */
-export const shouldShowLoadingIndicator = (
-  row: Row<GenericObject>,
-  inlineRowLoading: boolean,
-  cellAccessorsLength: number
-): boolean => {
-  const isExpandable = row.getIsExpanded();
-  const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
-
-  return isExpandable &&
-    (inlineRowLoading && rowHasNoChildren) &&
-    (row.depth < cellAccessorsLength);
-}
-
-/**
- * Creates a virtual item style object for virtualized rows
- */
-export const createVirtualItemStyle = (startPosition: number): React.CSSProperties => {
-  return {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    transform: `translateY(${startPosition}px)`,
-  };
-}
-
-/**
- * Calculates padding left based on row depth
- */
-export const getDepthPaddingLeft = (depth: number): string => {
-  return `${depth === 0 ? 0.5 : (depth * 2)}em`;
-}