playbook_ui 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2159 → 13.18.0.pre.alpha.dependabotnpmandyarnpowerhomeplaybookicons001alpha52174

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed6b5c8bc5abff794a42552366bce14785ce52a52f77e4897a96c59279b6bab0
-  data.tar.gz: 0b1feee9f1e0abafb95db62e695a1c4df57a95f82e0acdf0e079a9febf22f52c
+  metadata.gz: 07df5a51ff6cc545fc766152e6b29c93c3dbb93490e376860bce3b7cd5ed29ac
+  data.tar.gz: 50b2552c1b512542cf7aa2731ac8a8da39fd3c80a429fb9dee7553ad80edd8e3
 SHA512:
-  metadata.gz: 73a5a055067a0942784bb05576cf3cfc1002be59a2a06a061ea130da7f2eb561d86f61db61704874231d209ad32ead88ae47775058d43e2a7aba2bf4f73942ac
-  data.tar.gz: 2bff7638226878a69f3c8b7d3eed25c0a794be24894f82164983b8829d46c9cf874ec880f18e396052b615cc58d824420058fff6a698d23848b43bec7e674481
+  metadata.gz: cf46489def90ccc21c247e68e54e9864fb3d4bd2a53cd6fa7cf0be8a04019e46dcf7184677e1499b4ad16b9d415efde26784320e7ecb077d0f697480ae8a0877
+  data.tar.gz: bb93a071c1a739c0e47776b3ba4dcba3a53b3e9ba46e9c8bf8c090420429c2a7d9dfcfa5809392dbac7eae92c6025f263bb2685240ce9d305b2fec8f676bf843

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

@@ -23,22 +23,20 @@ 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"
       >
