playbook_ui 14.17.0.pre.alpha.PLAY2040removeunnecessarystickytableclasses7300 → 14.17.0.pre.alpha.PLAY20547307

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 728e1bcdca87364a7a649b4759c10152751f1778b6b06f838c39a2afeee3e8d1
-  data.tar.gz: 67148c95d37c6d3ca0401f05613a6a67fb50fd8586769cfed0899362f7ab9de5
+  metadata.gz: 06c3be1f56543c7c3eaaa61b499fcd468b2d949490d1e63a9633466889d2a82f
+  data.tar.gz: 40597dc6319352c9362e3f165228a93daa9adbe5853f3145581d038eb58a09b7
 SHA512:
-  metadata.gz: 456d346e0df51a28b02e85d76a0da69a2df08df4f4a3020da311f8738664383bec137cc4421e8a00fa5e05869fd51cabd4657d9938ffa7cfb22d3a60cf9c2c28
-  data.tar.gz: d6b65398fa09510f649468b3b78d2643c79452f45d7252693b44f27faee1e46593f47afe53e9efae6b22433ad357975e14798b7a9fee3928b36c25d3588c3d9f
+  metadata.gz: f013f65db3bc6a708f1009b8103d8da9f1dd0bd762b18a5c48dc8745160955249ea53ea784496257401ee0820499a441514f758d5ae6709aa928de5b1dee4a73
+  data.tar.gz: bf8c87674cbf08d0b905a6c2b769c373c1d63c23a968010950ca1d35449cbe91c7e06a282f909244c9abcba56b2186812c38a9083ed0dca60446f354bde86dcb

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

@@ -1,6 +1,6 @@
 import React, { useContext } from "react"
 import classnames from "classnames"
-import { flexRender, Header, Table } from "@tanstack/react-table"
+import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 
@@ -8,9 +8,16 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Checkbox from "../../pb_checkbox/_checkbox"
+import Dropdown from "../../pb_dropdown/_dropdown"
+import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
+import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
+import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
+import Icon from "../../pb_icon/_icon"
 
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
+import { displayIcon } from "../Utilities/IconHelpers"
+import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 
@@ -40,6 +47,10 @@ export const TableHeaderCell = ({
   table
 }: TableHeaderCellProps) => {
   const {
+    expanded,
+    setExpanded,
+    expandByDepth,
+    toggleExpansionIcon,
     sortControl,
     responsive,
     selectableRows,
@@ -107,6 +118,17 @@ const isToggleExpansionEnabled =
     justifyHeader = isLeafColumn ? "end" : "center";
   }
   
+  const handleExpandDepth = (depth: number) => {
+    const updated = updateExpandAndCollapseState(
+      table.getRowModel(),
+      expanded,
+      undefined,
+      depth
+    )
+    setExpanded(updated)
+  }
+  
+
   return (
     <th
         align="right"
@@ -143,9 +165,34 @@ const isToggleExpansionEnabled =
               />
             )
           }
