playbook_ui 16.3.0 → 16.4.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ab403f777f646b3d7d608303239044ad0a7740e582035beccb22ddff5a24ce1
-  data.tar.gz: d4dc694b6f85c099e9b6f53d512e8fa0adc96a428a9c0d5699745594c6cd2d93
+  metadata.gz: 0f7d056170ce6b317f95c9d7ad73a63c8f7f3210c6cd02d17414534b2bff7c80
+  data.tar.gz: f2cb5edafbb6d1fb4ffacc6985d1422f5e3ce14930195b01dc9e08b8e41dd691
 SHA512:
-  metadata.gz: ccb47fdb993c29446e42924ae80737f6f33d20ee3b9f6fb5ffe35fbfd97431edbb1743e958b418021030ec02f116eaf7de26675bf3d792e08ec4c7a25ee4ba0e
-  data.tar.gz: a85463fbd073388ae9218fa64b56fa72b857883a1bf635154a5ba168cccbaea2d45e8f626b463d53042fded52f26556f87da8429f9b3e8ad742dac50324b7b9f
+  metadata.gz: 802232b2891b04f6890eec0e1810274a5faab50b2bba3067ccb7bc393226e70239733f941db20c0deba832bddc8591aad4782c66367389c823a7347eb1399169
+  data.tar.gz: 60a018fbfc411d74df9c01f63d419a2950069cd9cf21b90a1655baa7dcbc6690f22a67755120640e6215af7f7665dea8709bd866e58e5e3d4075cfc53d401c23

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

