playbook_ui 13.21.0.pre.alpha.PLAY120322465 → 13.21.0.pre.alpha.pbntr220improveexpansionspeed2415

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 117440357a4a8da3b129606a534928188bd41545fd804f1afcf2417447d31f5a
-  data.tar.gz: 004f12658cd004016f41ea6d4a1cc37c2674925a9cb2a499162dfb50318ee8f1
+  metadata.gz: 8bf6aed2f38b429e40629692119203c2c23a074cee5fbb73cc148df89b5749ef
+  data.tar.gz: 2f02146b9ad987ac9913ec8fd6fb2217bcfb12f9cfbdab6a813c04940baf2ca8
 SHA512:
-  metadata.gz: c6075298f25053220515fed141fb0a1f4593fc19222b3a9e2d701d4d59e0d1320f9822749b447289ffd74b1d9fa4ea849f380252497009e959b5308d4bfcc8bc
-  data.tar.gz: 795e0618d31b6e7675f8948725c29429aadce68bddb25a6970b1d53e3af99245750f31c09c031dcc13ba3a45a5b9ae852a740718cab3dc882a10f3dc70ef6bd3
+  metadata.gz: 51b79d9f524bcb4181e3a03a0116598a16942f7f38783f574555c65e38b081919cafcaa55ba0241e6480cd03e0b943a120fd2ee28c51dda958d7ebfa2bf4253a
+  data.tar.gz: f9b0e07c9e8b6cde8df519926e0fc86de35a8f2e3b49b1884cb92d675b8a356e36c68abd438bfd91959cfbe853aa7f31603e6c2892775b1a91df668ff436a243

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/README.md

@@ -81,7 +81,7 @@ const MOCK_DATA = [
             graduatedStudents: "43",
             children: [
               {
-                year: "2021",
+                year: "2011",
                 quarter: "Q1",
                 month: "February",
                 day: "15",
@@ -173,7 +173,7 @@ const MOCK_DATA = [
             graduatedStudents: "43",
             children: [
               {
-                year: "2022",
+                year: "2011",
                 quarter: "Q1",
                 month: "May",
                 day: "2",

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

@@ -1,26 +1,22 @@
 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
-  dark?: boolean
-  id?: string
+  dark?: boolean,
+  id?: string;
   subRowHeaders?: string[]
 }
 
@@ -46,14 +42,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,22 +1,18 @@
 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
   dark?: boolean,
   enableSorting?: boolean
-  id?: string
+  id?: string;
   sortIcon?: string | string[]
 }
 
@@ -40,7 +36,7 @@ export const TableHeader = ({
     buildCss("pb_advanced_table_header"),
     globalProps(props),
     className
-  )
+  );
 
 
   return (
@@ -49,7 +45,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,46 +11,31 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
 }
 
 export const updateExpandAndCollapseState = (
-  tableRows: RowModel<GenericObject>,
+  tableRows: RowModel<DataType>,
   expanded: Record<string, boolean>,
   targetParent: string
 ) => {
-  const updateExpandedRows: Record<string, boolean> = {}
-  const rows = tableRows.flatRows
-  // Variable checks if all rows in a section have same expansion state or not
-  let isExpansionConsistent = true
-  const areRowsExpanded = new Set<boolean>()
+  const updateExpandedRows: Record<string, boolean> = {};
+  const rows = tableRows.rows;
+
+  let isExpansionConsistent = true;
+  const areRowsExpanded = new Set<boolean>();
 
-  // Update isExpansionConsistent variable
   for (const row of rows) {
-    if (
-      targetParent === undefined
-        ? row.depth === 0
-        : targetParent === row.parentId
-    ) {
-      areRowsExpanded.add(row.getIsExpanded())
-      if (areRowsExpanded.size > 1) {
-        isExpansionConsistent = false
-        break
-      }
-    }
-  }
+    const shouldBeUpdated = targetParent === undefined ? row.depth === 0 : targetParent === row.parentId;
+    
+    if (shouldBeUpdated) {
+      const isExpanded = row.getIsExpanded();
+      areRowsExpanded.add(isExpanded);
 
-  // The if statement runs only for row depth 0, the else statement for the rest
-  if (targetParent === undefined) {
-    rows.forEach(row => {
-      if (row.depth === 0) {
-        updateExpandedRows[row.id] = !isExpansionConsistent
-          ? true
-          : !row.getIsExpanded()
-      }
-    })
-  } else {
-    for (const row of rows) {
-      if (targetParent === row.parentId) {
-        updateExpandedRows[row.id] = !isExpansionConsistent
-          ? true
-          : !row.getIsExpanded()
+      updateExpandedRows[row.id] = !isExpansionConsistent ? true : !isExpanded;
+
+      if (areRowsExpanded.size > 1) {
+        isExpansionConsistent = false;
+        // If expansion inconsistent, ensure all target rows are set to expand
+        for (const key in updateExpandedRows) {
+          updateExpandedRows[key] = true;
+        }
       }
     }
   }
@@ -59,5 +43,5 @@ export const updateExpandAndCollapseState = (
   return filterExpandableRows({
     ...(expanded as ExpandedStateObject),
     ...updateExpandedRows,
-  })
-}
+  });
+};

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;
@@ -83,15 +82,18 @@
 
   // Vertical separator
   .table-header-cells:first-child,
-  td:first-child,
-  .pb_table_td:first-child {
-    box-shadow: 1px 0px 0px 0px $border_light !important;
+  td:first-child {
+    box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
   }
 
-  @include chrome_styles($border-color);
+  .chrome-styles:first-child {
+    border-right: $border-color;
+  }
 
-  tr:hover {
-    position: relative;
+  .table-card {
+    .chrome-styles:first-child {
+      border-right: $transparent !important;
+    }
   }
 
   &.dark {