playbook_ui 13.17.0 → 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2159

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8c288d80cbfc92741e976eda7ca6fd7e4ecbf256b5f5ad9e4e8a23f2b4ddb6ae
-  data.tar.gz: 675612e33fd9e560aa274763e5de44bfea34fd1af570d03b951a803994fbd4dd
+  metadata.gz: ed6b5c8bc5abff794a42552366bce14785ce52a52f77e4897a96c59279b6bab0
+  data.tar.gz: 0b1feee9f1e0abafb95db62e695a1c4df57a95f82e0acdf0e079a9febf22f52c
 SHA512:
-  metadata.gz: 3d14807433425abbbd0fdf53733c4e2addc7ebb6506d35a89ea7b06f06746c39e815d7e3100a57e54cf4fea14cfb8779693b0140da9d4b4f31eb5867a752b467
-  data.tar.gz: 916468edea21563fb47710ec9a691e16a0ba1852fc4b4f97637884d560a5ae0b7b55a6a434bfd73fec6d756e68b5af89a5b4b49f2b97f4f19d3b38fa4463df0e
+  metadata.gz: 73a5a055067a0942784bb05576cf3cfc1002be59a2a06a061ea130da7f2eb561d86f61db61704874231d209ad32ead88ae47775058d43e2a7aba2bf4f73942ac
+  data.tar.gz: 2bff7638226878a69f3c8b7d3eed25c0a794be24894f82164983b8829d46c9cf874ec880f18e396052b615cc58d824420058fff6a698d23848b43bec7e674481

data/app/pb_kits/playbook/_reset.scss

