playbook_ui 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375 → 13.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e15b75aa8e734fcf7c1d4a4d6125f4bdb85d88513c1f0f8815c35220855b044e
-  data.tar.gz: 9e7cee23ebd94a5a90bd9d35902b7bc671d9f284311048197e6e15c76ae65630
+  metadata.gz: 89bd4e938528cafc5784b31a33e8164edd9b132e4f63f2ebbf2ba1160b07738f
+  data.tar.gz: b87c8966e25b1b0b6fc2a01b84ae7164436a4f2be860f49c7414f667d1c5d40f
 SHA512:
-  metadata.gz: c16e3c834fd8dc73924855756f1b4baaa88c96904968fbe1233f673621018aa3bbb5812ec1b03c6e903c5f99d01e3e41442e07ecfda409a4f95724e37279b053
-  data.tar.gz: 2bd9cfe1dc2a14974eb3f3c7cbffa5ff5493c26770ad8aaaa9fe5cb2bb5d0476b6e62abaa7e642967a45774b7af6fbd69fce21b3b32dfddafae68a1218beb8e9
+  metadata.gz: 7991e682deaf82d106bb0e2a29bb029a6299eba736a0c3e85de50366efa998db4f30026c9fcfc3cf4f7c2ac95f2fddaa38a90add59379d7c7b0890e070e8850a
+  data.tar.gz: 6f649c427896f5010b9721ffd3a0e0c9f282f6eb6c65c666cdbd2487aab6132175a7660b7e48bc89cbe1133736ac4a79d9911f053bb481193096f6032220e6c9

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

@@ -1,21 +1,19 @@
-import React, { useContext } from "react"
-import { Getter, Row } from "@tanstack/react-table"
+import React, { useContext } from "react";
 
-import { GenericObject } from "../../types"
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+import Icon from "../../pb_icon/_icon";
+import { GlobalProps } from "../../utilities/globalProps";
 
-import { GlobalProps } from "../../utilities/globalProps"
-
-import Flex from "../../pb_flex/_flex"
-import FlexItem from "../../pb_flex/_flex_item"
-import Icon from "../../pb_icon/_icon"
-
-import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { Getter, Row } from "@tanstack/react-table";
+import { DataType } from "../Utilities/types";
+import AdvancedTableContext from "../Context/AdvancedTableContext";
 
 interface CustomCellProps {
-  getValue?: Getter<string>
-  onRowToggleClick?: (arg: Row<GenericObject>) => void
-  row: Row<GenericObject>
-  value?: string
+  getValue?: Getter<string>;
+  onRowToggleClick?: (arg: Row<DataType>) => void;
+  row: Row<DataType>;
+  value?: string;
 } 
 
 export const CustomCell = ({
@@ -24,12 +22,12 @@ export const CustomCell = ({
   row,
   value,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext)
+  const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
 
-  const handleOnExpand = (row: Row<GenericObject>) => {
-    onRowToggleClick && onRowToggleClick(row)
-    setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() })
-  }
+  const handleOnExpand = (row: Row<DataType>) => {
+    onRowToggleClick && onRowToggleClick(row);
+    setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
+  };
   const RowHasChildren = row.original.children ? true : false
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
@@ -61,5 +59,5 @@ export const CustomCell = ({
         </FlexItem>
       </Flex>
     </div>
-  )
-}
+  );
+};

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

@@ -1,14 +1,11 @@
 import React from "react"
-import { Header } from "@tanstack/react-table"
-
-import { GenericObject } from "../../types"
-
 import Icon from "../../pb_icon/_icon"
