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

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

@@ -1,23 +1,38 @@
-import React, { useRef, useEffect } from "react";
-import classnames from "classnames";
+import React, { useState, useEffect, useCallback, useRef } from "react"
+import classnames from "classnames"
 
-import { GenericObject } from "../types";
-import { Row, RowSelectionState } from "@tanstack/react-table";
+import { GenericObject } from "../types"
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps, GlobalProps } from "../utilities/globalProps";
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  Row,
+  useReactTable,
+  Getter,
+  RowSelectionState
+} from "@tanstack/react-table"
 
-import Table from "../pb_table/_table";
-import { AdvancedTableProvider } from "./Context/AdvancedTableContext";
-import { getVirtualizedContainerStyles } from "./Utilities/TableContainerStyles";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
+import { globalProps, GlobalProps } from "../utilities/globalProps"
 
-import { TableHeader } from "./SubKits/TableHeader";
-import { TableBody } from "./SubKits/TableBody";
-import TablePagination from "./Components/TablePagination";
-import TableActionBar from "./Components/TableActionBar";
+import Table from "../pb_table/_table"
+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 { useTableState } from "./Hooks/useTableState";
-import { useTableActions } from "./Hooks/useTableActions";
+import AdvancedTableContext from "./Context/AdvancedTableContext"
+
+import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
+import { showActionBar, hideActionBar } from "./Utilities/ActionBarAnimationHelper"
+
+import { CustomCell } from "./Components/CustomCell"
+import { TableHeader } from "./SubKits/TableHeader"
+import { TableBody } from "./SubKits/TableBody"
+import Pagination from "../pb_pagination/_pagination"
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -48,8 +63,7 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
-  virtualizedRows?: boolean
-} & GlobalProps;
+} & GlobalProps
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
@@ -81,149 +95,282 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     tableProps,
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
-    virtualizedRows = false,
-  } = props;
+  } = props
 
-  // Component refs
-  const tableWrapperRef = useRef<HTMLDivElement>(null);
+  const [loadingStateRowCount, setLoadingStateRowCount] = useState(
+    initialLoadingRowsCount
+  )
 
-  // Initialize table state
-  const {
-    table,
-    expanded,
-    setExpanded,
-    hasAnySubRows,
-    selectedRowsLength,
-    fetchNextPage,
-    updateLoadingStateRowCount,
-    fullData,
-    totalFetched,
-    isFetching
-  } = useTableState({
-    tableData,
-    columnDefinitions,
-    expandedControl,
-    sortControl,
-    onRowToggleClick,
-    selectableRows,
-    initialLoadingRowsCount,
-    loading,
-    pagination,
-    paginationProps,
-    virtualizedRows,
-    tableOptions,
-    onRowSelectionChange
-  });
+  // Create a local state for expanded and setExpanded if expandedControl not used
+  const [localExpanded, setLocalExpanded] = useState({})
 
-  // Initialize table actions
-  const {
-    handleExpandOrCollapse,
-    onPageChange,
-    fetchMoreOnBottomReached
-  } = useTableActions({
-    table,
-    expanded,
-    setExpanded,
-    onToggleExpansionClick,
-    onRowSelectionChange
-  });
+  // Determine whether to use the prop or the local state
+  const expanded = expandedControl ? expandedControl.value : localExpanded
+  const setExpanded = expandedControl
+    ? expandedControl.onChange
+    : setLocalExpanded
+
+  const columnHelper = createColumnHelper()
+
+  //Row Selection
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  //Create cells for columns, with customization for first column
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, isFirstColumn?: boolean) => {
+    const columnCells = ({
+      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()
+    }
+    return columnCells
+  }
+
+  const buildColumns = (columnDefinitions: GenericObject[], isRoot= true): any => {
+    return (
+      columnDefinitions &&
+      columnDefinitions.map((column, index) => {
+        const isFirstColumn = isRoot && index === 0; 
+        //Checking to see if grouped column or not
+        if (column.columns && column.columns.length > 0) {
+          return {
+            header: column.label || "",
+            columns: buildColumns(column.columns, false),
+          };
+        } else {
+          // 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
+            );
+          }
+
+          return columnStructure;
+        }
+      })
+    );
+  };
+
+  //Create column array in format needed by Tanstack
+  const columns = buildColumns(columnDefinitions);
+
+  //Syntax for sorting Array if we want to manage state ourselves
+  const sorting = [
+    {
+      id: columnDefinitions[0].accessor,
+      desc:
+        sortControl && sortControl.value !== null
+          ? !sortControl.value.desc
+          : false,
+    },
+  ]
+
+  const customState = () => {
+    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 } }
+    }
+  }
+
+  const paginationInitializer = pagination ? {
+    getPaginationRowModel: getPaginationRowModel(),
+    paginateExpandedRows: false,
+    initialState: {
+        pagination: {
+            pageIndex: paginationProps?.pageIndex ?? 0,
+            pageSize: paginationProps?.pageSize ??  20,
+        },
+    },
+} : {}
+
+//initialize table
+  const table = useReactTable({
+    data: loading ? Array(loadingStateRowCount).fill({}) : 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,
+    ...customState(),
+    ...paginationInitializer,
+    ...tableOptions,
+  })
+
+  const tableRows = table.getRowModel()
+
+  const hasAnySubRows = tableRows.rows.some(row => row.subRows && row.subRows.length > 0);
+  const selectedRowsLength = Object.keys(table.getState().rowSelection).length
+
+  useEffect(() => {
+    if (onRowSelectionChange) {
+      onRowSelectionChange(table.getState().rowSelection)
+    }
+  } , [table.getState().rowSelection, onRowSelectionChange])
 
   // Set table row count for loading state