@@ -1,5 +1,5 @@
-@import "./tokens/typography";
-@import "./tokens/colors";
+@import "tokens/typography";
+@import "tokens/colors";
 
 * {
   box-sizing: border-box;

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

@@ -23,20 +23,22 @@ export const CustomCell = ({
   value,
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded } = useContext(AdvancedTableContext);
-  const RowWithoutChildren = row.originalSubRows === undefined;
 
   const handleOnExpand = (row: Row<DataType>) => {
     onRowToggleClick && onRowToggleClick(row);
     setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
   };
 
+  const RowHasChildren = row.original.children ? true : false
+
+
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
       <Flex alignItems="center" 
           columnGap="xs"
           orientation="row"
       >
-        {!RowWithoutChildren ? (
+        {RowHasChildren ? (
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
@@ -53,7 +55,7 @@ export const CustomCell = ({
             )}
           </button>
         ) : null}
-        <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
+        <FlexItem paddingLeft={RowHasChildren? "none" : "xs"}>
           {row.depth === 0 ? getValue() : value}
         </FlexItem>
       </Flex>

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

@@ -12,7 +12,7 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 interface SubRowHeaderRowProps {
   collapsibleTrail?: boolean
-  enableToggleExpansion?: "all" | "header"
+  enableToggleExpansion?: "all" | "header" | "none"
   onClick: (row: Row<DataType>) => void
   row: Row<DataType>
   subRowHeaders?: string[]
@@ -28,6 +28,7 @@ export const SubRowHeaderRow = ({
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
   const numberOfColumns = table.getAllFlatColumns().length
+  const canExpand = row.depth < subRowHeaders.length
 
   return (
     <tr className="custom-row bg-silver">
@@ -42,13 +43,13 @@ export const SubRowHeaderRow = ({
           <Flex align="center" 
               columnGap="xs"
           >
-            {enableToggleExpansion === "all" && row.getCanExpand() ? (
+            {enableToggleExpansion === "all" && canExpand ? (
               <ToggleIconButton onClick={onClick} 
                   row={row}
               />
             ) : null}
             <Caption
-                marginLeft={row.getCanExpand() ? "none" : "xs"}
+                marginLeft={canExpand ? "none" : "xs"}
                 text={subRowHeaders[row.depth - 1]}
             />
           </Flex>

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

@@ -12,11 +12,10 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 type TableHeaderCellProps = {
   enableSorting?: boolean
-  enableToggleExpansion?: "all" | "header"
+  enableToggleExpansion?: "all" | "header" | "none"
   handleExpandOrCollapse?: () => void
   header?: Header<DataType, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
-  headerId?: string
   loading?: boolean
   sortIcon?: string | string[]
 } & GlobalProps
@@ -27,7 +26,6 @@ export const TableHeaderCell = ({
   handleExpandOrCollapse,
   header,
   headerChildren,
-  headerId,
   loading,
   sortIcon,
 }: TableHeaderCellProps) => {
@@ -50,10 +48,22 @@ const cellClassName = classnames("table-header-cells",
 );
 
 const cellId = `${loading ? 
-    `loading-${header.id}${headerId ? `-${headerId}` : ""}`
-    : `${header.id}${headerId ? `-${headerId}` : ""}`
+    `loading-${header.id}`
+    : `${header.id}`
 }`;
 
+const isToggleExpansionEnabledLoading =
+  header.index === 0 &&
+  loading &&
+  (enableToggleExpansion === "all" || "header") &&
+  enableToggleExpansion !== "none";
+  
+const isToggleExpansionEnabled =
+  header.index === 0 &&
+  !loading &&
+  (enableToggleExpansion === "all" || "header") &&
+  enableToggleExpansion !== "none";
+
   return (
     <th
         align="right"
@@ -72,17 +82,12 @@ const cellId = `${loading ?
         <Flex
             alignItems="center"
             justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
-            paddingLeft={loading ? "sm" : "none"}
         >
-          {header.index === 0 &&
-            !loading &&
-            (enableToggleExpansion === "all" || "header") && (
+          {isToggleExpansionEnabled && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
 
-          {header.index === 0 &&
-            loading &&
-            (enableToggleExpansion === "all" || "header") && (
+          {isToggleExpansionEnabledLoading &&(
               <div className="loading-toggle-icon header-toggle-icon" />
             )}
 
@@ -114,7 +119,7 @@ const cellId = `${loading ?
               header.column.getCanSort() &&
               enableSorting &&
               (loading ? (
-                <div className="loading-toggle-icon header-sort-icon" />
+                <div className="loading-toggle-icon" />
               ) : (
                 <SortIconButton header={header} 
                     sortIcon={sortIcon} 

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -1,4 +1,7 @@
 import React, { useContext } from "react"
+import classnames from "classnames";
+import { buildCss } from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import { flexRender, Row } from "@tanstack/react-table"
 
@@ -10,28 +13,45 @@ import { isChrome } from "../Utilities/BrowserCheck"
 import { DataType } from "../Utilities/types"
 
 type TableBodyProps = {
+  className?: string;
   collapsibleTrail?: boolean
+  id?: string;
   subRowHeaders?: string[]
 }
 
 export const TableBody = ({
+  className,
   collapsibleTrail = true,
+  id,
   subRowHeaders,
+  ...props
 }: TableBodyProps) => {
+
   const {
+    columnDefinitions,
     enableToggleExpansion,
     handleExpandOrCollapse,
     loading,
     table,
   } = useContext(AdvancedTableContext)
+
+  const classes = classnames(
+    buildCss("pb_advanced_table_body"),
+    globalProps(props),
+    className
+  );
+
   return (
     <>
-      <tbody>
+      <tbody className={classes} 
+          id={id}
+      >
         {table.getRowModel().rows.map((row: Row<DataType>) => {
           const isExpandable = row.getIsExpanded()
           const isFirstChildofSubrow = row.depth > 0 && row.index === 0
-          const rowHasNoChildren = !row.original.children?.length
+          const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
           const numberOfColumns = table.getAllFlatColumns().length
+          const isDataLoading = isExpandable && rowHasNoChildren && (row.depth < columnDefinitions[0].cellAccessors?.length)
 
           return (
             <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -79,9 +99,11 @@ export const TableBody = ({
               </tr>
 
               {/* Display LoadingInline if Row Data is querying and there are no children already */}
-              {isExpandable && rowHasNoChildren && row.depth === 0 ? (
+              {isDataLoading ? (
                 <tr key={`${row.id}-row`}>
-                  <td colSpan={numberOfColumns}>
+                  <td colSpan={numberOfColumns}
+                      style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
+                  >
                     <LoadingInline />
                   </td>
                 </tr>

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -1,4 +1,7 @@
 import React, { useContext } from "react"
+import classnames from "classnames";
+import { buildCss } from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
 import { HeaderGroup } from "@tanstack/react-table"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 import { TableHeaderCell } from "../Components/TableHeaderCell"
@@ -6,16 +9,19 @@ import { DataType } from "../Utilities/types"
 
 type TableHeaderProps = {
   children?: React.ReactNode | React.ReactNode[]
+  className?: string
   enableSorting?: boolean
-  headerId?: string
+  id?: string;
   sortIcon?: string | string[]
 }
 
 export const TableHeader = ({
   children,
+  className,
   enableSorting = false,
-  headerId,
+  id,
   sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
+  ...props
 }: TableHeaderProps) => {
   const {
     enableToggleExpansion,
@@ -24,9 +30,18 @@ export const TableHeader = ({
     table,
   } = useContext(AdvancedTableContext)
 
+  const classes = classnames(
+    buildCss("pb_advanced_table_header"),
+    globalProps(props),
+    className
+  );
+
+
   return (
     <>
-      <thead>
+      <thead className={classes}
+          id={id}
+      >
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
@@ -37,7 +52,6 @@ export const TableHeader = ({
                   handleExpandOrCollapse={handleExpandOrCollapse}
                   header={header}
                   headerChildren={children}
-                  headerId={headerId}
                   key={`${header.id}-header`}
                   loading={loading}
                   sortIcon={sortIcon}

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

@@ -24,10 +24,9 @@ export const updateExpandAndCollapseState = (
   // Update isExpansionConsistent variable
   for (const row of rows) {
     if (
-      row.getCanExpand() &&
-      (targetParent === undefined
+      targetParent === undefined
         ? row.depth === 0
-        : targetParent === row.parentId)
+        : targetParent === row.parentId
     ) {
       areRowsExpanded.add(row.getIsExpanded())
       if (areRowsExpanded.size > 1) {
@@ -48,7 +47,7 @@ export const updateExpandAndCollapseState = (
     })
   } else {
     for (const row of rows) {
-      if (row.getCanExpand() && targetParent === row.parentId) {
+      if (targetParent === row.parentId) {
         updateExpandedRows[row.id] = !isExpansionConsistent
           ? true
           : !row.getIsExpanded()

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import Table from "../pb_table/_table";
 import {
@@ -28,8 +28,9 @@ type AdvancedTableProps = {
   className?: string;
   columnDefinitions: DataType[];
   data?: { [key: string]: string };
-  enableToggleExpansion?: "all" | "header";
+  enableToggleExpansion?: "all" | "header" | "none";
   expandedControl?: DataType;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   initialLoadingRowsCount?: number;
   loading?: boolean | string;
@@ -51,6 +52,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
+    htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
     loading,
@@ -104,7 +106,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
           const accessorValue = rowData[depthAccessor];
           return accessorValue ? (
-            <CustomCell row={row} 
+            <CustomCell
+                onRowToggleClick={onRowToggleClick}
+                row={row} 
                 value={accessorValue} 
             />
           ) : (
@@ -162,6 +166,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
     enableSortingRemoval: false,
+    sortDescFirst: true,
     ...expandAndSortState(),
     ...tableOptions,
   });
@@ -194,6 +199,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_advanced_table"),
     globalProps(props),
@@ -203,19 +209,21 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
+        {...htmlProps}
         className={classes} 
         id={id}
     >
       <AdvancedTableContext.Provider
           value={{
-            table,
+            columnDefinitions,
+            enableToggleExpansion,
+            expanded,
             handleExpandOrCollapse,
             loading,
-            enableToggleExpansion,
-            toggleExpansionIcon,
             setExpanded,
-            expanded,
             sortControl,
+            table,
+            toggleExpansionIcon,
           }}
       >
         <Table