playbook_ui 16.3.0.pre.alpha.railspinnedrows14953 → 16.3.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 17a3a4c0cfdf09caa3680a6992006a766adc927bae6894cd6b20d1508e85a34f
-  data.tar.gz: 7ed26531db9e127dd0660bc2870049b4dc29e5160dfb668b666506dc9736af5f
+  metadata.gz: c263f61be4ea85a8bf2e3d4f6a590f49ec43352c54affc9d4f5d95e44247b22f
+  data.tar.gz: 0ba673160c6a8d82633238b13e852d76cc9c2ab770e16af71fb54a584dc5686b
 SHA512:
-  metadata.gz: 8d38cc16a1c636775b8ff366a1667c4708ba52d9bf29661cc4f691bc524b99e9b60a053fab8b92caf375f9bca8e875a54c1b31a5ba496e149ff670882036d765
-  data.tar.gz: 0d3ea30b0eedd892fee116b5b1c14a4d958098fe3b81283efc7142cc7335f2273a5d8de765a8ab7706b201f4f21ec48f503ef160736359808388401a230dbfcb
+  metadata.gz: f4aa538155e4273e01007a6f8316d215424f3c59efdd1839a3717f88a6eeb9af9bb6545f7837cb8128cf2809ca4142b0e78f853117f9180a3b689a7266133231
+  data.tar.gz: 64fcefa854d31c4bea45c2a5d12576d0ba2e4418b27ad2a7cb8dee12adae3dd2d60dba698919daef16cf9563a103015a6cc7a991a9f6e465e4ebd443ab83b329

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

@@ -11,7 +11,6 @@ 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>
@@ -32,25 +31,13 @@ export const CustomCell = ({
   selectableRows,
   customStyle = {},
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows, cascadeCollapse } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-
-    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 });
-      }
+    
+    if (!expandedControl) {
+      setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
     }
   };
 

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

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

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

@@ -12,7 +12,6 @@ interface UseTableActionsProps {
   inlineRowLoading?: boolean;
   localPagination?: { pageIndex: number; pageSize: number };
   setLocalPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
-  cascadeCollapse?: boolean;
 }
 
 export function useTableActions({
@@ -23,8 +22,7 @@ export function useTableActions({
   onRowSelectionChange,
   inlineRowLoading = false,
   localPagination,
-  setLocalPagination,
-  cascadeCollapse = false
+  setLocalPagination
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -34,25 +32,15 @@ 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
+      )
 
-    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]);
+      setExpanded(updatedExpandedState)
+  }, [expanded, setExpanded, onToggleExpansionClick, table]);
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {

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

@@ -12,7 +12,6 @@ import {
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
 import { createCellFunction } from "../Utilities/CellRendererUtils";
-import { getParentOnlySortedRowModel } from "../Utilities/RowModelUtils";
 
 interface UseTableStateProps {
   tableData: GenericObject[];
@@ -37,7 +36,6 @@ interface UseTableStateProps {
   columnVisibilityControl?: GenericObject;
   rowStyling?: GenericObject;
   inlineRowLoading?: boolean;
-  sortParentOnly?: boolean;
 }
 
 export function useTableState({
@@ -57,8 +55,7 @@ export function useTableState({
   columnVisibilityControl,
   pinnedRows,
   rowStyling,
-  inlineRowLoading = false,
-  sortParentOnly = false
+  inlineRowLoading = false
 }: UseTableStateProps) {
 
   // Create a local state for expanded and setExpanded if expandedControl not used
@@ -193,7 +190,7 @@ export function useTableState({
     getSubRows: (row: GenericObject) => row.children,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
-    getSortedRowModel: sortParentOnly ? getParentOnlySortedRowModel() : getSortedRowModel(),
+    getSortedRowModel: getSortedRowModel(),
     enableSortingRemoval: enableSortingRemoval,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,

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

@@ -11,21 +11,11 @@ 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;
@@ -61,22 +51,8 @@ export const updateExpandAndCollapseState = (
     }
   }
 
-  const updatedExpandedState = filterExpandableRows({
+  return 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.scss

@@ -63,51 +63,6 @@
     width: 100%;
   }
 
-  // Override pb_table endcap: first and last column use same padding as rest of row
-  // First column
-  .pb_table.table-sm tbody tr td:first-child,
-  .pb_table.table-sm tbody tr .pb_table_td:first-child,
-  .pb_table.table-sm tbody .pb_table_tr td:first-child,
-  .pb_table.table-sm tbody .pb_table_tr .pb_table_td:first-child,
-  .pb_table.table-sm .pb_table_tbody tr td:first-child,
-  .pb_table.table-sm .pb_table_tbody tr .pb_table_td:first-child,
-  .pb_table.table-sm .pb_table_tbody .pb_table_tr td:first-child,
-  .pb_table.table-sm .pb_table_tbody .pb_table_tr .pb_table_td:first-child {
-    padding-left: $space-xs;
-  }
-  .pb_table.table-md tbody tr td:first-child,
-  .pb_table.table-md tbody tr .pb_table_td:first-child,
-  .pb_table.table-md tbody .pb_table_tr td:first-child,
-  .pb_table.table-md tbody .pb_table_tr .pb_table_td:first-child,
-  .pb_table.table-md .pb_table_tbody tr td:first-child,
-  .pb_table.table-md .pb_table_tbody tr .pb_table_td:first-child,
-  .pb_table.table-md .pb_table_tbody .pb_table_tr td:first-child,
-  .pb_table.table-md .pb_table_tbody .pb_table_tr .pb_table_td:first-child {
-    padding-left: $space-sm;
-  }
-
-  // Last column
-  .pb_table.table-sm tbody tr td:last-child,
-  .pb_table.table-sm tbody tr .pb_table_td:last-child,
-  .pb_table.table-sm tbody .pb_table_tr td:last-child,
-  .pb_table.table-sm tbody .pb_table_tr .pb_table_td:last-child,
-  .pb_table.table-sm .pb_table_tbody tr td:last-child,
-  .pb_table.table-sm .pb_table_tbody tr .pb_table_td:last-child,
-  .pb_table.table-sm .pb_table_tbody .pb_table_tr td:last-child,
-  .pb_table.table-sm .pb_table_tbody .pb_table_tr .pb_table_td:last-child {
-    padding-right: $space-xs;
-  }
-  .pb_table.table-md tbody tr td:last-child,
-  .pb_table.table-md tbody tr .pb_table_td:last-child,
-  .pb_table.table-md tbody .pb_table_tr td:last-child,
-  .pb_table.table-md tbody .pb_table_tr .pb_table_td:last-child,
-  .pb_table.table-md .pb_table_tbody tr td:last-child,
-  .pb_table.table-md .pb_table_tbody tr .pb_table_td:last-child,
-  .pb_table.table-md .pb_table_tbody .pb_table_tr td:last-child,
-  .pb_table.table-md .pb_table_tbody .pb_table_tr .pb_table_td:last-child {
-    padding-right: $space-sm;
-  }
-
   // Virtualized Table and Rows for Infinite Scroll
   scrollbar-gutter: stable right-edges;
   .virtualized-header-row-header {
@@ -765,7 +720,7 @@
     }
   }
 
-  // Row Pinning - React uses inline style; Rails passes same style via html_options from table_body
+  // Row Pinning - additional inline styles in RegularTableView.tsx
   .pinned-row {
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
   }

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

@@ -31,7 +31,6 @@ type FullscreenControls = {
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
-  cascadeCollapse?: boolean
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -66,7 +65,6 @@ type AdvancedTableProps = {
   showActionsBar?: boolean,
   persistToggleExpansionButton?: boolean,
   sortControl?: GenericObject
-  sortParentOnly?: boolean
   tableData: GenericObject[]
   tableOptions?: GenericObject
   tableProps?: GenericObject
@@ -82,7 +80,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
     actions,
-    cascadeCollapse = false,
     children,
     className,
     columnDefinitions,
@@ -115,7 +112,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     selectableRows,
     persistToggleExpansionButton = false,
     sortControl,
-    sortParentOnly = false,
     stickyLeftColumn,
     tableData,
     tableOptions,
@@ -161,8 +157,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnVisibilityControl,
     pinnedRows,
     rowStyling,
-    inlineRowLoading,
-    sortParentOnly
+    inlineRowLoading
   });
 
   // Initialize table actions
@@ -178,8 +173,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     inlineRowLoading,
     localPagination,
-    setLocalPagination,
-    cascadeCollapse
+    setLocalPagination
   });
 
   // Set table row count for loading state
@@ -345,7 +339,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       >
         {renderFullscreenHeader()}
         <AdvancedTableProvider
-            cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -7,12 +7,12 @@
     }) %>
   <% end %>
 
-  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props || {})) do %>
+  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
     <% if content.present? %>
       <% content.presence %>
     <% else %>
       <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar, inline_row_loading: object.inline_row_loading, persist_toggle_expansion_button: object.persist_toggle_expansion_button, table_data: object.table_data }) %>