-        {RowHasChildren ? (
+        {!RowWithoutChildren ? (
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
@@ -55,7 +53,7 @@ export const CustomCell = ({
             )}
           </button>
         ) : null}
-        <FlexItem paddingLeft={RowHasChildren? "none" : "xs"}>
+        <FlexItem paddingLeft={!RowWithoutChildren ? "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" | "none"
+  enableToggleExpansion?: "all" | "header"
   onClick: (row: Row<DataType>) => void
   row: Row<DataType>
   subRowHeaders?: string[]
@@ -28,7 +28,6 @@ export const SubRowHeaderRow = ({
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
   const numberOfColumns = table.getAllFlatColumns().length
-  const canExpand = row.depth < subRowHeaders.length
 
   return (
     <tr className="custom-row bg-silver">
@@ -43,13 +42,13 @@ export const SubRowHeaderRow = ({
           <Flex align="center" 
               columnGap="xs"
           >
-            {enableToggleExpansion === "all" && canExpand ? (
+            {enableToggleExpansion === "all" && row.getCanExpand() ? (
               <ToggleIconButton onClick={onClick} 
                   row={row}
               />
             ) : null}
             <Caption
-                marginLeft={canExpand ? "none" : "xs"}
+                marginLeft={row.getCanExpand() ? "none" : "xs"}
                 text={subRowHeaders[row.depth - 1]}
             />
           </Flex>

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

@@ -12,10 +12,11 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 type TableHeaderCellProps = {
   enableSorting?: boolean
-  enableToggleExpansion?: "all" | "header" | "none"
+  enableToggleExpansion?: "all" | "header"
   handleExpandOrCollapse?: () => void
   header?: Header<DataType, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
+  headerId?: string
   loading?: boolean
   sortIcon?: string | string[]
 } & GlobalProps
@@ -26,6 +27,7 @@ export const TableHeaderCell = ({
   handleExpandOrCollapse,
   header,
   headerChildren,
+  headerId,
   loading,
   sortIcon,
 }: TableHeaderCellProps) => {
@@ -48,22 +50,10 @@ const cellClassName = classnames("table-header-cells",
 );
 
 const cellId = `${loading ? 
-    `loading-${header.id}`
-    : `${header.id}`
+    `loading-${header.id}${headerId ? `-${headerId}` : ""}`
+    : `${header.id}${headerId ? `-${headerId}` : ""}`
 }`;
 
-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"
@@ -83,11 +73,15 @@ const isToggleExpansionEnabled =
             alignItems="center"
             justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
         >
-          {isToggleExpansionEnabled && (
+          {header.index === 0 &&
+            !loading &&
+            (enableToggleExpansion === "all" || "header") && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
 
-          {isToggleExpansionEnabledLoading &&(
+          {header.index === 0 &&
+            loading &&
+            (enableToggleExpansion === "all" || "header") && (
               <div className="loading-toggle-icon header-toggle-icon" />
             )}
 

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

@@ -1,7 +1,4 @@
 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"
 
@@ -13,45 +10,28 @@ 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 className={classes} 
-          id={id}
-      >
+      <tbody>
         {table.getRowModel().rows.map((row: Row<DataType>) => {
           const isExpandable = row.getIsExpanded()
           const isFirstChildofSubrow = row.depth > 0 && row.index === 0
-          const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
+          const rowHasNoChildren = !row.original.children?.length
           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`}>
@@ -99,11 +79,9 @@ export const TableBody = ({
               </tr>
 
               {/* Display LoadingInline if Row Data is querying and there are no children already */}
-              {isDataLoading ? (
+              {isExpandable && rowHasNoChildren && row.depth === 0 ? (
                 <tr key={`${row.id}-row`}>
-                  <td colSpan={numberOfColumns}
-                      style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
-                  >
+                  <td colSpan={numberOfColumns}>
                     <LoadingInline />
                   </td>
                 </tr>

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

@@ -1,7 +1,4 @@
 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"
@@ -9,19 +6,16 @@ import { DataType } from "../Utilities/types"
 
 type TableHeaderProps = {
   children?: React.ReactNode | React.ReactNode[]
-  className?: string
   enableSorting?: boolean
-  id?: string;
+  headerId?: string
   sortIcon?: string | string[]
 }
 
 export const TableHeader = ({
   children,
-  className,
   enableSorting = false,
-  id,
+  headerId,
   sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
-  ...props
 }: TableHeaderProps) => {
   const {
     enableToggleExpansion,
@@ -30,18 +24,9 @@ export const TableHeader = ({
     table,
   } = useContext(AdvancedTableContext)
 
-  const classes = classnames(
-    buildCss("pb_advanced_table_header"),
-    globalProps(props),
-    className
-  );
-
-
   return (
     <>
-      <thead className={classes}
-          id={id}
-      >
+      <thead>
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
@@ -52,6 +37,7 @@ 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,9 +24,10 @@ export const updateExpandAndCollapseState = (
   // Update isExpansionConsistent variable
   for (const row of rows) {
     if (
-      targetParent === undefined
+      row.getCanExpand() &&
+      (targetParent === undefined
         ? row.depth === 0
-        : targetParent === row.parentId
+        : targetParent === row.parentId)
     ) {
       areRowsExpanded.add(row.getIsExpanded())
       if (areRowsExpanded.size > 1) {
@@ -47,7 +48,7 @@ export const updateExpandAndCollapseState = (
     })
   } else {
     for (const row of rows) {
-      if (targetParent === row.parentId) {
+      if (row.getCanExpand() && 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, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import Table from "../pb_table/_table";
 import {
@@ -28,9 +28,8 @@ type AdvancedTableProps = {
   className?: string;
   columnDefinitions: DataType[];
   data?: { [key: string]: string };
-  enableToggleExpansion?: "all" | "header" | "none";
+  enableToggleExpansion?: "all" | "header";
   expandedControl?: DataType;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   initialLoadingRowsCount?: number;
   loading?: boolean | string;
@@ -52,7 +51,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
-    htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
     loading,
@@ -106,9 +104,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
           const accessorValue = rowData[depthAccessor];
           return accessorValue ? (
-            <CustomCell
-                onRowToggleClick={onRowToggleClick}
-                row={row} 
+            <CustomCell row={row} 
                 value={accessorValue} 
             />
           ) : (
@@ -199,7 +195,6 @@ 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),
@@ -209,21 +204,19 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
-        {...htmlProps}
         className={classes} 
         id={id}
     >
       <AdvancedTableContext.Provider
           value={{
-            columnDefinitions,
-            enableToggleExpansion,
-            expanded,
+            table,
             handleExpandOrCollapse,
             loading,
+            enableToggleExpansion,
+            toggleExpansionIcon,
             setExpanded,
+            expanded,
             sortControl,
-            table,
-            toggleExpansionIcon,
           }}
       >
         <Table

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -343,39 +343,3 @@ test("sort button exists and sorts column data", () => {
   const row2 = kit.getElementsByTagName('tr')[2]
   expect(row2.id).toBe("0-0-0-row")
 }); 
-
-test("Generates Table.Header default + custom classname", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header className="custom-header" />
-      <AdvancedTable.Body />
-
-    </AdvancedTable>
-  );
-
-  const kit = screen.getByTestId(testId);
-  const tableHeader = kit.querySelector('thead')
-  expect(tableHeader).toHaveClass('pb_advanced_table_header custom-header')
-});
-
-test("Generates Table.Body default + custom classname", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header />
-      <AdvancedTable.Body className="custom-body-classname"/>
-
-    </AdvancedTable>
-  );
-
-  const kit = screen.getByTestId(testId);
-  const tableHeader = kit.querySelector('tbody')
-  expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
-});

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.18.0"
-  VERSION = "13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2159"
+  VERSION = "13.18.0.pre.alpha.dependabotnpmandyarnpowerhomeplaybookicons001alpha52174"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2159
+  version: 13.18.0.pre.alpha.dependabotnpmandyarnpowerhomeplaybookicons001alpha52174
 platform: ruby
 authors:
 - Power UX