playbook_ui 14.20.0.pre.alpha.PLAY2140upgraderailsdependency8086 → 14.20.0.pre.alpha.PLAY2170checkboxrailsindeterminatelogicinkitPOC7980

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3cef40734753b0b60a203a4bac20cb67761e89b9606e7653eb710181e12900d2
-  data.tar.gz: a565502c28a8f868baed8fbb04f4972f27a2fb903b2493290a4b6b84f0fbd9ab
+  metadata.gz: f08c1401569be7ec360234581ac1f8e77974bd468dd40578153aa3b26de92f58
+  data.tar.gz: 317f542180cb2ab211d2a509b2380f549023af74b9d28d854cc2c39fcbed451b
 SHA512:
-  metadata.gz: 63f5325ef2c15fe0ee7ec49ff03eacf6db264ab5dceb208dae4625a5ed75829f017bf936d91fef72db66bd5765085c54ae798f186d4d354cccc991d0c5633017
-  data.tar.gz: 4a623e2e86b8893b3a46095c9ab0341c6913fe7d8a6276671aaf6544c5f3e52a905e56e3ff272d9cc6658e0624068ea229a01529a73caf28287ddbeee4542354
+  metadata.gz: 41b11eac6492594abe461ef0ee462353ba7b37b717d0edfe26a0f4356cf4eba17578036933c0ea97021263ac47e55b38435fcebe882b976b54e5a3e6ee28ca8b
+  data.tar.gz: d36b7e00aa603dbe91fb5a068f68937a82bcb3f849a6fe8acf24209174f13bd7ca3d2750b211d88caa74dc92d7816eef36626d768668e576529c7574bec9beef

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

