playbook_ui 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR902multilevelselecthiddeninputbug6580

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

@@ -1,38 +1,23 @@
-import React, { useState, useEffect, useCallback, useRef } from "react"
-import classnames from "classnames"
+import React, { useRef, useEffect } from "react";
+import classnames from "classnames";
 
-import { GenericObject } from "../types"
+import { GenericObject } from "../types";
+import { Row, RowSelectionState } from "@tanstack/react-table";
 
-import {
-  createColumnHelper,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  Row,
-  useReactTable,
-  Getter,
-  RowSelectionState
-} from "@tanstack/react-table"
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
-import { globalProps, GlobalProps } from "../utilities/globalProps"
+import Table from "../pb_table/_table";
+import { AdvancedTableProvider } from "./Context/AdvancedTableContext";
+import { getVirtualizedContainerStyles } from "./Utilities/TableContainerStyles";
 
-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 { TableHeader } from "./SubKits/TableHeader";
+import { TableBody } from "./SubKits/TableBody";
+import TablePagination from "./Components/TablePagination";
+import TableActionBar from "./Components/TableActionBar";
 
-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"
+import { useTableState } from "./Hooks/useTableState";
+import { useTableActions } from "./Hooks/useTableActions";
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -63,7 +48,8 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
-} & GlobalProps
+  virtualizedRows?: boolean
+} & GlobalProps;
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
@@ -95,281 +81,149 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     tableProps,
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
-  } = props
-
-  const [loadingStateRowCount, setLoadingStateRowCount] = useState(
-    initialLoadingRowsCount
-  )
-
-  // Create a local state for expanded and setExpanded if expandedControl not used
-  const [localExpanded, setLocalExpanded] = useState({})
-
-  // 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, index?: number) => {
-    const columnCells = ({
-      row,
-      getValue,
-    }: {
-      row: Row<GenericObject>
-      getValue: Getter<string>
-    }) => {
-      const rowData = row.original
-
-    if (index === 0) {
-      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
-  }
+    virtualizedRows = false,
+  } = props;
 
