playbook_ui 18.3.0.pre.alpha.PLAY3366externalruntimeguard21028 → 18.3.0.pre.alpha.forwardrefwarnings20879

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 80232c9ae671d87421db22aa58b318cca134c877a5ecec1c54d60a51692d1711
-  data.tar.gz: 0fd186981bffc3483978a2b87753bff5207d9b5b2a656f9a60ec6221d449b2bd
+  metadata.gz: af48353705b1ce87159c9761f41618cbb21c66e593c0e6c3a7eca1ba3cd7d2a3
+  data.tar.gz: ab45901796d0cfff09d8d199d320c83cd58429b7831544aa427865306d6e5d96
 SHA512:
-  metadata.gz: 69c8ca5c3dd6d24cd5ad6fc94adf8b79ba5dc21b446f27879a51df35f8b2b1be2eaa3c3f935b535d0e1d92a252dadfbae91e292d633d18a65d9e80aff3a4d4bc
-  data.tar.gz: c333be9545bc895436dbfb6dfcfebb5b3352a41a18c3472fae8c707964ab617f169462c0ea1f20b528ff2498fa7961216b3a2c1b17769faf07f6367e8b0593d8
+  metadata.gz: fcdf296d7ddc231a54b735b920bc650387c76f8364531ee44950d80d4e819b16dc188a102b4ca44d92964a60498272d00b33d5fbdaf4edd3bdfb4e7c9a466e7a
+  data.tar.gz: 0142e30f5c5b217699a9e3b2059117fd350cfa51dac2ab3fc6c3e2c9b700707f068412da119e437b81574b4f4844f7781ce9f6bd9ea075717c6127400bf1a3c4

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

@@ -1,17 +1,10 @@
-import React, { useContext } from "react"
-
-import AdvancedTableContext from "../Context/AdvancedTableContext"
+import React from "react"
 
 //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, useMemo } from "react"
+import React, { useContext, useEffect } 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 { buildGroupSeparatorInsets, getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
+import { getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -125,7 +125,6 @@ export const RegularTableView = ({
 }: RegularTableViewProps) => {
   const {
     enableToggleExpansion,
-    groupSeparators,
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
@@ -159,30 +158,14 @@ export const RegularTableView = ({
     (obj: Record<string, unknown>) => "columns" in obj
   );
 
-  // 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>
-  }) {
+  // Row pinning
+  function PinnedRow({ row, position }: { row: Row<any>; position: 'top' | 'bottom' }) {
     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={{
@@ -199,9 +182,6 @@ export const RegularTableView = ({
                   : undefined,
             zIndex: '3',
             fontWeight: getFontWeight(customRowStyle),
-            ...(showGroupSeparator && {
-              ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
-            }),
           }}
       >
         <TableCellRenderer
@@ -218,13 +198,11 @@ export const RegularTableView = ({
     )
   }
 
-  const totalRows = pinnedRows ? table.getCenterRows() : rowModelRows
-  const topRows = pinnedRows ? table.getTopRows() : []
-  const bottomRows = pinnedRows ? table.getBottomRows() : []
+  const totalRows = pinnedRows ? table.getCenterRows() : table.getRowModel().rows
 
   return (
     <>
-      {topRows.map((row: Row<GenericObject>) => (
+      {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
         <PinnedRow key={row.id}
             position="top"
             row={row}
@@ -241,8 +219,6 @@ 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`}>
@@ -258,20 +234,13 @@ export const RegularTableView = ({
             )}
 
             <tr
-                className={classnames(
-                  rowColor,
-                  row.depth > 0 && `depth-sub-row-${row.depth}`,
-                  showGroupSeparator && "group-separator-row"
-                )}
+                className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 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 */}
@@ -311,7 +280,7 @@ export const RegularTableView = ({
           </React.Fragment>
         );
       })}
-      {bottomRows.map((row: Row<GenericObject>) => (
+      {pinnedRows && table.getBottomRows().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, useEffect, useLayoutEffect, useMemo, useState } from "react"
+import React, { useContext, useLayoutEffect, useState, useEffect, useRef } 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 { buildGroupSeparatorInsets, getRowColorClass } from "../Utilities/RowUtils"
+import { getRowColorClass } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -34,7 +34,6 @@ export const VirtualizedTableView = ({
 }: VirtualizedTableViewProps) => {
   const {
     enableToggleExpansion,
-    groupSeparators,
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
@@ -120,13 +119,6 @@ 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 (
@@ -188,17 +180,10 @@ 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={classnames(
-                  "virtualized-table-row",
-                  rowColor,
-                  row.depth > 0 && `depth-sub-row-${row.depth}`,
-                  showGroupSeparator && "group-separator-row"
-                )}
+                className={`virtualized-table-row ${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 data-index={virtualRow.index}
                 key={`row-${item.id}-sort-${sortingState}`}
                 ref={(node) => {
@@ -210,12 +195,7 @@ export const VirtualizedTableView = ({
                     }
                   }
                 }}
-                style={{
-                  ...virtualItemStyle,
-                  ...(showGroupSeparator && {
-                    ["--group-separator-inset" as string]: `${groupSeparatorInsetEm}em`,
-                  }),
-                }}
+                style={virtualItemStyle}
             >
               {/* 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,35 +53,6 @@ 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,8 +15,6 @@
 
   // 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: (
@@ -526,48 +524,6 @@
     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
@@ -833,8 +789,6 @@
   &.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 {
@@ -846,26 +800,6 @@
       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;
     }
@@ -874,22 +808,21 @@
       background: $bg_dark;
     }
 
-    // Dark mode virtualized rows — use background-color (not the background
-    // shorthand) so group-separator background-image is not cleared.
+    // Dark mode virtualized rows
     .virtualized-table-row {
       &.pb-bg-row-white {
-        background-color: $bg_dark_card !important;
+        background: $bg_dark_card !important;
 
         td:first-child {
-          background-color: $bg_dark_card !important;
+          background: $bg_dark_card !important;
         }
       }
 
       &.bg-silver {
-        background-color: $bg_dark;
+        background: $bg_dark;
 
         td:first-child {
-          background-color: $bg_dark;
+          background: $bg_dark;
         }
       }
     }

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

@@ -37,7 +37,6 @@ 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
@@ -101,7 +100,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     expandByDepth,
     onExpandByDepthClick,
     fullWidthCell = false,
-    groupSeparators = false,
     htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
@@ -328,7 +326,6 @@ 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, group_separators: object.group_separators, 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, pinned_rows: object.pinned_rows }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -37,19 +37,11 @@ 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,