playbook_ui 18.3.0 → 18.4.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed0bccebc1ce9ad6fd37beef926cdbc7a6144dc721e7b465018ddfcfa0567308
-  data.tar.gz: edd9e231226e1c85b0a19bfd39a63fa5b8689c0a3c798c1dc8937c9008e3024b
+  metadata.gz: 7857c81c8777f126825841968493b921ed0152d13d2adf30b09c631a21b5227b
+  data.tar.gz: 607cf7d2df99e50c7cfaac3e19c3f184abe226586c27fa7775e6a019904d12a6
 SHA512:
-  metadata.gz: d0ebc657f6d8ffa1853c109c366750e77193c31db71635296c3d9000613d00fdf213cc508149805300d86a17a27700a6539788315c4e99fe44842cf6d57152a7
-  data.tar.gz: 1b6a91e7784fc21f0586107ffcd6dd1262c469e893df73e88d2e441f84270a70c177e8d57f11ea960659c91b66d477ebb7f8f4e8bc13a1d8f0765e2de3db0b4b
+  metadata.gz: 063a9838e72ac864c7b13359ce1f04a1c9b046ce1a44221aece7fafa2578e9a6a8c34757337020521f7a243865f014c841e19659616c0623ebcbed92fcb116c5
+  data.tar.gz: fe9d2025dd4b44a4e09695cf6b96075dcfcfb566236076446499f89bf7e8b2d6c12d1bfca2acce53510fccb4b1c8c6d73c39c7a33b3d3ab1296ec6ffa4575a77

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

@@ -1,10 +1,17 @@
-import React from "react"
+import React, { useContext } from "react"
+
+import AdvancedTableContext from "../Context/AdvancedTableContext"
 
 //CollapsibleTrail component
 const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
+  const { groupSeparators } = useContext(AdvancedTableContext)
   const style: { [key: string]: string | number } = {
     left: `${leftOffset}em`,
   }