-  const buildColumns = (columnDefinitions: GenericObject[]): any => {
-    return (
-      columnDefinitions &&
-      columnDefinitions.map((column, index) => {
-        //Checking to see if grouped column or not
-        if (column.columns && column.columns.length > 0) {
-          return {
-            header: column.label || "",
-            columns: buildColumns(column.columns),
-          };
-        } else {
-          // Define the base column structure
-          const columnStructure = {
-            ...columnHelper.accessor(column.accessor, {
-              header: column.label || "",
-            }),
-          };
+  // Component refs
+  const tableWrapperRef = useRef<HTMLDivElement>(null);
 
-          if (column.cellAccessors || column.customRenderer) {
-            columnStructure.cell = createCellFunction(
-              column.cellAccessors,
-              column.customRenderer,
-              index
-            );
-          }
-
-          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
+  // 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
+  });
 
-  useEffect(() => {
-    if (onRowSelectionChange) {
-      onRowSelectionChange(table.getState().rowSelection)
-    }
-  } , [table.getState().rowSelection, onRowSelectionChange])
+  // Initialize table actions
+  const {
+    handleExpandOrCollapse,
+    onPageChange,
+    fetchMoreOnBottomReached
+  } = useTableActions({
+    table,
+    expanded,
+    setExpanded,
+    onToggleExpansionClick,
+    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]);
 
-  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)
-  }
+  // Check for infinite scroll
+  useEffect(() => {
+    fetchMoreOnBottomReached(
+      tableWrapperRef.current,
+      fetchNextPage,
+      isFetching,
+      totalFetched,
+      fullData.length
+    );
+  }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+  // Build CSS classes and props
+  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}` : '', // max height as kit prop not global prop to control overflow-y
+    maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     globalProps(props),
     className
-  )
+  );
 
-  const onPageChange = (page: number) => {
-    table.setPageIndex(page - 1)
-  }
-//When to show the actions bar as a whole
-  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
+  // Table wrapper styling with virtualization support
+  const tableWrapperStyle = virtualizedRows
+    ? getVirtualizedContainerStyles(maxHeight)
+    : {};
 
-  //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]);
+  // Visibility flag for action bar
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   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}
     >
-      <AdvancedTableContext.Provider
-          value={{
-            columnDefinitions,
-            enableToggleExpansion,
-            expanded,
-            expandedControl,
-            handleExpandOrCollapse,
-            inlineRowLoading,
-            isActionBarVisible,
-            loading,
-            responsive,
-            setExpanded,
-            sortControl,
-            table,
-            toggleExpansionIcon,
-            showActionsBar,
-            selectableRows,
-            hasAnySubRows
-          }}
+      <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}
       >
-        <>
-          {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>
+        <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 */}
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}
@@ -387,23 +241,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
               </>
             )}
           </Table>
-          {pagination &&
-            <Pagination
-                current={table.getState().pagination.pageIndex + 1}
-                key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
-                marginTop="xs"
+
+          {/* Bottom Pagination */}
+          {pagination && (
+            <TablePagination
                 onChange={onPageChange}
-                range={paginationProps?.range ? paginationProps?.range : 5}
-                total={table.getPageCount()}
+                position="bottom"
+                range={paginationProps?.range}
+                table={table}
             />
-          }
-        </>
-      </AdvancedTableContext.Provider>
+          )}
+        </React.Fragment>
+      </AdvancedTableProvider>
     </div>
-  )
-}
+  );
+};
 
-AdvancedTable.Header = TableHeader
-AdvancedTable.Body = TableBody
+// Re-export sub-components
+AdvancedTable.Header = TableHeader;
+AdvancedTable.Body = TableBody;
 
-export default AdvancedTable
+export default AdvancedTable;

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -17,14 +17,21 @@ module Playbook
                         default: "scroll"
       prop :table_props, type: Playbook::Props::HashProp,
                          default: {}
+      prop :max_height, type: Playbook::Props::Enum,
+                        values: %w[auto xs sm md lg xl xxl xxxl],
+                        default: "auto"
 
       def classname
-        generate_classname("pb_advanced_table", responsive_classname, separator: " ")
+        generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
       end
 
       def responsive_classname
         responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
       end
+
+      def max_height_classname
+        max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
+      end
     end
   end
 end

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

@@ -0,0 +1,75 @@
+import React from "react"
+import { AdvancedTable, Pill } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnHeadersCustomCell = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          accessor: "newEnrollments",
+          label: "New Enrollments",
+          customRenderer: (row, value) => (
+            <Pill text={value} 
+                variant="success" 
+            />
+          ),
+        },
+        {
+          accessor: "scheduledMeetings",
+          label: "Scheduled Meetings",
+          customRenderer: (row, value) => (
+            <Pill text={value} 
+                variant="info" 
+            />
+          ),
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          accessor: "attendanceRate",
+          label: "Attendance Rate",
+        },
+        {
+          accessor: "completedClasses",
+          label: "Completed Classes",
+          customRenderer: (row, value) => (
+            <Pill text={value} 
+                variant="error" 
+            />
+          ),
+        },
+        {
+          accessor: "classCompletionRate",
+          label: "Class Completion Rate",
+        },
+        {
+          accessor: "graduatedStudents",
+          label: "Graduated Students",
+        },
+      ],
+    },
+  ];
+  
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnHeadersCustomCell

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

@@ -0,0 +1,50 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
+
+const AdvancedTableInfiniteScroll = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          virtualizedRows
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableInfiniteScroll

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, sticky: true }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { container: false, sticky: true }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md

@@ -1 +1,3 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).
+
+This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#table-props-sticky-header) doc example below.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md

@@ -1,3 +1,3 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
 
 This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props-sticky-header) doc example below.