playbook_ui 14.21.2.pre.alpha.PLAY22558410 → 14.21.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e74ebcaf8b226f04a617fc63083c59c61951a3f792409c906b7556ef4976f6c0
-  data.tar.gz: 755270c0eee4c986ca9d0534ffd31bec09383994a038ab4a6da7e43740537e10
+  metadata.gz: c56ad47c1f53eb40bac67e374299659f3ad5cdcd2cb61f4cb674830b10eb8bbc
+  data.tar.gz: 9dfb9ddd7c1d200d680757e083b9ce21bacc896c9ff5b14a8a7ba2490fc9c45d
 SHA512:
-  metadata.gz: f7329823f5e763a4aa9712a78d7467fde07db90542cb2d6416ade72983d3984651f03fb3bb847f92582293623569a9c24a8756b051eec84a524b525a2164b9ce
-  data.tar.gz: 5fab13b2c33b5ee332beb81aed83254723ed0808a7d0b85cc68acadde24d79f8cdf773c7b97e73025e1a6ed00e118304533fab5581ce7bcfd46db7c7b98a843d
+  metadata.gz: f79b70fd74d0721049b8cde8a212f8f0df9030ac5506c4e2600269eb6cc9e8564e9159ee8874decc50bfbadd3fdfc5542381d9e54195d48fed0a9d6c7208b59d
+  data.tar.gz: 7a08df80bcc0f05516c60ebdc42e44a2a098a49d45bdd9d5e5ab9f3e7dd0f5936a2878761a17b14dc62c234ac37ad66bcb9c5e7704378717d4338fe8c9d67f86

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