+  // Read by groupSeparators CSS to decide which trails stop at the stroke
+  if (groupSeparators) {
+    style["--collapsible-trail-left"] = `${leftOffset}em`
+  }
 
   return (
     <div 

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react"
+import React, { useContext, useEffect, useMemo } from "react"
 import classnames from "classnames"
 import { flexRender, Row, Cell } from "@tanstack/react-table"
 
@@ -6,7 +6,7 @@ import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
-import { getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
+import { buildGroupSeparatorInsets, getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -125,6 +125,7 @@ export const RegularTableView = ({
 }: RegularTableViewProps) => {
   const {
     enableToggleExpansion,
+    groupSeparators,
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
@@ -158,14 +159,30 @@ export const RegularTableView = ({
     (obj: Record<string, unknown>) => "columns" in obj
   );
 
-  // Row pinning
-  function PinnedRow({ row, position }: { row: Row<any>; position: 'top' | 'bottom' }) {
+  // One map from the full row model so pinning a non-last sibling cannot
+  // invent a second separator just because that section only sees that row.
+  const rowModelRows = table.getRowModel().rows
+  const groupSeparatorInsets = useMemo(
+    () => (groupSeparators ? buildGroupSeparatorInsets(rowModelRows) : new Map<string, number>()),
+    [groupSeparators, rowModelRows]
+  )
+
+  function PinnedRow({
+    position,
+    row,
+  }: {
+    position: 'top' | 'bottom'
+    row: Row<any>
+  }) {
     const customRowStyle = getRowStyle(rowStyling, row);
     const bottomRowsCount = table.getBottomRows().length;
+    const groupSeparatorInsetEm = groupSeparatorInsets.get(row.id)
+    const showGroupSeparator = groupSeparatorInsetEm !== undefined
 
     return (
       <tr
           className={classnames('pinned-row', {
+            'group-separator-row': showGroupSeparator,
             'pinned-row-bottom': position === 'bottom',
           })}
           style={{
@@ -182,6 +199,9 @@ export const RegularTableView = ({
                   : undefined,
             zIndex: '3',
             fontWeight: getFontWeight(customRowStyle),
+            ...(showGroupSeparator && {
+              ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
+            }),
           }}
       >
         <TableCellRenderer
@@ -198,11 +218,13 @@ export const RegularTableView = ({
     )
   }
 
-  const totalRows = pinnedRows ? table.getCenterRows() : table.getRowModel().rows
+  const totalRows = pinnedRows ? table.getCenterRows() : rowModelRows
+  const topRows = pinnedRows ? table.getTopRows() : []
+  const bottomRows = pinnedRows ? table.getBottomRows() : []
 
   return (
     <>
-      {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
+      {topRows.map((row: Row<GenericObject>) => (
         <PinnedRow key={row.id}
             position="top"
             row={row}
@@ -219,6 +241,8 @@ export const RegularTableView = ({
         // Use functions from RowUtils for consistent cell coloring
         const rowColor = getRowColorClass(row, inlineRowLoading || false);
         const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
+        const groupSeparatorInsetEm = groupSeparatorInsets.get(row.id)
+        const showGroupSeparator = groupSeparatorInsetEm !== undefined
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -234,13 +258,20 @@ export const RegularTableView = ({
             )}
 
             <tr
-                className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
+                className={classnames(
+                  rowColor,
+                  row.depth > 0 && `depth-sub-row-${row.depth}`,
+                  showGroupSeparator && "group-separator-row"
+                )}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
                 ref={isFirstRegularRow ? sampleRowRef : null}
                 style={{
                   backgroundColor: customRowStyle?.backgroundColor,
                   color: customRowStyle?.fontColor,
                   fontWeight: getFontWeight(customRowStyle),
+                  ...(showGroupSeparator && {
+                    ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
+                  }),
                 }}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
@@ -280,7 +311,7 @@ export const RegularTableView = ({
           </React.Fragment>
         );
       })}
-      {pinnedRows && table.getBottomRows().map((row: Row<GenericObject>) => (
+      {bottomRows.map((row: Row<GenericObject>) => (
         <PinnedRow key={row.id}
             position="bottom"
             row={row}

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

@@ -1,4 +1,4 @@
-import React, { useContext, useLayoutEffect, useState, useEffect, useRef } from "react"
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useState } from "react"
 import classnames from "classnames"
 import { flexRender, Cell, Row } from "@tanstack/react-table"
 import { VirtualItem } from "@tanstack/react-virtual"
@@ -7,7 +7,7 @@ import { GenericObject } from "../../types"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
-import { getRowColorClass } from "../Utilities/RowUtils"
+import { buildGroupSeparatorInsets, getRowColorClass } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -34,6 +34,7 @@ export const VirtualizedTableView = ({
 }: VirtualizedTableViewProps) => {
   const {
     enableToggleExpansion,
+    groupSeparators,
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
@@ -119,6 +120,13 @@ export const VirtualizedTableView = ({
     };
   }, [table, selectableRows, hasAnySubRows]);
 
+  // Memoize against scroll-driven re-renders; only rebuild when the row model changes.
+  const rowModelRows = table.getRowModel().rows
+  const groupSeparatorInsets = useMemo(
+    () => (groupSeparators ? buildGroupSeparatorInsets(rowModelRows) : new Map<string, number>()),
+    [groupSeparators, rowModelRows]
+  )
+
   // Safety check
   if (!virtualizer || !flattenedItems) {
     return (
@@ -180,10 +188,17 @@ export const VirtualizedTableView = ({
 
           // Use the utility function to get consistent row color
           const rowColor = getRowColorClass(row, inlineRowLoading || false);
+          const groupSeparatorInsetEm = groupSeparatorInsets.get(row.id)
+          const showGroupSeparator = groupSeparatorInsetEm !== undefined
 
           return (
             <tr
-                className={`virtualized-table-row ${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
+                className={classnames(
+                  "virtualized-table-row",
+                  rowColor,
+                  row.depth > 0 && `depth-sub-row-${row.depth}`,
+                  showGroupSeparator && "group-separator-row"
+                )}
                 data-index={virtualRow.index}
                 key={`row-${item.id}-sort-${sortingState}`}
                 ref={(node) => {
@@ -195,7 +210,12 @@ export const VirtualizedTableView = ({
                     }
                   }
                 }}
-                style={virtualItemStyle}
+                style={{
+                  ...virtualItemStyle,
+                  ...(showGroupSeparator && {
+                    ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
+                  }),
+                }}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (

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

@@ -53,6 +53,35 @@ export const getFontWeight = (rowStyle?: GenericObject) => {
   if (rowStyle?.fontWeight === "regular") return 400
 }
 
+// Matches the `left` of the nth collapsible-trail (see CollapsibleTrail.tsx).
+const getCollapsibleTrailLeftEm = (trailIndex: number): number =>
+  trailIndex * 1.0 + (trailIndex > 1 ? (trailIndex - 1) * 0.25 : 0)
+
+/**
+ * One O(n) pass over the full visible row model → Map of row id to its
+ * `--group-separator-inset` (em). Call once (and memoize) for the whole table —
+ * do not rebuild per pinned section, or a pinned non-last sibling can look like
+ * a last sibling and invent a second separator.
+ *
+ * A row closes every group between its depth and the next visible row's depth
+ * (so expanded parents defer to their last visible descendant, and sort/filter
+ * is respected). One stroke is drawn, inset to the outermost closed group:
+ * year-level → 0 / full-bleed, otherwise that group's collapsible-trail.
+ */
+export const buildGroupSeparatorInsets = (
+  visibleRows: Row<GenericObject>[]
+): Map<string, number> => {
+  const insets = new Map<string, number>()
+
+  visibleRows.forEach((row, index) => {
+    if (row.depth === 0) return
+    const nextDepth = visibleRows[index + 1]?.depth ?? 0
+    if (nextDepth >= row.depth) return
+    insets.set(row.id, nextDepth === 0 ? 0 : getCollapsibleTrailLeftEm(nextDepth + 1))
+  })
+  return insets
+}
+
 /**
  * Creates a virtual item style object for virtualized rows
  */

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

@@ -15,6 +15,8 @@
 
   // Base vertical border color variable setup
   --column-border-color: #{$border_light};
+  --group-separator-color: #{$input_border_default};
+  --group-separator-row-border-color: #{$border_light};
 
   // Define color tokens once
   $border_color_options: (
@@ -524,6 +526,48 @@
     border-bottom-color: $border_light !important;
   }
 
+  // 2px group separator on last sibling of each nested group. It replaces the
+  // default border-bottom: the border goes transparent and the stroke paints
+  // over its spot, with a 1px default line underneath for any part left of
+  // --group-separator-inset (0 = year-level full-bleed). Rails:
+  // .group-separator-expanded defers to the leaf.
+  tr.group-separator-row:not(.group-separator-expanded) {
+    > td,
+    > .pb_table_td {
+      border-bottom-color: transparent !important;
+      background-image:
+        linear-gradient(var(--group-separator-color), var(--group-separator-color)),
+        linear-gradient(var(--group-separator-row-border-color), var(--group-separator-row-border-color));
+      // Padding-box origin so the inset matches the trails' `left` (a first-cell
+      // border-left would otherwise shift the stroke 1px past its trail); the
+      // +1px pushes both layers down over the 1px bottom border.
+      background-origin: padding-box;
+      background-position: 0 calc(100% + 1px), 0 calc(100% + 1px);
+      background-repeat: no-repeat;
+      background-size: 100% 2px, 100% 1px;
+      // Table hover sets `transition: all` on cells, which slides the stroke in
+      // from the top when a row becomes a separator. Keep only the hover border fade.
+      transition-property: border-color !important;
+    }
+
+    > td:first-child:not(.checkbox-cell),
+    > .pb_table_td:first-child:not(.checkbox-cell),
+    > td.checkbox-cell + td,
+    > td.checkbox-cell + .pb_table_td {
+      background-position: var(--group-separator-inset, 0em) calc(100% + 1px), 0 calc(100% + 1px);
+      background-size: calc(100% - var(--group-separator-inset, 0em)) 2px, 100% 1px;
+
+      // Trails left of the inset belong to groups that stay open, so they run
+      // through; trails at or past it stop on top of the stroke, which rises
+      // 1px above the (now transparent) border (0 or 1px).
+      // Avoid `* 1000` inside this clamp: dart-sass strips the calc() and leaves
+      // `(var() - var()) * 1000`, which SassC rejects when nitro recompiles playbook.css.
+      .collapsible-trail {
+        bottom: clamp(0px, calc(var(--collapsible-trail-left, 0em) - var(--group-separator-inset, 0em) + 1px), 1px);
+      }
+    }
+  }
+
   // Apply border colors when columnGroupBorderColor is set
   &[class*="column-group-border-"] {
     // For top-level column groups
@@ -789,6 +833,8 @@
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};
+    --group-separator-color: #{$input_border_default_dark};
+    --group-separator-row-border-color: #{$border_dark};
 
     // Dark mode default border colors for trails and horizontal borders
     .collapsible-trail {
@@ -800,6 +846,26 @@
       border-bottom-color: $border_dark !important;
     }
 
+    // table-dark sets `border-color: … !important` (rest + hover), and
+    // column-group-border sets `.toggle-content td { border-bottom: … !important }`.
+    // Those beat the shared separator rule, so the opaque border paints over the
+    // 2px stroke. Reassert transparent bottom with higher specificity.
+    .pb_table.dark,
+    .pb_table.table-dark {
+      tbody > tr.group-separator-row:not(.group-separator-expanded),
+      .pb_table_tbody > .pb_table_tr.group-separator-row:not(.group-separator-expanded) {
+        > td,
+        > .pb_table_td {
+          border-bottom-color: transparent !important;
+        }
+
+        &:hover > td,
+        &:hover > .pb_table_td {
+          border-bottom-color: transparent !important;
+        }
+      }
+    }
+
     .pb-bg-row-white {
       background: $bg_dark_card;
     }
@@ -808,21 +874,22 @@
       background: $bg_dark;
     }
 
-    // Dark mode virtualized rows
+    // Dark mode virtualized rows — use background-color (not the background
+    // shorthand) so group-separator background-image is not cleared.
     .virtualized-table-row {
       &.pb-bg-row-white {
-        background: $bg_dark_card !important;
+        background-color: $bg_dark_card !important;
 
         td:first-child {
-          background: $bg_dark_card !important;
+          background-color: $bg_dark_card !important;
         }
       }
 
       &.bg-silver {
-        background: $bg_dark;
+        background-color: $bg_dark;
 
         td:first-child {
-          background: $bg_dark;
+          background-color: $bg_dark;
         }
       }
     }

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

@@ -37,6 +37,7 @@ type AdvancedTableProps = {
   expandByDepth?: GenericObject[]
   onExpandByDepthClick?: (arg: number, arg1: any) => void
   fullWidthCell?: boolean
+  groupSeparators?: boolean
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   initialLoadingRowsCount?: number
@@ -100,6 +101,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     expandByDepth,
     onExpandByDepthClick,
     fullWidthCell = false,
+    groupSeparators = false,
     htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
@@ -326,6 +328,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             expandByDepth={expandByDepth}
             expanded={expanded}
             expandedControl={expandedControl}
+            groupSeparators={groupSeparators}
             handleExpandOrCollapse={handleExpandOrCollapse}
             hasAnySubRows={hasAnySubRows}
             inlineRowLoading={inlineRowLoading}

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

@@ -12,7 +12,7 @@
       <% 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, full_width_cell: object.full_width_cell, 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, full_width_cell: object.full_width_cell, group_separators: object.group_separators, pinned_rows: object.pinned_rows }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -37,11 +37,19 @@ module Playbook
                                 default: false
       prop :full_width_cell, type: Playbook::Props::Boolean,
                              default: false
+      prop :group_separators, type: Playbook::Props::Boolean,
+                              default: false
       prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
                                              default: false
       prop :pinned_rows, type: Playbook::Props::HashProp,
                          default: {}
 
+      # Marker for Rails JS: only toggle group-separator-expanded when this is set.
+      # Use merge (not tap/mutate) so we don't write onto the shared default {} or a caller-owned data hash.
+      def data
+        Hash(prop(:data)).merge(group_separators ? { group_separators: true } : {})
+      end
+
       def classname
         additional_classes = [
           responsive_classname,