-      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading, pinned_rows: object.pinned_rows }) %>
+      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -37,8 +37,6 @@ module Playbook
                                 default: false
       prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
                                              default: false
-      prop :pinned_rows, type: Playbook::Props::HashProp,
-                         default: {}
 
       def classname
         additional_classes = [

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

@@ -495,41 +495,7 @@ test("sort button exists and sorts column data", () => {
 
   const row2 = kit.getElementsByTagName('tr')[2]
   expect(row2.id).toBe("0-0-0-row")
-})
-
-test("sortParentOnly sorts only parent rows and keeps children grouped under parent", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        sortParentOnly
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header enableSorting />
-      <AdvancedTable.Body />
-    </AdvancedTable>
-  )
-
-  const kit = screen.getByTestId(testId)
-  const sortButton = kit.querySelector(".header-sort-button.pb_th_link")
-  expect(sortButton).toBeInTheDocument()
-
-  const tbody = kit.querySelector('tbody')
-  const rowsBefore = tbody.getElementsByTagName('tr')
-  expect(rowsBefore[0]).toHaveTextContent('2021')
-
-  sortButton.click()
-
-  const rowsAfter = tbody.getElementsByTagName('tr')
-  expect(rowsAfter[0]).toHaveTextContent('2022')
-
-  const expandButton = kit.querySelector(".gray-icon.expand-toggle-icon")
-  expandButton.click()
-
-  const rowsExpanded = tbody.getElementsByTagName('tr')
-  expect(rowsExpanded.length).toBeGreaterThan(1)
-  expect(rowsExpanded[1]).toHaveTextContent('Q1')
-})
+}) 
 
 test("Generates Table.Header default + custom classname", () => {
   render(
@@ -1049,77 +1015,4 @@ 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/example.yml

@@ -7,7 +7,6 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
-  - advanced_table_pinned_rows_rails: Pinned Rows
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -40,11 +39,9 @@ examples:
   - advanced_table_sort_per_column: Enable Sort By Column
   - advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
   - advanced_table_custom_sort: Custom Sort
-  - advanced_table_sort_parent_only: Sort Parent Only
   - 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,6 +48,4 @@ 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 AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
-export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'