@@ -19,7 +19,6 @@ interface CustomCellProps {
   value?: string
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
-  customStyle?: GenericObject
 } 
 
 export const CustomCell = ({
@@ -29,7 +28,6 @@ export const CustomCell = ({
   value,
   customRenderer,
   selectableRows,
-  customStyle = {},
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
@@ -45,11 +43,11 @@ export const CustomCell = ({
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
   return (
-    <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
+    <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
       <Flex 
           alignItems="center" 
           columnGap="xs"
-          justify="start"
+          justify={"start"}
           orientation="row"
       >
         {
@@ -67,7 +65,6 @@ export const CustomCell = ({
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
-              style={{ color: customStyle?.expandButtonColor }}
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"

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

@@ -4,7 +4,6 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
-import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -26,17 +25,13 @@ const TableCellRenderer = ({
   collapsibleTrail = true,
   loading = false,
   stickyLeftColumn,
-  columnPinning,
-  customRowStyle,
-  columnDefinitions,
+  columnPinning
 }: {
   row: Row<GenericObject>
   collapsibleTrail?: boolean
   loading?: boolean | string
   stickyLeftColumn?: string[]
   columnPinning: { left: string[] }
-  customRowStyle?: GenericObject
-  columnDefinitions?: {[key:string]:any}[]
 }) => {
   return (
     <>
@@ -54,14 +49,10 @@ const TableCellRenderer = ({
         })();
 
         const { column } = cell;
-
-        // Find the “owning” colDefinition by accessor. Needed for multi column logic
-        const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
-        const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
-
+        
         return (
           <td
-              align={cellAlignment}
+              align="right"
               className={classnames(
                 `${cell.id}-cell position_relative`,
                 isChrome() ? "chrome-styles" : "",
@@ -76,8 +67,6 @@ const TableCellRenderer = ({
                     ? '180px'
                     : `${column.getStart("left")}px`
                   : undefined,
-                  backgroundColor: i === 0 && customRowStyle?.backgroundColor,
-                  color: customRowStyle?.fontColor,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
@@ -111,7 +100,6 @@ export const RegularTableView = ({
     pinnedRows,
     headerHeight,
     rowHeight,
-    rowStyling = [],
     sampleRowRef,
   } = useContext(AdvancedTableContext)
 
@@ -129,6 +117,7 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
+
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
     return (
@@ -148,7 +137,6 @@ export const RegularTableView = ({
       >
         <TableCellRenderer
             collapsibleTrail={collapsibleTrail}
-            columnDefinitions={columnDefinitions}
             columnPinning={columnPinning}
             loading={loading}
             row={row}
@@ -176,7 +164,6 @@ export const RegularTableView = ({
         const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
-        const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -195,7 +182,6 @@ export const RegularTableView = ({
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
                 ref={isFirstRegularRow ? sampleRowRef : null}
-                style={{backgroundColor: customRowStyle?.backgroundColor, color: customRowStyle?.fontColor}}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (
@@ -211,9 +197,7 @@ export const RegularTableView = ({
               )}
               <TableCellRenderer
                   collapsibleTrail={collapsibleTrail}
-                  columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
-                  customRowStyle={customRowStyle}
                   loading={loading}
                   row={row}
                   stickyLeftColumn={stickyLeftColumn}

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

@@ -15,7 +15,6 @@ import Icon from "../../pb_icon/_icon"
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
 import { displayIcon } from "../Utilities/IconHelpers"
-import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
@@ -46,7 +45,6 @@ export const TableHeaderCell = ({
   table
 }: TableHeaderCellProps) => {
   const {
-    columnDefinitions,
     expanded,
     setExpanded,
     expandByDepth,
@@ -74,18 +72,6 @@ export const TableHeaderCell = ({
       header?.column.getToggleSortingHandler()(event)
     }
   }
-  const alignmentMap: Record<string, "start" | "center" | "end"> = {
-    left: "start",
-    center: "center",
-    right: "end",
-  };
-
- // Look up the “owning” columnDefinition by accessor. Needed for multi column logic
- const colDef = header
-   ? findColumnDefByAccessor(columnDefinitions, header.column.id)
-   : undefined
-
- const headerAlignment =   colDef?.columnStyling?.headerAlignment ?? colDef?.columnStyling?.headerAligment
 
   const isLeafColumn =
   header?.column.getLeafColumns().length === 1 &&
@@ -140,15 +126,9 @@ const isToggleExpansionEnabled =
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
-  let justifyHeader: justifyTypes;
+  let justifyHeader:justifyTypes;
 
-  if (headerAlignment && alignmentMap[headerAlignment]) {
-    justifyHeader = alignmentMap[headerAlignment];
-  } else if (
-    (header?.index === 0 && hasAnySubRows) ||
-    (header?.index === 0 && inlineRowLoading) ||
-    (header?.index === 0 && isToggleExpansionEnabled)
-  ) {
+  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading) || (header?.index === 0 && isToggleExpansionEnabled)) {
     justifyHeader = enableSorting ? "between" : "start";
   } else {
     justifyHeader = isLeafColumn ? "end" : "center";
@@ -185,7 +165,7 @@ const isToggleExpansionEnabled =
 
   return (
     <th
-        align={headerAlignment ? headerAlignment : "right"}
+        align="right"
         className={cellClassName}
         colSpan={header?.colSpan}
         id={cellId}
@@ -273,8 +253,8 @@ const isToggleExpansionEnabled =
                     tabIndex: 0,
                   },
                 })}
-              justify={header?.index === 0 && enableSorting ? "between" : headerAlignment ? alignmentMap[headerAlignment] : "none"}
-              paddingLeft={header?.index === 0 ? enableSorting ? "xxs" : "xs" : "none"}
+              justify={header?.index === 0 && enableSorting ? "between" : "none"}
+              paddingLeft={enableSorting ? "xxs" : "xs"}
           >
             <div>
               {flexRender(header?.column.columnDef.header, header?.getContext())}

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

@@ -1,6 +1,6 @@
-import React, { useContext, useLayoutEffect, useState, useEffect, useRef } from "react"
+import React, { useContext, useLayoutEffect, useState, useEffect } from "react"
 import classnames from "classnames"
-import { flexRender, Cell, Row } from "@tanstack/react-table"
+import { flexRender, Cell } from "@tanstack/react-table"
 import { VirtualItem } from "@tanstack/react-virtual"
 
 import { GenericObject } from "../../types"
@@ -10,8 +10,6 @@ import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
-import Detail from "../../pb_detail/_detail"
-import Flex from "../../pb_flex/_flex"
 
 import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
 import { LoadingCell } from "../Components/LoadingCell"
@@ -22,13 +20,11 @@ import AdvancedTableContext from "../Context/AdvancedTableContext"
 type VirtualizedTableViewProps = {
   collapsibleTrail?: boolean
   subRowHeaders?: string[]
-  isFetching: boolean
 }
 
 export const VirtualizedTableView = ({
   collapsibleTrail = true,
   subRowHeaders,
-  isFetching,
 }: VirtualizedTableViewProps) => {
   const {
     enableToggleExpansion,
@@ -40,7 +36,6 @@ export const VirtualizedTableView = ({
     hasAnySubRows,
     virtualizer,
     flattenedItems,
-    totalAvailableCount,
   } = useContext(AdvancedTableContext)
 
   const columnPinning = table.getState().columnPinning || { left: [] };
@@ -126,7 +121,19 @@ export const VirtualizedTableView = ({
   }
 
   // Get virtual items
-  const virtualItems: VirtualItem[] = virtualizer.getVirtualItems?.() || [];
+  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>
@@ -136,9 +143,6 @@ export const VirtualizedTableView = ({
       </tr>
     );
   }
-  
-  // Establish # of Parent Rows (so that Footer count does not include every single row)
-  const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
 
   return (
     <>
@@ -173,7 +177,7 @@ export const VirtualizedTableView = ({
         if (item.type === 'row') {
           const row = item.row;
           const isExpandable = row.getIsExpanded();
-          const rowHasNoChildren = row.original?.children && !row.original.children.length;
+          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";
 
@@ -262,30 +266,6 @@ export const VirtualizedTableView = ({
           );
         }
 
-        if (item.type === 'footer') {
-          // Render footer
-          return (
-            <tr
-                className="virtualized-table-row virtualized-footer"
-                key={`footer-row`}
-                style={virtualItemStyle}
-            >
-              <td colSpan={table.getAllFlatColumns().length}>
-                <Flex align="center"
-                    justify="center"
-                >
-
-                {isFetching ? (
-                  <LoadingInline />
-                ) : (
-                  <Detail text={`Showing ${topLevelRowCount} of ${totalAvailableCount} rows`} />
-                )}
-                </Flex>
-              </td>
-            </tr>
-          )
-        }
-
         return null;
       })}
     </>

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

@@ -8,7 +8,7 @@ import { getRowHeightEstimate } from '../Utilities/TableContainerStyles';
 const AdvancedTableContext = createContext<any>({});
 
 interface FlattenedItem {
-    type: 'header' | 'row' | 'loading' | 'footer';
+    type: 'header' | 'row' | 'loading';
     row: Row<GenericObject>;
     id: string;
 }
@@ -116,17 +116,6 @@ export const AdvancedTableProvider = ({ children, ...props }: {
       }
     });
 
-    const isFetching = props.isFetching || false;
-    const shouldAddFooter = table && !isFetching && tableRows.length > 0
-
-    if (shouldAddFooter) {
-      items.push({
-        type: 'footer',
-        row: {} as Row<GenericObject>,
-        id: `footer-row`,
-      });
-    }
-
     return items;
   }, [
     isVirtualized,
@@ -170,11 +159,10 @@ export const AdvancedTableProvider = ({ children, ...props }: {
   useEffect(() => {
     if (isVirtualized && virtualizer && table && containerRef.current) {
       // Force recalculation of all virtual items
-      virtualizer.setOptions({
-        ...virtualizer.options,
-        count: flattenedItems.length,
-      });
       virtualizer.measure();
+
+      // Reset scroll position when sorting changes
+      containerRef.current.scrollTop = 0;
     }
   }, [
     isVirtualized,
@@ -182,8 +170,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     table,
     containerRef,
     JSON.stringify(table?.getState().sorting || []),
-    JSON.stringify(table?.getState().expanded || {}),
-    flattenedItems.length,
+    JSON.stringify(table?.getState().expanded || {})
   ]);
 
   const contextValue = {

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect } from 'react';
 import { Row, RowPinningState } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers";
@@ -19,21 +19,13 @@ export function useTableActions({
   onRowSelectionChange
 }: UseTableActionsProps) {
 
-  // State to achieve 1 second delay before fetching more rows
-  const [bottomReached, setBottomReached] = useState(false)
-  const bottomTimeout = useRef<NodeJS.Timeout | null>(null)
-
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
-    if (onToggleExpansionClick) onToggleExpansionClick(row)
-      const updatedExpandedState = await updateExpandAndCollapseState(
-        table.getRowModel(),
-        expanded,
-        row?.parentId,
-        undefined
-      )
-
-      setExpanded(updatedExpandedState)
+    onToggleExpansionClick && onToggleExpansionClick(row);
+    const expandedState = expanded;
+    const targetParent = row?.parentId;
+    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
+    setExpanded(updatedRows);
   }, [expanded, setExpanded, onToggleExpansionClick, table]);
 
   // Handle pagination
@@ -43,32 +35,20 @@ export function useTableActions({
 
   // Handle scroll detection for infinite scroll/virtualization
   const fetchMoreOnBottomReached = useCallback((
-      containerRef: HTMLDivElement | null,
-      fetchNextPage: () => void,
-      isFetching: boolean,
-      totalFetched: number,
-      totalDBRowCount: number
+    containerRefElement: HTMLDivElement | null,
+    fetchNextPage: () => void,
+    isFetching: boolean,
+    totalFetched: number,
+    totalDBRowCount: number
   ) => {
-    if (!containerRef || isFetching || totalFetched >= totalDBRowCount) return
-    const { scrollTop, scrollHeight, clientHeight } = containerRef
-    const distanceFromBottom = scrollHeight - scrollTop - clientHeight
-    // If user scrolls near bottom, fetch more data after 1 second delay
-    if (distanceFromBottom < 50) {
-      if (!bottomReached) {
-        setBottomReached(true)
-        bottomTimeout.current = setTimeout(() => {
-          fetchNextPage()
-          setBottomReached(false)
-        }, 1000)
-      }
-    } else {
-      setBottomReached(false)
-      if (bottomTimeout.current) {
-        clearTimeout(bottomTimeout.current)
-        bottomTimeout.current = null
+    if (containerRefElement) {
+      const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+      // If user scrolls near bottom, fetch more data
+      if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && totalFetched < totalDBRowCount) {
+        fetchNextPage();
       }
     }
-  },[bottomReached]);
+  }, []);
 
   // Update selection state
   useEffect(() => {

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import {
   useReactTable,
   getCoreRowModel,
@@ -32,7 +32,6 @@ interface UseTableStateProps {
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
-  rowStyling?: GenericObject;
 }
 
 export function useTableState({
@@ -50,9 +49,7 @@ export function useTableState({
   tableOptions,
   columnVisibilityControl,
   pinnedRows,
-  rowStyling
 }: UseTableStateProps) {
-
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
@@ -66,8 +63,8 @@ export function useTableState({
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
   const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
   const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
-  const rowPinning = pinnedRows?.value ?? localRowPinning
-  const onRowPinningChange = pinnedRows?.onChange ?? setLocalRowPinning
+  const rowPinning = pinnedRows && pinnedRows.value || localRowPinning;
+  const setRowPinning = (pinnedRows && pinnedRows.onChange) ? pinnedRows.onChange : setLocalRowPinning;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -105,8 +102,7 @@ export function useTableState({
           column.customRenderer,
           isFirstColumn,
           onRowToggleClick,
-          selectableRows,
-          rowStyling
+          selectableRows
         );
       }
 
@@ -169,8 +165,7 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
-    onRowPinningChange,
-    getRowId: (selectableRows || pinnedRows || rowStyling) ? row => row.id : undefined,
+    getRowId: (selectableRows || pinnedRows) ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions
@@ -180,26 +175,6 @@ export function useTableState({
     ...tableOptions,
   });
 
-  // Handle row pinning changes
-    useEffect(() => {
-    const topPins = pinnedRows?.value?.top ?? [];
-    if (topPins.length === 0) {
-      onRowPinningChange({ top: [] });
-      return;
-    }
-    const rows = table.getRowModel().rows;
-    const collectAllDescendantIds = (subs: Row<GenericObject>[]): string[] =>
-      subs.flatMap(r => [r.id, ...collectAllDescendantIds(r.subRows)]);
-    const allPinned: string[] = [];
-    topPins.forEach(id => {
-      const parent = rows.find(r => r.id === id && r.depth === 0);
-      if (parent) {
-        allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
-      }
-    });
-    onRowPinningChange({ top: allPinned });
-  }, [table, pinnedRows?.value?.top?.join(',')]);
-
   // 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/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}
           />
         ) : (