playbook_ui 13.21.0.pre.alpha.pbntr220improveexpansionspeed2451 → 13.22.0.pre.alpha.playbookgemspecrailsversion2608

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

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useCallback } from "react";
-import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps, GlobalProps } from "../utilities/globalProps";
-import Table from "../pb_table/_table";
+import React, { useState, useEffect, useCallback } from "react"
+import classnames from "classnames"
+
+import { GenericObject } from "../types"
+
 import {
   createColumnHelper,
   getCoreRowModel,
@@ -11,39 +11,43 @@ import {
   Row,
   useReactTable,
   Getter,
-} from "@tanstack/react-table";
+} from "@tanstack/react-table"
+
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
+import { globalProps, GlobalProps } from "../utilities/globalProps"
 
-import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers";
+import Table from "../pb_table/_table"
 
-import { CustomCell } from "./Components/CustomCell";
-import AdvancedTableContext from "./Context/AdvancedTableContext";
-import { TableHeader } from "./SubKits/TableHeader";
-import { TableBody } from "./SubKits/TableBody";
+import AdvancedTableContext from "./Context/AdvancedTableContext"
 
-import { DataType } from "./Utilities/types";
+import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
+
+import { CustomCell } from "./Components/CustomCell"
+import { TableHeader } from "./SubKits/TableHeader"
+import { TableBody } from "./SubKits/TableBody"
 
 type AdvancedTableProps = {
-  aria?: { [key: string]: string };
-  children?: React.ReactNode | React.ReactNode[];
-  className?: string;
-  columnDefinitions: DataType[];
-  dark?: boolean,
-  data?: { [key: string]: string };
-  enableToggleExpansion?: "all" | "header" | "none";
-  expandedControl?: DataType;
+  aria?: { [key: string]: string }
+  children?: React.ReactNode | React.ReactNode[]
+  className?: string
+  columnDefinitions: GenericObject[]
+  dark?: boolean
+  data?: { [key: string]: string }
+  enableToggleExpansion?: "all" | "header" | "none"
+  expandedControl?: GenericObject
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string;
-  initialLoadingRowsCount?: number;
-  inlineRowLoading?: boolean;
-  loading?: boolean | string;
-  onRowToggleClick?: (arg: Row<DataType>) => void;
-  onToggleExpansionClick?: (arg: Row<DataType>) => void;
-  sortControl?: DataType;
-  tableData: DataType[];
-  tableOptions?: DataType;
-  tableProps?: DataType;
-  toggleExpansionIcon?: string | string[];
-} & GlobalProps;
+  id?: string
+  initialLoadingRowsCount?: number
+  inlineRowLoading?: boolean
+  loading?: boolean | string
+  onRowToggleClick?: (arg: Row<GenericObject>) => void
+  onToggleExpansionClick?: (arg: Row<GenericObject>) => void
+  sortControl?: GenericObject
+  tableData: GenericObject[]
+  tableOptions?: GenericObject
+  tableProps?: GenericObject
+  toggleExpansionIcon?: string | string[]
+} & GlobalProps
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
@@ -67,22 +71,22 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     tableOptions,
     tableProps,
     toggleExpansionIcon = "arrows-from-line",
-  } = props;
+  } = props
 
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(
     initialLoadingRowsCount
-  );
+  )
 
   // Create a local state for expanded and setExpanded if expandedControl not used
-  const [localExpanded, setLocalExpanded] = useState({});
+  const [localExpanded, setLocalExpanded] = useState({})
 
   // Determine whether to use the prop or the local state
-  const expanded = expandedControl ? expandedControl.value : localExpanded;
+  const expanded = expandedControl ? expandedControl.value : localExpanded
   const setExpanded = expandedControl
     ? expandedControl.onChange
-    : setLocalExpanded;
+    : setLocalExpanded
 