+  const updateLoadingStateRowCount = useCallback(() => {
+    const rowsCount = table.getRowModel().rows.length
+    if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
+      setLoadingStateRowCount(rowsCount)
+    }
+  }, [tableData, loadingStateRowCount])
+
   useEffect(() => {
     if (!loading) {
-      updateLoadingStateRowCount();
+      updateLoadingStateRowCount()
     }
-  }, [loading, updateLoadingStateRowCount]);
+  }, [loading, updateLoadingStateRowCount])
 
-  // Check for infinite scroll
-  useEffect(() => {
-    fetchMoreOnBottomReached(
-      tableWrapperRef.current,
-      fetchNextPage,
-      isFetching,
-      totalFetched,
-      fullData.length
-    );
-  }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
+  const handleExpandOrCollapse = async (row: Row<GenericObject>) => {
+    onToggleExpansionClick && onToggleExpansionClick(row)
+  
+    const expandedState = expanded;
+    const targetParent = row?.parentId;
+    const updatedRows = await updateExpandAndCollapseState(tableRows, expandedState, targetParent)
+    setExpanded(updatedRows)
+  }
 
-  // Build CSS classes and props
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
-    maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
+    maxHeight ? `advanced-table-max-height-${maxHeight}` : '', // max height as kit prop not global prop to control overflow-y
     globalProps(props),
     className
-  );
+  )
 
-  // Table wrapper styling with virtualization support
-  const tableWrapperStyle = virtualizedRows
-    ? getVirtualizedContainerStyles(maxHeight)
-    : {};
+  const onPageChange = (page: number) => {
+    table.setPageIndex(page - 1)
+  }
+//When to show the actions bar as a whole
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
 
-  // Visibility flag for action bar
-  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
+  //Ref and useEffect for animating the actions bar
+  const cardRef = useRef(null);
+  useEffect(() => {
+    if (cardRef.current) {
+      if (isActionBarVisible) {
+        showActionBar(cardRef.current);
+      } else {
+        hideActionBar(cardRef.current);
+      }
+    }
+  }, [isActionBarVisible]);
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
+    <div {...ariaProps} 
+        {...dataProps} 
         {...htmlProps}
-        className={classes}
+        className={classes} 
         id={id}
-        onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
-          e.currentTarget,
-          fetchNextPage,
-          isFetching,
-          totalFetched,
-          fullData.length
-        ) : undefined}
-        ref={tableWrapperRef}
-        style={tableWrapperStyle as React.CSSProperties}
     >
-      <AdvancedTableProvider
-          columnDefinitions={columnDefinitions}
-          enableToggleExpansion={enableToggleExpansion}
-          enableVirtualization={virtualizedRows}
-          expanded={expanded}
-          expandedControl={expandedControl}
-          handleExpandOrCollapse={handleExpandOrCollapse}
-          hasAnySubRows={hasAnySubRows}
-          inlineRowLoading={inlineRowLoading}
-          isActionBarVisible={isActionBarVisible}
-          loading={loading}
-          responsive={responsive}
-          selectableRows={selectableRows}
-          setExpanded={setExpanded}
-          showActionsBar={showActionsBar}
-          sortControl={sortControl}
-          subRowHeaders={tableOptions?.subRowHeaders}
-          table={table}
-          tableContainerRef={tableWrapperRef}
-          toggleExpansionIcon={toggleExpansionIcon}
-          virtualizedRows={virtualizedRows}
+      <AdvancedTableContext.Provider
+          value={{
+            columnDefinitions,
+            enableToggleExpansion,
+            expanded,
+            expandedControl,
+            handleExpandOrCollapse,
+            inlineRowLoading,
+            isActionBarVisible,
+            loading,
+            responsive,
+            setExpanded,
+            sortControl,
+            table,
+            toggleExpansionIcon,
+            showActionsBar,
+            selectableRows,
+            hasAnySubRows
+          }}
       >