@@ -11,6 +11,7 @@ import Icon from "../../pb_icon/_icon"
 import Checkbox from "../../pb_checkbox/_checkbox"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { getDescendantRowIds } from "../Utilities/ExpansionControlHelpers"
 
 interface CustomCellProps {
   getValue?: Getter<string>
@@ -31,13 +32,25 @@ export const CustomCell = ({
   selectableRows,
   customStyle = {},
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows, cascadeCollapse } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-    
-    if (!expandedControl) {
-      setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
+
+    const willBeExpanded = !row.getIsExpanded();
+    if (willBeExpanded) {
+      if (!expandedControl) {
+        setExpanded({ ...expanded, [row.id]: true });
+      }
+    } else {
+      if (cascadeCollapse) {
+        const idsToRemove = new Set([row.id, ...getDescendantRowIds(row)]);
+        const nextExpanded = { ...expanded };
+        idsToRemove.forEach((id) => delete nextExpanded[id]);
+        setExpanded(nextExpanded);
+      } else if (!expandedControl) {
+        setExpanded({ ...expanded, [row.id]: false });
+      }
     }
   };
 

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

@@ -63,6 +63,7 @@ export const TableHeaderCell = ({
     stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
+    cascadeCollapse,
   } = useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
@@ -182,7 +183,8 @@ const isToggleExpansionEnabled =
       table.getRowModel(),
       expanded,
       undefined,
-      depth
+      depth,
+      cascadeCollapse
     )
     setExpanded(updated)
   }

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

@@ -12,6 +12,7 @@ interface UseTableActionsProps {
   inlineRowLoading?: boolean;
   localPagination?: { pageIndex: number; pageSize: number };
   setLocalPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
+  cascadeCollapse?: boolean;
 }
 
 export function useTableActions({
@@ -22,7 +23,8 @@ export function useTableActions({
   onRowSelectionChange,
   inlineRowLoading = false,
   localPagination,
-  setLocalPagination
+  setLocalPagination,
+  cascadeCollapse = false
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -32,15 +34,25 @@ export function useTableActions({
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
     if (onToggleExpansionClick) onToggleExpansionClick(row)
-      const updatedExpandedState = await updateExpandAndCollapseState(
-        table.getRowModel(),
-        expanded,
-        row?.parentId,
-        undefined
-      )
 
-      setExpanded(updatedExpandedState)
-  }, [expanded, setExpanded, onToggleExpansionClick, table]);
+    const anyTopLevelExpanded = table.getRowModel().rows.some((r: Row<GenericObject>) => r.getIsExpanded())
+    const isHeaderCollapseAll = row == null && anyTopLevelExpanded
+
+    if (cascadeCollapse && isHeaderCollapseAll) {
+      setExpanded({})
+      return
+    }
+
+    const updatedExpandedState = await updateExpandAndCollapseState(
+      table.getRowModel(),
+      expanded,
+      row?.parentId,
+      undefined,
+      cascadeCollapse
+    )
+
+    setExpanded(updatedExpandedState)
+  }, [expanded, setExpanded, onToggleExpansionClick, table, cascadeCollapse]);
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {

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

@@ -11,11 +11,21 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
   return expandedState
 }
 
+export const getDescendantRowIds = (row: Row<GenericObject>): string[] => {
+  const ids: string[] = []
+  for (const sub of row.subRows || []) {
+    ids.push(sub.id)
+    ids.push(...getDescendantRowIds(sub))
+  }
+  return ids
+}
+
 export const updateExpandAndCollapseState = (
   tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
   targetParent?: string,
   targetDepth?: number,
+  cascadeCollapse?: boolean,
 ) => {
   const updateExpandedRows: Record<string, boolean> = {};
   const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
@@ -51,8 +61,22 @@ export const updateExpandAndCollapseState = (
     }
   }
 
-  return filterExpandableRows({
+  const updatedExpandedState = filterExpandableRows({
     ...(expanded as ExpandedStateObject),
     ...updateExpandedRows,
   });
+
+  if (cascadeCollapse && !isExpandAction) {
+    const idsToRemove = new Set<string>();
+    for (const row of rowsToToggle) {
+      const shouldUpdate =
+        targetDepth === undefined ? true : row.depth === targetDepth;
+      if (shouldUpdate) {
+        getDescendantRowIds(row).forEach((id) => idsToRemove.add(id));
+      }
+    }
+    idsToRemove.forEach((id) => delete updatedExpandedState[id]);
+  }
+
+  return updatedExpandedState;
 };

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

@@ -31,6 +31,7 @@ type FullscreenControls = {
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
+  cascadeCollapse?: boolean
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -80,6 +81,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
     actions,
+    cascadeCollapse = false,
     children,
     className,
     columnDefinitions,
@@ -173,7 +175,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     inlineRowLoading,
     localPagination,
-    setLocalPagination
+    setLocalPagination,
+    cascadeCollapse
   });
 
   // Set table row count for loading state
@@ -339,6 +342,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       >
         {renderFullscreenHeader()}
         <AdvancedTableProvider
+            cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}

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

@@ -1015,4 +1015,77 @@ test("columnStyling.headerFontColor works as excpected", () => {
 
   const firstEnrollmentHeader = screen.getAllByText("New Enrollments")[0].closest("th");
   expect(firstEnrollmentHeader).toHaveStyle({ color: colors.white });
-});
+});
+
+test("cascadeCollapse=false (default) preserves existing behavior when parent is re-expanded", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const getParentExpandButton = () => kit.querySelector("tbody tr .gray-icon.expand-toggle-icon")
+  const parentButton = getParentExpandButton()
+  expect(parentButton).toBeInTheDocument()
+  parentButton.click()
+  let subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  expect(subRow).toBeInTheDocument()
+  getParentExpandButton().click()
+  subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  expect(subRow).not.toBeInTheDocument()
+  getParentExpandButton().click()
+  subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  expect(subRow).toBeInTheDocument()
+})
+
+test("cascadeCollapse=true collapses all descendants when parent is collapsed", () => {
+  render(
+    <AdvancedTable
+        cascadeCollapse
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const getParentExpandButton = () => kit.querySelector("tbody tr .gray-icon.expand-toggle-icon")
+  const parentButton = getParentExpandButton()
+  expect(parentButton).toBeInTheDocument()
+  parentButton.click()
+  expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+  getParentExpandButton().click()
+  expect(kit.querySelector(".depth-sub-row-1")).not.toBeInTheDocument()
+  getParentExpandButton().click()
+  expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+})
+
+test("cascadeCollapse=true with header toggle all: collapse all then expand all shows only direct children", async () => {
+  render(
+    <AdvancedTable
+        cascadeCollapse
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const toggleAllButton = kit.querySelector(".gray-icon.toggle-all-icon")
+  expect(toggleAllButton).toBeInTheDocument()
+  toggleAllButton.click()
+  await waitFor(() => {
+    expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+  })
+  toggleAllButton.click()
+  await waitFor(() => {
+    expect(kit.querySelector(".depth-sub-row-1")).not.toBeInTheDocument()
+  })
+  toggleAllButton.click()
+  await waitFor(() => {
+    expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,50 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCascadeCollapse = (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",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          cascadeCollapse
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableCascadeCollapse

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

@@ -0,0 +1 @@
+`cascadeCollapse` is an optional prop that is set to 'false' by default. If set to 'true', collapsing any parent row itself or by using the toggle exapansion buttons in any header or subheader row also collapses all descendants and clears their expansion state. Re-expanding then shows only direct children until the user expands deeper levels again.

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

@@ -42,6 +42,7 @@ examples:
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
+  - advanced_table_cascade_collapse: Cascade Collapse
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props

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

@@ -48,4 +48,5 @@ export { default as AdvancedTablePaddingControl } from './_advanced_table_paddin
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'

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

@@ -20,6 +20,7 @@ type TableProps = {
     aria?: { [key: string]: string },
     children: React.ReactNode[] | React.ReactNode,
     className: string,
+    cardProps?: { [key: string]: any },
     collapse?: "sm" | "md" | "lg",
     container?: boolean,
     dark?: boolean,
@@ -42,6 +43,7 @@ type TableProps = {
     striped?: boolean,
     tag?: "table" | "div",
     title?: string,
+    titleProps?: { [key: string]: any },
     variant?: "default" | "withFilter",
     verticalBorder?: boolean,
 } & GlobalProps
@@ -52,6 +54,8 @@ const Table = (props: TableProps): React.ReactElement => {
     const {
         aria = {},
         variant = 'default',
+        cardProps = {},
+        titleProps = {},
         children,
         className,
         collapse = variant === 'withFilter' ? 'md' : 'sm',
@@ -348,34 +352,33 @@ const Table = (props: TableProps): React.ReactElement => {
 
         // Merge default props with user-provided props (user props override defaults)
         const mergedFilterProps = { ...defaultFilterProps, ...filterProps }
+        
+        // Default card props that CAN be overridden (All props from Card kit CAN be used, but these are the ones we set as defaults)
+        const defaultCardProps: { [key: string]: any } = {
+            padding: "none",
+        }
+
+        // Merge default props with user-provided props (user props override defaults)
+        const mergedCardProps = { ...defaultCardProps, ...cardProps }
+
+        // Default title props that CAN be overridden (All props from Title kit CAN be used, but these are the ones we set as defaults)
+        const defaultTitleProps: { [key: string]: any } = {
+            size: 3,
+            paddingY: "md",
+        }
+
+        // Merge default props with user-provided props (user props override defaults)
+        const mergedTitleProps = { ...defaultTitleProps, ...titleProps }
 
         return (
             <>
                 {title && (
-                    <Title         
-                        paddingLeft={{
-                            xs: "sm",
-                            sm: "sm",
-                            md: "xl",
-                            lg: "xl",
-                            xl: "xl",
-                            default: "xl",
-                        } as any}
-                        paddingY="md"
-                        size={3}
+                    <Title {...mergedTitleProps} 
                         text={title} 
-                    />
+                    />      
                 )}
                 <Card
-                    marginX={{
-                        xs: "sm",
-                        sm: "sm",
-                        md: "xl",
-                        lg: "xl",
-                        xl: "xl",
-                        default: "xl",
-                    } as any}
-                    padding="none"
+                    {...mergedCardProps}
                 >
                     <Flex
                         align="stretch"

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.jsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react"
+import { Button, Date as DateKit, DatePicker, Dropdown, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
+
+ // Mock Data for Table  
+  const users = [
+    { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
+    { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
+    { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
+    { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
+    { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
+    { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
+    { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
+    { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
+    { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
+  ]
+
+const TableWithFilterWithCardTitleProps = () => {
+  const [territory, setTerritory] = useState("")
+
+  // --------Filter content example ------
+  const filterContent = ({ closePopover }) => (
+          <>
+            <TextInput
+                label="Territory ID"
+                onChange={event => setTerritory(event.target.value)}
+                value={territory}
+            />
+
+            <Typeahead
+                label="Title"
+                options={[
+                  { key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
+                  { key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
+                  { key: "ux-designer", label: "UX Designer", value: "ux-designer" }
+                ]}
+            />
+
+            <Select
+                blankSelection="All Departments"
+                label="Department"
+                options={[
+                  { value: "Business Technology", label: "Business Technology", key: "business-technology" },
+                  { value: "Customer Development", label: "Customer Development", key: "customer-development" },
+                  { value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
+                ]}
+            />
+
+            <Dropdown
+                label="Branch"
+                options={[
+                  { key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
+                  { key: "New York", label: "New York", value: "new-york" },
+                  { key: "Austin", label: "Austin", value: "austin" }
+                ]}
+            />
+
+            <DatePicker
+                label="Start Date"
+                paddingY="sm"
+                pickerId="startedOn"
+            />
+            <Flex spacing="between">
+            <Button
+                onClick={() => {
+                  alert("No filtering functionality - just a pattern demo!")
+                  closePopover()
+                }}
+                text="Filter"
+            />
+            <Button
+                text="Defaults"
+                variant="secondary"
+            />
+            </Flex>
+          </>
+        )
+  // -------End Filter content example ------
+  
+  return (
+    <Table 
+        cardProps={{marginX: {
+                        xs: "sm",
+                        sm: "sm",
+                        md: "xl",
+                        lg: "xl",
+                        xl: "xl",
+                        default: "xl",
+                    }}}
+        filterContent={filterContent}
+        filterProps={{
+          results: 50,
+          sortOptions: {
+            territory_id: "Territory ID",
+            first_name: "Name",
+            started_on: "Start Date",
+            department_name: "Department",
+            title_name: "Title",
+            branch_branch_name: "Branch",
+          },
+          sortValue: [{ name: 'started_on', dir: 'asc' }],
+        }}
+        title="Table Title Here"
+        titleProps={{
+          paddingLeft:{
+            xs: "sm",
+            sm: "sm",
+            md: "xl",
+            lg: "xl",
+            xl: "xl",
+            default: "xl",
+          }
+        }}
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Territory ID'}</Table.Header>
+          <Table.Header>{'Name'}</Table.Header>
+          <Table.Header>{'Title'}</Table.Header>
+          <Table.Header>{'Department'}</Table.Header>
+          <Table.Header>{'Branch'}</Table.Header>
+          <Table.Header textAlign="right">{'Start Date'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {users.map((user) => (
+          <Table.Row key={user.id}>
+            <Table.Cell 
+                marginX={{ xs: "sm" }}
+                numberSpacing="tabular"
+            >
+                {user.id}
+            </Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>
+              <DateKit 
+                  alignment="right"
+                  showCurrentYear
+                  value={user.startDate}
+              />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithFilterWithCardTitleProps

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.md

@@ -0,0 +1,17 @@
+The `withFilter` variant also offers 2 additional optional props:
+
+`cardProps`: An object containing Card-specific props.
+`titleProps`: An object containing Title-specific props.
+
+#### Default Card Props
+
+The Table kit automatically sets these Card defaults (which you can override via `cardProps`):
+
+- `padding="none"`
+
+#### Default Title Props
+
+The Table kit automatically sets these Title defaults (which you can override via `titleProps`):
+
+- `size={3}`
+- `paddingY="md"`