-  const columnHelper = createColumnHelper();
+  const columnHelper = createColumnHelper()
 
   //Create cells for first columns
   const createCellFunction = (cellAccessors: string[]) => {
@@ -90,10 +94,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       row,
       getValue,
     }: {
-      row: Row<DataType>;
-      getValue: Getter<string>;
+      row: Row<GenericObject>
+      getValue: Getter<string>
     }) => {
-      const rowData = row.original;
+      const rowData = row.original
 
       switch (row.depth) {
         case 0: {
@@ -103,12 +107,12 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 onRowToggleClick={onRowToggleClick}
                 row={row}
             />
-          );
+          )
         }
         default: {
           // Handle other depths based on cellAccessors
-          const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
-          const accessorValue = rowData[depthAccessor];
+          const depthAccessor = cellAccessors[row.depth - 1] // Adjust index for depth
+          const accessorValue = rowData[depthAccessor]
           return accessorValue ? (
             <CustomCell
                 onRowToggleClick={onRowToggleClick}
@@ -117,13 +121,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             />
           ) : (
             "N/A"
-          );
+          )
         }
       }
-    };
+    }
 
-    return columnCells;
-  };
+    return columnCells
+  }
 
   //Create column array in format needed by Tanstack
   const columns =
@@ -134,12 +138,12 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         ...columnHelper.accessor(column.accessor, {
           header: column.label,
         }),
-      };
+      }
       if (column.cellAccessors) {
-        columnStructure.cell = createCellFunction(column.cellAccessors);
+        columnStructure.cell = createCellFunction(column.cellAccessors)
       }
-      return columnStructure;
-    });
+      return columnStructure
+    })
 
   //Syntax for sorting Array if we want to manage state ourselves
   const sorting = [
@@ -150,22 +154,22 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           ? !sortControl.value.desc
           : false,
     },
-  ];
+  ]
 
   const expandAndSortState = () => {
     if (sortControl) {
-      return { state: { expanded, sorting } };
+      return { state: { expanded, sorting } }
     } else {
-      return { state: { expanded } };
+      return { state: { expanded } }
     }
-  };
+  }
 
 //initialize table
   const table = useReactTable({
     data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
     columns,
     onExpandedChange: setExpanded,
-    getSubRows: (row: DataType) => row.children,
+    getSubRows: (row: GenericObject) => row.children,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -173,41 +177,41 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     sortDescFirst: true,
     ...expandAndSortState(),
     ...tableOptions,
-  });
+  })
 
-  const tableRows = table.getRowModel();
+  const tableRows = table.getRowModel()
 
   // Set table row count for loading state
   const updateLoadingStateRowCount = useCallback(() => {
-    const rowsCount = table.getRowModel().rows.length;
+    const rowsCount = table.getRowModel().rows.length
     if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
-      setLoadingStateRowCount(rowsCount);
+      setLoadingStateRowCount(rowsCount)
     }
-  }, [tableData, loadingStateRowCount]);
+  }, [tableData, loadingStateRowCount])
 
   useEffect(() => {
     if (!loading) {
-      updateLoadingStateRowCount();
+      updateLoadingStateRowCount()
     }
-  }, [loading, updateLoadingStateRowCount]);
+  }, [loading, updateLoadingStateRowCount])
 
-  const handleExpandOrCollapse = async (row: Row<DataType>) => {
-    onToggleExpansionClick && onToggleExpansionClick(row);
+  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);
-  };
+    const updatedRows = await updateExpandAndCollapseState(tableRows, expandedState, targetParent)
+    setExpanded(updatedRows)
+  }
 
-  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"),
     globalProps(props),
     className
-  );
+  )
 
   return (
     <div {...ariaProps} 
@@ -221,6 +225,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions,
             enableToggleExpansion,
             expanded,
+            expandedControl,
             handleExpandOrCollapse,
             inlineRowLoading,
             loading,
@@ -249,10 +254,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         </Table>
       </AdvancedTableContext.Provider>
     </div>
-  );
-};
+  )
+}
 
-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/advanced_table.html.erb