-        <React.Fragment>
-          {/* Top Pagination */}
-          {pagination && (
-            <TablePagination
-                onChange={onPageChange}
-                position="top"
-                range={paginationProps?.range}
-                table={table}
-            />
-          )}
-
-          {/* Selection Action Bar */}
-          <TableActionBar
-              actions={actions}
-              isVisible={isActionBarVisible}
-              selectedCount={selectedRowsLength}
-          />
-
-          {/* Main Table */}
+        <>
+          {pagination &&
+              <Pagination
+                  current={table.getState().pagination.pageIndex + 1}
+                  key={`pagination-top-${table.getState().pagination.pageIndex + 1}`}
+                  marginBottom="xs"
+                  onChange={onPageChange}
+                  range={paginationProps?.range ? paginationProps?.range : 5}
+                  total={table.getPageCount()}
+                  />
+          }
+          <Card
+              borderNone={!isActionBarVisible}
+              className={`${isActionBarVisible && "show-action-card row-selection-actions-card"}`}
+              htmlOptions={{ ref: cardRef as any }}
+              padding={`${isActionBarVisible ? "xs" : "none"}`}
+          >
+            <Flex alignItems="center" 
+                justify="between"
+            >
+              <Caption color="light" 
+                  paddingLeft="xs" 
+                  size="xs"
+              >
+                {selectedRowsLength} Selected
+              </Caption>
+              <FlexItem>{actions}</FlexItem>
+            </Flex>
+          </Card>
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}
@@ -241,24 +388,23 @@ const AdvancedTable = (props: AdvancedTableProps) => {
               </>
             )}
           </Table>
-
-          {/* Bottom Pagination */}
-          {pagination && (
-            <TablePagination
+          {pagination &&
+            <Pagination
+                current={table.getState().pagination.pageIndex + 1}
+                key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
+                marginTop="xs"
                 onChange={onPageChange}
-                position="bottom"
-                range={paginationProps?.range}
-                table={table}
+                range={paginationProps?.range ? paginationProps?.range : 5}
+                total={table.getPageCount()}
             />
-          )}
-        </React.Fragment>
-      </AdvancedTableProvider>
+          }
+        </>
+      </AdvancedTableContext.Provider>
     </div>
-  );
-};
+  )
+}
 
-// Re-export sub-components
-AdvancedTable.Header = TableHeader;
-AdvancedTable.Body = TableBody;
+AdvancedTable.Header = TableHeader
+AdvancedTable.Body = TableBody
 
-export default AdvancedTable;
+export default AdvancedTable

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCollapsibleTrail = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableColumnHeaders = (props) => {

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

@@ -1,7 +1,5 @@
 import React from "react"
-import AdvancedTable from "../../pb_advanced_table/_advanced_table"
-import Pill from "../../pb_pill/_pill"
-
+import { AdvancedTable, Pill } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableColumnHeadersCustomCell = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import AdvancedTable from '../../pb_advanced_table/_advanced_table';
+import { AdvancedTable } from "playbook-ui";
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnHeadersMultiple = (props) => {

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

@@ -1,12 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import Pill from "../../pb_pill/_pill"
-import Body from "../../pb_body/_body"
-import Flex from "../../pb_flex/_flex"
-import Detail from "../../pb_detail/_detail"
-import Caption from "../../pb_caption/_caption"
-import Badge from "../../pb_badge/_badge"
-import Title from "../../pb_title/_title"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCustomCell = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableDefault = (props) => {

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableExpandedControl = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
 
 const AdvancedTableInlineRowLoading = (props) => {

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import Button from "../../pb_button/_button"
+import { AdvancedTable } from "playbook-ui"
+import { Button } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableLoading = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
 const AdvancedTableNoSubrows = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 
 const AdvancedTablePagination = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 
 const AdvancedTablePaginationWithProps = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import Title from '../../pb_title/_title'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
 
 const AdvancedTableSelectableRows = (props) => {

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

@@ -1,7 +1,5 @@
 import React, {useState} from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button"
-import Flex from "../../pb_flex/_flex"
+import { AdvancedTable, CircleIconButton, Flex } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
 const AdvancedTableSelectableRowsActions = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
 const AdvancedTableSelectableRowsHeader = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
 const AdvancedTableSelectableRowsNoSubrows = (props) => {