-          {isToggleExpansionEnabled && hasAnySubRows && (
+          {isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
+          {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
+              <Dropdown options={expandByDepth}>
+                <DropdownTrigger className="gray-icon toggle-all-icon">
+                  <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
+                </DropdownTrigger>
+                <DropdownContainer className="expand-by-depth-dropdown">
+                  {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
+                    <DropdownOption
+                        key={index}
+                        option={option}
+                        padding="none"
+                    > 
+                      <Flex
+                          alignItems="center"
+                          htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
+                          paddingX="sm"
+                          paddingY="xs"
+                          >
+                            {option.label}
+                          </Flex>
+                    </DropdownOption>
+                  ))}
+                </DropdownContainer>
+              </Dropdown>
+            )}
 
           {isToggleExpansionEnabledLoading &&(
               <div className="loading-toggle-icon header-toggle-icon" />

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts

@@ -22,10 +22,9 @@ export function useTableActions({
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
     onToggleExpansionClick && onToggleExpansionClick(row);
-
     const expandedState = expanded;
     const targetParent = row?.parentId;
-    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
+    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
     setExpanded(updatedRows);
   }, [expanded, setExpanded, onToggleExpansionClick, table]);
 

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

@@ -1,4 +1,4 @@
-import { RowModel } from "@tanstack/react-table"
+import { RowModel, Row } from "@tanstack/react-table"
 import { ExpandedStateObject } from "./types"
 import { GenericObject } from "../../types"
 
@@ -14,30 +14,40 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
 export const updateExpandAndCollapseState = (
   tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
-  targetParent: string
+  targetParent?: string,
+  targetDepth?: number,
 ) => {
   const updateExpandedRows: Record<string, boolean> = {};
-  const rows = tableRows.rows;
+  const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
 
-  let isExpansionConsistent = true;
-  const areRowsExpanded = new Set<boolean>();
+  const rowsToToggle: Row<GenericObject>[] = [];
 
   for (const row of rows) {
-    const shouldBeUpdated = targetParent === undefined ? row.depth === 0 : targetParent === row.parentId;
-    
+    const shouldBeUpdated =
+      targetDepth !== undefined
+        ? row.depth <= targetDepth
+        : targetParent === undefined
+        ? row.depth === 0
+        : targetParent === row.parentId;
+
     if (shouldBeUpdated) {
-      const isExpanded = row.getIsExpanded();
-      areRowsExpanded.add(isExpanded);
-
-      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;
-        }
-      }
+      rowsToToggle.push(row);
+    }
+  }
+
+  // Check if we are expanding or collapsing
+  const anyCollapsed = rowsToToggle.some((row) => !row.getIsExpanded());
+  const isExpandAction = anyCollapsed;
+
+  
+  for (const row of rowsToToggle) {
+    const shouldUpdate =
+      isExpandAction || targetDepth === undefined
+        ? true
+        : row.depth === targetDepth;
+
+    if (shouldUpdate) {
+      updateExpandedRows[row.id] = isExpandAction;
     }
   }
 

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

@@ -130,6 +130,9 @@
         box-sizing: border-box !important;
       }
     }
+    .expand-by-depth-dropdown {
+      min-width: 150px;
+    }
   }
 
   .pb_advanced_table_body {

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

@@ -38,6 +38,7 @@ type AdvancedTableProps = {
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
   expandedControl?: GenericObject
+  expandByDepth?: { [key: string]: string | number }
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   initialLoadingRowsCount?: number
@@ -73,6 +74,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
+    expandByDepth,
     htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
@@ -280,6 +282,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
+            expandByDepth={expandByDepth}
             expanded={expanded}
             expandedControl={expandedControl}
             handleExpandOrCollapse={handleExpandOrCollapse}

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

@@ -0,0 +1,65 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableExpandByDepth = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const expandByDepth = [
+    {
+        depth: 0,
+        label: "Year",
+    },
+    {
+        depth: 1,
+        label: "Quarter",
+    },
+    {
+        depth: 2,
+        label: "Month",
+    }
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          expandByDepth={expandByDepth}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableExpandByDepth

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md

@@ -0,0 +1,9 @@
+The `expandByDepth` prop enables users to expand or collapse table rows by specific levels of nesting. When provided, it renders a dropdown that appears when the toggle icon in the header is clicked.
+
+`expandByDepth` accepts an array of objects, where each object defines the depth level to target and the label to display in the dropdown. When a user selects an option:
+
+**Expanding a depth**: Expands all rows at the selected depth AND all parent levels above it (if parent levels were closed), ensuring nested content is visible.
+
+**Collapsing a depth**: Only collapses rows at the selected depth, keeping parent rows expanded for context.
+
+

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -22,6 +22,7 @@ examples:
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
   - advanced_table_expanded_control: Expanded Control
+  - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -25,4 +25,5 @@ export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_
 export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
-export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
+export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
+export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -35,7 +35,7 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
-    separators: boolean;
+    separators?: boolean;
     triggerRef?: any;
     variant?: "default" | "subtle";
 };

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -22,7 +22,7 @@ type DropdownOptionProps = {
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
-  key?: string;
+  key?: string | number;
   option?: GenericObject;
   padding?: string;
 }  & GlobalProps;

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -84,8 +84,8 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftColumn.length,
-            'sticky-right-column': stickyRightColumn.length,
+            'sticky-left-column': stickyLeftColumn,
+            'sticky-right-column': stickyRightColumn,
             'striped': striped,
             'header-borderless': headerStyle === 'borderless',
             'header-floating': headerStyle === 'floating',