@@ -0,0 +1,14 @@
+<%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+        <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
+          <% if content.present? %>
+            <% content.presence %>
+          <% else %>
+            <%= pb_rails("advanced_table/table_header", props: {column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+            <%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
+          <% end %>
+        <% end %>
+<% end %>

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAdvancedTable
+    class AdvancedTable < Playbook::KitBase
+      prop :table_data, type: Playbook::Props::Array,
+                        default: []
+      prop :column_definitions, type: Playbook::Props::Array,
+                                default: []
+      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
+                                     values: %w[all header none],
+                                     default: "header"
+
+      def classname
+        generate_classname("pb_advanced_table")
+      end
+    end
+  end
+end

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

@@ -1,7 +1,7 @@
-import React, {useState} from "react";
-import { render, screen, waitFor } from "../utilities/test-utils";
+import React, {useState} from "react"
+import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable } from "../";
+import { AdvancedTable } from "../"
 
 const MOCK_DATA = [
   {
@@ -40,7 +40,7 @@ const MOCK_DATA = [
       },
     ],
   },
-];
+]
 
 const MOCK_DATA_LOADING = [
   {
@@ -70,7 +70,7 @@ const MOCK_DATA_LOADING = [
       },
     ],
   },
-];
+]
 
 const columnDefinitions = [
   {
@@ -86,11 +86,11 @@ const columnDefinitions = [
     accessor: "scheduledMeetings",
     label: "Scheduled Meetings",
   },
-];
+]
 
 const subRowHeaders = ["Quarter"]
 