-
+import { Header } from "@tanstack/react-table"
+import { DataType } from "../Utilities/types"
 import { displayIcon } from "../Utilities/IconHelpers"
 
 type SortIconButtonProps = {
-  header: Header<GenericObject, unknown>
+  header: Header<DataType, unknown>
   sortIcon?: string | string[]
 }
 export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {

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

@@ -1,27 +1,23 @@
 import React, { useContext } from "react"
-import { Row, Table } from "@tanstack/react-table"
-
-import { GenericObject } from "../../types"
-
-import { GlobalProps } from "../../utilities/globalProps"
-
 import Flex from "../../pb_flex/_flex"
 import Caption from "../../pb_caption/_caption"
+import { Row, Table } from "@tanstack/react-table"
 
+import AdvancedTableContext from "../Context/AdvancedTableContext";
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
 
 import { isChrome } from "../Utilities/BrowserCheck"
-
-import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { DataType } from "../Utilities/types"
+import { GlobalProps } from "../../utilities/globalProps"
 
 interface SubRowHeaderRowProps {
   collapsibleTrail?: boolean
   enableToggleExpansion?: "all" | "header" | "none"
-  onClick: (row: Row<GenericObject>) => void
-  row: Row<GenericObject>
+  onClick: (row: Row<DataType>) => void
+  row: Row<DataType>
   subRowHeaders?: string[]
-  table: Table<GenericObject>
+  table: Table<DataType>
 }
 
 export const SubRowHeaderRow = ({
@@ -32,7 +28,7 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
-  const { inlineRowLoading } = useContext(AdvancedTableContext)
+  const { inlineRowLoading } = useContext(AdvancedTableContext);
 
   const numberOfColumns = table.getAllFlatColumns().length
   const rowHasChildren = row.original.children ? true : false

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

@@ -1,25 +1,20 @@
 import React, { useContext } from "react"
-import classnames from "classnames"
-import { flexRender, Header } from "@tanstack/react-table"
-
-import { GenericObject } from "../../types"
-
-import { GlobalProps } from "../../utilities/globalProps"
-
+import classnames from "classnames";
 import Flex from "../../pb_flex/_flex"
+import { flexRender, Header } from "@tanstack/react-table"
 
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
-
 import { isChrome } from "../Utilities/BrowserCheck"
-
+import { DataType } from "../Utilities/types"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { GlobalProps } from "../../utilities/globalProps"
 
 type TableHeaderCellProps = {
   enableSorting?: boolean
   enableToggleExpansion?: "all" | "header" | "none"
   handleExpandOrCollapse?: () => void
-  header?: Header<GenericObject, unknown>
+  header?: Header<DataType, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
   loading?: boolean
   sortIcon?: string | string[]
@@ -50,24 +45,24 @@ export const TableHeaderCell = ({
 const cellClassName = classnames("table-header-cells", 
   `${isChrome() ? "chrome-styles" : ""}`, 
   `${enableSorting ? "table-header-cells-active" : ""}`
-)
+);
 
 const cellId = `${loading ? 
     `loading-${header.id}`
     : `${header.id}`
-}`
+}`;
 
 const isToggleExpansionEnabledLoading =
   header.index === 0 &&
   loading &&
   (enableToggleExpansion === "all" || "header") &&
-  enableToggleExpansion !== "none"
+  enableToggleExpansion !== "none";
   
 const isToggleExpansionEnabled =
   header.index === 0 &&
   !loading &&
   (enableToggleExpansion === "all" || "header") &&
-  enableToggleExpansion !== "none"
+  enableToggleExpansion !== "none";
 
   return (
     <th

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

@@ -1,17 +1,13 @@
 import React, { useContext } from "react"
-import { Row } from "@tanstack/react-table"
-
-import { GenericObject } from "../../types"
-
 import Icon from "../../pb_icon/_icon"
-
-import { displayIcon } from "../Utilities/IconHelpers"
-
+import { Row } from "@tanstack/react-table"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { DataType } from "../Utilities/types"
+import { displayIcon } from "../Utilities/IconHelpers"
 
 interface ToggleIconButtonProps {
-  onClick: (row: Row<GenericObject>) => void
-  row?: Row<GenericObject>
+  onClick: (row: Row<DataType>) => void
+  row?: Row<DataType>
 }
 
 export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {

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

@@ -1,25 +1,21 @@
 import React, { useContext } from "react"
-import classnames from "classnames"
-import { flexRender, Row } from "@tanstack/react-table"
-
-import { GenericObject } from "../../types"
-
-import { buildCss } from "../../utilities/props"
-import { globalProps } from "../../utilities/globalProps"
-import { isChrome } from "../Utilities/BrowserCheck"
-
+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"
 
 import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
 import { LoadingCell } from "../Components/LoadingCell"
 import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
-
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { isChrome } from "../Utilities/BrowserCheck"
+import { DataType } from "../Utilities/types"
 
 type TableBodyProps = {
-  className?: string
+  className?: string;
   collapsibleTrail?: boolean
-  id?: string
+  id?: string;
   subRowHeaders?: string[]
 }
 
@@ -44,14 +40,14 @@ export const TableBody = ({
     buildCss("pb_advanced_table_body"),
     globalProps(props),
     className
-  )
+  );
 
   return (
     <>
       <tbody className={classes} 
           id={id}
       >
-        {table.getRowModel().rows.map((row: Row<GenericObject>) => {
+        {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

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

@@ -1,21 +1,17 @@
 import React, { useContext } from "react"
-import classnames from "classnames"
+import classnames from "classnames";
+import { buildCss } from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
 import { HeaderGroup } from "@tanstack/react-table"
-
-import { GenericObject } from "../../types"
-
-import { buildCss } from "../../utilities/props"
-import { globalProps } from "../../utilities/globalProps"
-
-import { TableHeaderCell } from "../Components/TableHeaderCell"
-
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { TableHeaderCell } from "../Components/TableHeaderCell"
+import { DataType } from "../Utilities/types"
 
 type TableHeaderProps = {
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   enableSorting?: boolean
-  id?: string
+  id?: string;
   sortIcon?: string | string[]
 }
 
@@ -38,7 +34,7 @@ export const TableHeader = ({
     buildCss("pb_advanced_table_header"),
     globalProps(props),
     className
-  )
+  );
 
 
   return (
@@ -47,7 +43,7 @@ export const TableHeader = ({
           id={id}
       >
         {/* Get the header groups (only one in this example) */}
-        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
+        {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
             {headerGroup.headers.map(header => (
               <TableHeaderCell

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

@@ -1,6 +1,5 @@
 import { RowModel } from "@tanstack/react-table"
-import { ExpandedStateObject } from "./types"
-import { GenericObject } from "../../types"
+import { DataType, ExpandedStateObject } from "./types"
 
 const filterExpandableRows = (expandedState: Record<string, boolean>) => {
   for (const expandedRow in expandedState) {
@@ -12,7 +11,7 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
 }
 
 export const updateExpandAndCollapseState = (
-  tableRows: RowModel<GenericObject>,
+  tableRows: RowModel<DataType>,
   expanded: Record<string, boolean>,
   targetParent: string
 ) => {

data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts

@@ -4,3 +4,5 @@ export type ExpandedStateObject = Extract<
   ExpandedState,
   Record<string, boolean>
 >
+
+export type DataType = { [key: string]: any }

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

@@ -4,7 +4,6 @@
 @import "../tokens/spacing";
 @import "./scss_partials/loading";
 @import "./scss_partials/pseudo_states";
-@import "./scss_partials/chrome_styles";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light !important;
@@ -87,5 +86,13 @@
     box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
   }
 
-  @include chrome_styles($border-color);
+  .chrome-styles:first-child {
+    border-right: $border-color;
+  }
+
+  .table-card {
+    .chrome-styles:first-child {
+      border-right: $transparent !important;
+    }
+  }
 }

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 { GenericObject } from "../types"
-
+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 {
   createColumnHelper,
   getCoreRowModel,
@@ -11,42 +11,38 @@ import {
   Row,
   useReactTable,
   Getter,
-} from "@tanstack/react-table"
-
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
-import { globalProps, GlobalProps } from "../utilities/globalProps"
+} from "@tanstack/react-table";
 
-import Table from "../pb_table/_table"
+import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers";
 
-import AdvancedTableContext from "./Context/AdvancedTableContext"
+import { CustomCell } from "./Components/CustomCell";
+import AdvancedTableContext from "./Context/AdvancedTableContext";
+import { TableHeader } from "./SubKits/TableHeader";
+import { TableBody } from "./SubKits/TableBody";
 
-import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
-
-import { CustomCell } from "./Components/CustomCell"
-import { TableHeader } from "./SubKits/TableHeader"
-import { TableBody } from "./SubKits/TableBody"
+import { DataType } from "./Utilities/types";
 
 type AdvancedTableProps = {
-  aria?: { [key: string]: string }
-  children?: React.ReactNode | React.ReactNode[]
-  className?: string
-  columnDefinitions: GenericObject[]
-  data?: { [key: string]: string }
-  enableToggleExpansion?: "all" | "header" | "none"
-  expandedControl?: GenericObject
+  aria?: { [key: string]: string };
+  children?: React.ReactNode | React.ReactNode[];
+  className?: string;
+  columnDefinitions: DataType[];
+  data?: { [key: string]: string };
+  enableToggleExpansion?: "all" | "header" | "none";
+  expandedControl?: DataType;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  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
+  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;
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
@@ -69,22 +65,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[]) => {
@@ -92,10 +88,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       row,
       getValue,
     }: {
-      row: Row<GenericObject>
-      getValue: Getter<string>
+      row: Row<DataType>;
+      getValue: Getter<string>;
     }) => {
-      const rowData = row.original
+      const rowData = row.original;
 
       switch (row.depth) {
         case 0: {
@@ -105,12 +101,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}
@@ -119,13 +115,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             />
           ) : (
             "N/A"
-          )
+          );
         }
       }
-    }
+    };
 
-    return columnCells
-  }
+    return columnCells;
+  };
 
   //Create column array in format needed by Tanstack
   const columns =
@@ -136,12 +132,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 = [
@@ -152,22 +148,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: GenericObject) => row.children,
+    getSubRows: (row: DataType) => row.children,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -175,42 +171,42 @@ 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 = (row: Row<GenericObject>) => {
-    onToggleExpansionClick && onToggleExpansionClick(row)
+  const handleExpandOrCollapse = (row: Row<DataType>) => {
+    onToggleExpansionClick && onToggleExpansionClick(row);
 
-    const expandedState = expanded
-    const targetParent = row?.parentId
+    const expandedState = expanded;
+    const targetParent = row?.parentId;
     return setExpanded(
       updateExpandAndCollapseState(tableRows, expandedState, targetParent)
-    )
-  }
+    );
+  };
 
-  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} 
@@ -251,10 +247,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;