@@ -47,7 +47,7 @@ export const CustomCell = ({
       <Flex 
           alignItems="center" 
           columnGap="xs"
-          justify={"start"}
+          justify={!hasAnySubRows && !inlineRowLoading ? "end" : "start"}
           orientation="row"
       >
         {

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

@@ -19,71 +19,6 @@ type RegularTableViewProps = {
   subRowHeaders?: string[]
 }
 
-// Helper function for Table Rendering
-const TableCellRenderer = ({
-  row,
-  collapsibleTrail = true,
-  loading = false,
-  stickyLeftColumn,
-  columnPinning
-}: {
-  row: Row<GenericObject>
-  collapsibleTrail?: boolean
-  loading?: boolean | string
-  stickyLeftColumn?: string[]
-  columnPinning: { left: string[] }
-}) => {
-  return (
-    <>
-      {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
-        const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-        const isLastCell = (() => {
-          const parent = cell.column.parent;
-          if (!parent) {
-            const last = row.getVisibleCells().at(-1);
-            return last?.column.id === cell.column.id;
-          }
-
-          const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
-          return visibleSiblings.at(-1)?.id === cell.column.id;
-        })();
-
-        const { column } = cell;
-        
-        return (
-          <td
-              align="right"
-              className={classnames(
-                `${cell.id}-cell position_relative`,
-                isChrome() ? "chrome-styles" : "",
-                isPinnedLeft && 'pinned-left',
-                stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
-                isLastCell && 'last-cell',
-              )}
-              key={`${cell.id}-data`}
-              style={{
-                left: isPinnedLeft
-                  ? i === 1 // Accounting for set min-width for first column
-                    ? '180px'
-                    : `${column.getStart("left")}px`
-                  : undefined,
-            }}
-          >
-            {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
-            <span id={`${cell.id}-span`}>
-              {loading ? (
-                <LoadingCell />
-              ) : (
-                flexRender(cell.column.columnDef.cell, cell.getContext())
-              )}
-            </span>
-          </td>
-        );
-      })}
-    </>
-  )
-}
-
 export const RegularTableView = ({
   collapsibleTrail = true,
   subRowHeaders,
@@ -93,14 +28,11 @@ export const RegularTableView = ({
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
+    responsive,
     table,
     selectableRows,
     hasAnySubRows,
-    stickyLeftColumn,
-    pinnedRows,
-    headerHeight,
-    rowHeight,
-    sampleRowRef,
+    stickyLeftColumn
   } = useContext(AdvancedTableContext)
 
 
@@ -118,44 +50,9 @@ export const RegularTableView = ({
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
 
-  // Row pinning
-  function PinnedRow({ row }: { row: Row<any> }) {
-    return (
-      <tr
-          className={classnames(
-            `pinned-row`,
-          )}
-          style={{
-            backgroundColor: 'white',
-            position: 'sticky',
-            top:   
-              row.getIsPinned() === 'top'
-                  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
-                  : undefined,
-            zIndex: '3'
-          }}
-      >
-        <TableCellRenderer
-            collapsibleTrail={collapsibleTrail}
-            columnPinning={columnPinning}
-            loading={loading}
-            row={row}
-            stickyLeftColumn={stickyLeftColumn}
-        />
-      </tr>
-    )
-  }
-
-  const totalRows = pinnedRows ? table.getCenterRows() : table.getRowModel().rows
-
   return (
     <>
-      {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
-        <PinnedRow key={row.id} 
-            row={row} 
-        />
-      ))}
-      {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
+      {table.getRowModel().rows.map((row: Row<GenericObject>) => {
         const isExpandable = row.getIsExpanded();
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
         const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
@@ -163,7 +60,6 @@ export const RegularTableView = ({
         const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
         const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
-        const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -181,7 +77,6 @@ export const RegularTableView = ({
             <tr
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
-                ref={isFirstRegularRow ? sampleRowRef : null}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (
@@ -195,13 +90,51 @@ export const RegularTableView = ({
                   />
                 </td>
               )}
-              <TableCellRenderer
-                  collapsibleTrail={collapsibleTrail}
-                  columnPinning={columnPinning}
-                  loading={loading}
-                  row={row}
-                  stickyLeftColumn={stickyLeftColumn}
-              />
+
+              {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
+                const isPinnedLeft = columnPinning.left.includes(cell.column.id);
+                const isLastCell = (() => {
+                  const parent = cell.column.parent;
+                    if (!parent) {
+                      const last = row.getVisibleCells().at(-1);
+                      return last?.column.id === cell.column.id;
+                    }
+                  
+                    const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
+                    return visibleSiblings.at(-1)?.id === cell.column.id;
+                   })();
+
+                const { column } = cell;
+                return (
+                  <td
+                      align="right"
+                      className={classnames(
+                        `${cell.id}-cell position_relative`,
+                        isChrome() ? "chrome-styles" : "",
+                        isPinnedLeft && 'pinned-left',
+                        stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
+                        isLastCell && 'last-cell',
+                      )}
+                      key={`${cell.id}-data`}
+                      style={{
+                        left: isPinnedLeft
+                          ? i === 1 //Accounting for set min-width for first column
+                            ? '180px'
+                            : `${column.getStart("left")}px`
+                          : undefined,
+                      }}
+                  >
+                    {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
+                    <span id={`${cell.id}-span`}>
+                      {loading ? (
+                        <LoadingCell />
+                      ) : (
+                        flexRender(cell.column.columnDef.cell, cell.getContext())
+                      )}
+                    </span>
+                  </td>
+                );
+              })}
             </tr>
 
             {/* Display LoadingInline if Row Data is querying and there are no children already */}
@@ -221,4 +154,4 @@ export const RegularTableView = ({
   );
 }
 
-export default RegularTableView;
+export default RegularTableView;

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

@@ -128,7 +128,7 @@ const isToggleExpansionEnabled =
 
   let justifyHeader:justifyTypes;
 
-  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading) || (header?.index === 0 && isToggleExpansionEnabled)) {
+  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading)) {
     justifyHeader = enableSorting ? "between" : "start";
   } else {
     justifyHeader = isLeafColumn ? "end" : "center";

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useRef, useMemo, useEffect, useState, useCallback } from 'react';
+import React, { createContext, useRef, useMemo, useEffect } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { Row } from "@tanstack/react-table";
@@ -23,54 +23,6 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   const table = props.table;
   const isVirtualized = props.virtualizedRows || props.enableVirtualization;
-  
-  // Pinned Row: height calculations for Header and Row
-  const headerRef = useRef(null);
-  const sampleRowRef = useRef(null);
-  
-  const [headerHeight, setHeaderHeight] = useState(44);
-  const [rowHeight, setRowHeight] = useState(38);
-
-  const measureHeights = useCallback(() => {
-    if (headerRef.current) {
-      const headerRect = headerRef.current.getBoundingClientRect();
-      if (headerRect.height > 0) {
-        setHeaderHeight(headerRect.height);
-      }
-    }
-    if (sampleRowRef.current) {
-      const rowRect = sampleRowRef.current.getBoundingClientRect();
-      if (rowRect.height > 0) {
-        setRowHeight(rowRect.height);
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(() => {
-      measureHeights();
-    });
-
-    if (headerRef.current) {
-      resizeObserver.observe(headerRef.current);
-    }
-
-    if (sampleRowRef.current) {
-      resizeObserver.observe(sampleRowRef.current);
-    }
-
-    const timeoutId = setTimeout(measureHeights, 100);
-
-    return () => {
-      resizeObserver.disconnect();
-      clearTimeout(timeoutId);
-    };
-  }, [measureHeights]);
-
-  useEffect(() => {
-    measureHeights();
-  }, [table?.getRowModel().rows.length, measureHeights]);
-
 
   // Create a flattened data array that includes ALL components for virtualization
   const flattenedItems = useMemo(() => {
@@ -180,15 +132,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     virtualizer: isVirtualized ? virtualizer : null,
     flattenedItems,
     virtualizedRows: isVirtualized,
-    enableVirtualization: isVirtualized,
-    rowPinning: props.rowPinning,
-    setRowPinning: props.setRowPinning,
-    keepPinnedRows: props.keepPinnedRows,
-    headerHeight,
-    rowHeight,
-    headerRef,
-    sampleRowRef,
-    measureHeights,
+    enableVirtualization: isVirtualized
   };
 
   return (

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { Row, RowPinningState } from "@tanstack/react-table";
+import { Row } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers";
 

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

@@ -6,8 +6,7 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   RowSelectionState,
-  Row,
-  RowPinningState
+  Row
 } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
@@ -24,14 +23,11 @@ interface UseTableStateProps {
   loading?: boolean | string;
   pagination?: boolean;
   paginationProps?: GenericObject;
-  pinnedRows?: {
-    value?: RowPinningState;
-    onChange?: (value: RowPinningState) => void;
-  };
   virtualizedRows?: boolean;
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
+
 }
 
 export function useTableState({
@@ -47,24 +43,18 @@ export function useTableState({
   paginationProps,
   virtualizedRows = false,
   tableOptions,
-  columnVisibilityControl,
-  pinnedRows,
+  columnVisibilityControl
 }: UseTableStateProps) {
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [localColumnVisibility, setLocalColumnVisibility] = useState({});
-  const [localRowPinning, setLocalRowPinning] = useState<RowPinningState>({
-    top: [],
-  });
   // Determine whether to use the prop or the local state
   const expanded = expandedControl ? expandedControl.value : localExpanded;
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
   const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
   const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
-  const rowPinning = pinnedRows && pinnedRows.value || localRowPinning;
-  const setRowPinning = (pinnedRows && pinnedRows.onChange) ? pinnedRows.onChange : setLocalRowPinning;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -125,7 +115,6 @@ export function useTableState({
       ...(sortControl     && { sorting }),
       ...(selectableRows  && { rowSelection }),
       ...(columnVisibility && { columnVisibility }),
-      ...(pinnedRows && { rowPinning }),
     },
   }), [
     expanded,
@@ -134,7 +123,6 @@ export function useTableState({
     selectableRows,
     rowSelection,
     columnVisibility,
-    rowPinning,
   ]);
 
   // Pagination configuration
@@ -165,7 +153,7 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
-    getRowId: (selectableRows || pinnedRows) ? row => row.id : undefined,
+    getRowId: selectableRows ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -39,8 +39,7 @@ export const TableHeader = ({
     hasAnySubRows,
     showActionsBar,
     selectableRows,
-    responsive,
-    headerRef
+    responsive
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -63,11 +62,8 @@ export const TableHeader = ({
           id={id}
       >
         {/* Get the header groups (only one in this example) */}
-        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-          <tr 
-              key={`${headerGroup.id}-headerGroup`}
-              ref={index === 0 ? headerRef : null}
-          >
+        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
+          <tr key={`${headerGroup.id}-headerGroup`}>
             {!hasAnySubRows && selectableRows && (
               <th className={customCellClassnames}>
                 <Checkbox

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

@@ -33,16 +33,6 @@
     }
   }
 
-  @mixin scrollbar-styling {
-     &::-webkit-scrollbar {
-        width: 8px;
-      }
-
-      -ms-overflow-style: none !important;
-      scrollbar-width: thin !important;
-      scrollbar-color: rgb(0 0 0 / .20) transparent;
-  }
-
   [id$="-span"] {
     word-wrap: normal;
   }
@@ -97,16 +87,6 @@
     }
   }
 
-  &.advanced-table-hide-scrollbar {
-      &::-webkit-scrollbar {
-        display: none !important;
-      }
-
-      -ms-overflow-style: none !important;
-      scrollbar-width: none !important;
-    }
-  
-
   .row-selection-actions-card {
     border-bottom-right-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
@@ -246,37 +226,30 @@
   &.advanced-table-max-height-xs {
     max-height: 320px;
     overflow-y: auto;
-    @include scrollbar-styling;
   }
   &.advanced-table-max-height-sm {
     max-height: 480px;
     overflow-y: auto;
-    @include scrollbar-styling;
   }
   &.advanced-table-max-height-md {
     max-height: 768px;
     overflow-y: auto;
-    @include scrollbar-styling;
   }
   &.advanced-table-max-height-lg {
     max-height: 1024px;
     overflow-y: auto;
-    @include scrollbar-styling;
   }
   &.advanced-table-max-height-xl {
     max-height: 1280px;
     overflow-y: auto;
-    @include scrollbar-styling;
   }
   &.advanced-table-max-height-xxl {
     max-height: 1440px;
     overflow-y: auto;
-    @include scrollbar-styling;
   }
   &.advanced-table-max-height-xxxl {
     max-height: 1920px;
     overflow-y: auto;
-    @include scrollbar-styling;
   }
 
   // Fullscreen
@@ -395,10 +368,6 @@
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
-  .pb_table_td:nth-child(2) {
-    box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
-  }
-
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -595,10 +564,6 @@
         box-shadow: $shadow_deep !important;
       }
 
-      .pb_table_td:nth-child(2) {
-        box-shadow: 0 0 0 0 !important;
-      }
-
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,
@@ -615,11 +580,6 @@
     }
   }
 
-  // Row Pinning - additional inline styles in RegularTableView.tsx
-  .pinned-row {
-    box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
-  }
-
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};

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

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState, useCallback } from "react";
 import classnames from "classnames";
 
 import { GenericObject } from "../types";
-import { Row, RowSelectionState, RowPinningState } from "@tanstack/react-table";
+import { Row, RowSelectionState } from "@tanstack/react-table";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
@@ -51,13 +51,8 @@ type AdvancedTableProps = {
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
   pagination?: boolean,
-  paginationProps?: GenericObject,
-  pinnedRows?: {
-    value?: RowPinningState;
-    onChange?: (value: RowPinningState) => void;
-  };
+  paginationProps?: GenericObject
   responsive?: "scroll" | "none",
-  scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
   sortControl?: GenericObject
@@ -96,9 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onToggleExpansionClick,
     pagination = false,
     paginationProps,
-    pinnedRows,
     responsive = "scroll",
-    scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
     sortControl,
@@ -143,7 +136,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     tableOptions,
     onRowSelectionChange,
     columnVisibilityControl,
-    pinnedRows,
   });
 
   // Initialize table actions
@@ -249,11 +241,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     {
       'advanced-table-fullscreen': isFullscreen,
-      'advanced-table-allow-fullscreen': allowFullScreen,
+      'advanced-table-allow-fullscreen': allowFullScreen
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
-    scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
     globalProps(props),
     className
   );
@@ -311,7 +302,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isFullscreen={isFullscreen}
             loading={loading}
             onExpandByDepthClick={onExpandByDepthClick}
-            pinnedRows={pinnedRows}
             responsive={responsive}
             selectableRows={selectableRows}
             setExpanded={setExpanded}

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

@@ -29,11 +29,9 @@ module Playbook
                               default: true
       prop :actions, type: Playbook::Props::Array,
                      default: []
-      prop :scroll_bar_none, type: Playbook::Props::Boolean,
-                             default: false
 
       def classname
-        additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]
+        additional_classes = [responsive_classname, max_height_classname]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
         generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
@@ -46,10 +44,6 @@ module Playbook
         max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
       end
 
-      def hide_scroll_bar_class
-        scroll_bar_none ? "advanced-table-hide-scrollbar " : ""
-      end
-
       def selected_rows
         @selected_rows ||= []
       end