-const testId = "advanced_table";
+const testId = "advanced_table"
 
 const AdvancedTableExpandControl = () => {
   const [expanded, setExpanded] = useState({'0': true})
@@ -109,7 +109,7 @@ return (
         tableData={MOCK_DATA}
     />
   </div>
-);
+)
 }
 
 const AdvancedTableSortControl = () => {
@@ -132,7 +132,7 @@ return (
         <AdvancedTable.Body />
       </AdvancedTable>
   </div>
-);
+)
 }
 
 const tableOptions = {
@@ -158,12 +158,12 @@ test("Generates default kit and classname", () => {
         data={{ testid: testId }}
         tableData={MOCK_DATA}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
-  expect(kit).toBeInTheDocument();
+  const kit = screen.getByTestId(testId)
+  expect(kit).toBeInTheDocument()
   expect(kit).toHaveClass('pb_advanced_table')
-});
+})
 
 test("Generates aria label", () => {
   render(
@@ -173,11 +173,11 @@ test("Generates aria label", () => {
         data={{ testid: testId }}
         tableData={MOCK_DATA}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   expect(kit).toHaveAttribute('aria-label', testId)
-});
+})
 
 test("Row toggle button exists and toggles subrows open and closed", () => {
   render(
@@ -186,9 +186,9 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
         data={{ testid: testId }}
         tableData={MOCK_DATA}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
   const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
@@ -196,7 +196,7 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
   rowButton.click()
   const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
-});
+})
 
 test("toggleExpansionAll button exists and toggles subrows open and closed", async () => {
   render(
@@ -205,7 +205,7 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
         data={{ testid: testId }}
         tableData={MOCK_DATA}
     />
-  );
+  )
 
   const kit = screen.getByTestId(testId);
   const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon");
@@ -219,8 +219,8 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
   await waitFor(() => {
     const subRow = kit.querySelector(".bg-white.depth-sub-row-1");
     expect(subRow).toBeInTheDocument();
-  });
-});
+  })
+})
 
 
 test("loading state + initialLoadingRowCount prop", () => {
@@ -232,16 +232,16 @@ test("loading state + initialLoadingRowCount prop", () => {
         loading
         tableData={MOCK_DATA}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const table = kit.querySelector('table')
   expect(table).toHaveClass('pb_table table-sm table-responsive-none table-card data_table ns_tabular content-loading')
 
   const tableBody = kit.querySelector('tbody')
   const tableRows = tableBody.getElementsByTagName('tr')
   expect(tableRows).toHaveLength(13)
-});
+})
 
 test("subRowHeaders are rendered", () => {
   render(
@@ -253,21 +253,21 @@ test("subRowHeaders are rendered", () => {
       <AdvancedTable.Header />
       <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
     </AdvancedTable>
-    );
+    )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
 
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   rowButton.click()
   
   const subRowHeader = kit.querySelector(".custom-row.bg-silver")
   expect(subRowHeader).toBeInTheDocument()
-});
+})
 
 test("expandControl prop works as expected", () => {
   render (<AdvancedTableExpandControl/>)
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
@@ -280,13 +280,13 @@ test("tableOptions prop functions as expected", () => {
         tableData={MOCK_DATA}
         tableOptions={tableOptions}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const row1 = kit.getElementsByTagName('tr')[1]
   
   expect(row1.id).toBe("1-1-0-row")
-});
+})
 
 test("tableProps prop functions as expected", () => {
   render(
@@ -296,12 +296,12 @@ test("tableProps prop functions as expected", () => {
         tableData={MOCK_DATA}
         tableProps={tableProps}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const table = kit.querySelector('table')
   expect(table).toHaveClass("pb_table table-sm table-responsive-none data_table sticky-header ns_tabular")
-});
+})
 
 test("enableExpansionIcon changes icon", () => {
   render(
@@ -312,13 +312,13 @@ test("enableExpansionIcon changes icon", () => {
         tableProps={tableProps}
         toggleExpansionIcon= "chevron-up"
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const tableHead = kit.querySelector('table')
   const toggleIcon= tableHead.querySelector(".pb_icon_kit")
   expect(toggleIcon).toHaveClass("fa-chevron-up")
-});
+})
 
 test("sortIcon changes icon", () => {
   render(
@@ -334,18 +334,18 @@ test("sortIcon changes icon", () => {
       />
       <AdvancedTable.Body />
     </AdvancedTable>
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const sortIcon = kit.querySelector('.sort-button-icon')
   const icon= sortIcon.querySelector(".pb_icon_kit")
   expect(icon).toHaveClass("fa-chevron-down")
-});
+})
 
 test("Sort icon renders with enableSorting + sortControl works as expected", () => {
   render (<AdvancedTableSortControl/>)
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const sortIcon = kit.querySelector(".sort-button-icon")
   expect(sortIcon).toBeInTheDocument()
 
@@ -364,9 +364,9 @@ test("sort button exists and sorts column data", () => {
       <AdvancedTable.Header enableSorting />
       <AdvancedTable.Body />
     </AdvancedTable>
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
 
   const sortButton= kit.querySelector(".pb_flex_kit_orientation_row_justify_content_between_align_items_top_spacing_none.pl_xxs.cursor_pointer.header-sort-button.pb_th_link")
   expect(sortButton).toBeInTheDocument()
@@ -378,7 +378,7 @@ 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(
@@ -391,12 +391,12 @@ test("Generates Table.Header default + custom classname", () => {
       <AdvancedTable.Body />
 
     </AdvancedTable>
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  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(
@@ -409,12 +409,12 @@ test("Generates Table.Body default + custom classname", () => {
       <AdvancedTable.Body className="custom-body-classname"/>
 
     </AdvancedTable>
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const tableHeader = kit.querySelector('tbody')
   expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
-});
+})
 
 test("inlineRowLoading prop renders inline loading if true", () => {
   render(
@@ -424,12 +424,12 @@ test("inlineRowLoading prop renders inline loading if true", () => {
         inlineRowLoading
         tableData={MOCK_DATA_LOADING}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
   rowButton.click()
   const inlineLoading = kit.querySelector(".fa-spinner")
   expect(inlineLoading).toBeInTheDocument()
-});
+})

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

@@ -1,6 +1,6 @@
-import React from "react";
-import { AdvancedTable } from "../../";
-import { MOCK_DATA } from "./_mock_data";
+import React from "react"
+import { AdvancedTable } from "../../"
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCollapsibleTrail = (props) => {
   const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
       accessor: "graduatedStudents",
       label: "Graduated Students",
     },
-  ];
+  ]
 
   return (
     <div>
@@ -46,7 +46,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
         <AdvancedTable.Body collapsibleTrail={false} />
       </AdvancedTable>
     </div>
-  );
-};
+  )
+}
 
-export default AdvancedTableCollapsibleTrail;
+export default AdvancedTableCollapsibleTrail