playbook_ui 14.17.0 → 14.18.0.pre.alpha.PLAY2107phonenumberlabeljumpbug7445

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13874566f1f6c12cde0929976d074965455ec07aec5f90e4bea2b2ae0e7e3b0e
-  data.tar.gz: 2d6fae64049b09f78c419089d563bd15daa6d3cd8857c7743264c78367eb6f00
+  metadata.gz: 74355bedb4fa4c6bcce6f12212decacadbacf05c928c5cc6594eb2a2f284688b
+  data.tar.gz: 239d4daf9b97535df4562812419aead40b083a3038cb1f91d6065a7cb2c41f15
 SHA512:
-  metadata.gz: 88ec472b7d3b00f5359abad8596f1ecdc32f2308c02d0eb4a27c31259b2f563fabdf2458f9fc741865f7c05d99cc11ae55bf747c49f1db16b8b991010ee6ea41
-  data.tar.gz: 181523ec91b70cca9e242a1b5679afb5bee4f77da05391e58618e9269b3d9709cdcbbb18a00d7f0ca221050fec168bb03c984a4cda6980382645c5da9f397ee8
+  metadata.gz: 5015173399d8ebeeded8bd6729dd37cb6581295a37457c2943f516f49b975a3dea20b4580a62e4cf66e4f04075501ec95bf1458d0d0dc671161fff1c668c7196
+  data.tar.gz: defaa26ab5365c9526a890eff436138de73e16060d4b986641405bd8aa1510fde0e505f882c6db23cb2c1b92b5148610a3c210cb42b2dcb95f59887d746c7249

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext, useEffect } from "react"
 import classnames from "classnames"
 import { flexRender, Row, Cell } from "@tanstack/react-table"
 
@@ -32,9 +32,21 @@ export const RegularTableView = ({
     table,
     selectableRows,
     hasAnySubRows,
-    isPinnedLeft = false,
+    stickyLeftColumn
   } = useContext(AdvancedTableContext)
 
+
+  useEffect(() => {
+    if (stickyLeftColumn && Array.isArray(stickyLeftColumn)) {
+      stickyLeftColumn.forEach((columnId) => {
+        const column = table.getColumn(columnId);
+        if (column && column.getCanPin()) {
+          column.pin('left');
+        }
+      });
+    }
+  },[stickyLeftColumn, table]);
+
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
 
@@ -82,7 +94,7 @@ export const RegularTableView = ({
               {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id);
                 const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
-
+                const { column } = cell;
                 return (
                   <td
                       align="right"
@@ -90,9 +102,17 @@ export const RegularTableView = ({
                         `${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`}>

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

@@ -1,6 +1,6 @@
 import React, { useContext } from "react"
 import classnames from "classnames"
-import { flexRender, Header, Table } from "@tanstack/react-table"
+import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 
@@ -8,9 +8,16 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Checkbox from "../../pb_checkbox/_checkbox"
+import Dropdown from "../../pb_dropdown/_dropdown"
+import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
+import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
+import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
+import Icon from "../../pb_icon/_icon"
 
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
+import { displayIcon } from "../Utilities/IconHelpers"
+import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 
@@ -40,11 +47,17 @@ export const TableHeaderCell = ({
   table
 }: TableHeaderCellProps) => {
   const {
+    expanded,
+    setExpanded,
+    expandByDepth,
+    onExpandByDepthClick,
+    toggleExpansionIcon,
     sortControl,
     responsive,
     selectableRows,
     hasAnySubRows,
     showActionsBar,
+    stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
   } = useContext(AdvancedTableContext);
@@ -76,7 +89,9 @@ const cellClassName = classnames(
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
-   isLastHeaderCell ? "last-header-cell" : ""
+   isLastHeaderCell ? "last-header-cell" : "",
+  stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
+
 ); 
 
 const cellId = `${loading ? 
@@ -104,6 +119,21 @@ const isToggleExpansionEnabled =
     justifyHeader = isLeafColumn ? "end" : "center";
   }
   
+  const handleExpandDepth = (depth: number) => {
+    if (onExpandByDepthClick) {
+      const flatRows = table?.getRowModel().flatRows
+      onExpandByDepthClick(depth, flatRows)
+    }
+    const updated = updateExpandAndCollapseState(
+      table.getRowModel(),
+      expanded,
+      undefined,
+      depth
+    )
+    setExpanded(updated)
+  }
+  
+
   return (
     <th
         align="right"
@@ -111,6 +141,13 @@ const isToggleExpansionEnabled =
         colSpan={header?.colSpan}
         id={cellId}
         key={`${header?.id}-header`}
+        style={{
+          left: isPinnedLeft
+            ? header?.index === 1 //Accounting for set min-width for first column
+              ? '180px'
+              : `${header?.column.getStart("left")}px`
+            : undefined,
+        }}
     >
       {header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
         <Flex alignItems="center">
@@ -133,9 +170,36 @@ const isToggleExpansionEnabled =
               />
             )
           }
-          {isToggleExpansionEnabled && hasAnySubRows && (
+          {isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
+          {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
+              <Dropdown className="expand-by-depth-dropdown-wrapper" 
+                  options={expandByDepth}
+              >
+                <DropdownTrigger className="gray-icon toggle-all-icon">
+                  <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
+                </DropdownTrigger>
+                <DropdownContainer className="expand-by-depth-dropdown">
+                  {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
+                    <DropdownOption
+                        key={index}
+                        option={option}
+                        padding="none"
+                    > 
+                      <Flex
+                          alignItems="center"
+                          htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
+                          paddingX="sm"
+                          paddingY="xs"
+                          >
+                            {option.label}
+                          </Flex>
+                    </DropdownOption>
+                  ))}
+                </DropdownContainer>
+              </Dropdown>
+            )}
 
           {isToggleExpansionEnabledLoading &&(
               <div className="loading-toggle-icon header-toggle-icon" />

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

@@ -22,10 +22,9 @@ export function useTableActions({
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
     onToggleExpansionClick && onToggleExpansionClick(row);
-
     const expandedState = expanded;
     const targetParent = row?.parentId;
-    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
+    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
     setExpanded(updatedRows);
   }, [expanded, setExpanded, onToggleExpansionClick, table]);
 

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

@@ -1,4 +1,4 @@
-import { RowModel } from "@tanstack/react-table"
+import { RowModel, Row } from "@tanstack/react-table"
 import { ExpandedStateObject } from "./types"
 import { GenericObject } from "../../types"
 
@@ -14,30 +14,40 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
 export const updateExpandAndCollapseState = (
   tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
-  targetParent: string
+  targetParent?: string,
+  targetDepth?: number,
 ) => {
   const updateExpandedRows: Record<string, boolean> = {};
-  const rows = tableRows.rows;
+  const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
 
-  let isExpansionConsistent = true;
-  const areRowsExpanded = new Set<boolean>();
+  const rowsToToggle: Row<GenericObject>[] = [];
 
   for (const row of rows) {
-    const shouldBeUpdated = targetParent === undefined ? row.depth === 0 : targetParent === row.parentId;
-    
+    const shouldBeUpdated =
+      targetDepth !== undefined
+        ? row.depth <= targetDepth
+        : targetParent === undefined
+        ? row.depth === 0
+        : targetParent === row.parentId;
+
     if (shouldBeUpdated) {
-      const isExpanded = row.getIsExpanded();
-      areRowsExpanded.add(isExpanded);
-
-      updateExpandedRows[row.id] = !isExpansionConsistent ? true : !isExpanded;
-
-      if (areRowsExpanded.size > 1) {
-        isExpansionConsistent = false;
-        // If expansion inconsistent, ensure all target rows are set to expand
-        for (const key in updateExpandedRows) {
-          updateExpandedRows[key] = true;
-        }
-      }
+      rowsToToggle.push(row);
+    }
+  }
+
+  // Check if we are expanding or collapsing
+  const anyCollapsed = rowsToToggle.some((row) => !row.getIsExpanded());
+  const isExpandAction = anyCollapsed;
+
+  
+  for (const row of rowsToToggle) {
+    const shouldUpdate =
+      isExpandAction || targetDepth === undefined
+        ? true
+        : row.depth === targetDepth;
+
+    if (shouldUpdate) {
+      updateExpandedRows[row.id] = isExpandAction;
     }
   }
 

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

@@ -8,6 +8,7 @@
 @import "../tokens/screen_sizes";
 @import "../tokens/shadows";
 @import "../tokens/positioning";
+@import "./scss_partials/advanced_table_sticky_mixin";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light;
@@ -93,8 +94,8 @@
       border-right: 1px solid $border_light !important;
     }
     .table-header-cells-custom {
-      text-align:center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
+      text-align: center;
+      [class^="pb_checkbox_kit"] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -104,7 +105,7 @@
     }
     // Right align header content of first data column in selectable row no subrow setup
     &.selectable-rows-enabled {
-      tr { 
+      tr {
         th:nth-child(2),
         .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
           justify-content: flex-end;
@@ -122,13 +123,20 @@
       }
 
       // Set fixed width for checkbox column
-      &.table-header-cells-custom, 
+      &.table-header-cells-custom,
       &.checkbox-cell.checkbox-cell-header {
         width: 40px !important;
         min-width: 40px !important;
         box-sizing: border-box !important;
       }
     }
+    .expand-by-depth-dropdown-wrapper {
+      position: unset !important;
+    }
+    .expand-by-depth-dropdown {
+      width: unset !important;
+      text-align: left;
+    }
   }
 
   .pb_advanced_table_body {
@@ -145,7 +153,7 @@
     .checkbox-cell {
       display: flex;
       justify-content: center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
+      [class^="pb_checkbox_kit"] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -173,7 +181,7 @@
       }
     }
     td {
-      [class^=pb_text_input_kit] .text_input_wrapper input {
+      [class^="pb_text_input_kit"] .text_input_wrapper input {
         padding: 0 $space_xxs;
         font-size: 14px;
         text-align: right;
@@ -230,12 +238,12 @@
     max-height: 1920px;
     overflow-y: auto;
   }
-  
+
   // Fullscreen
   &.advanced-table-allow-fullscreen {
     transition: all 0.3s ease;
   }
-  
+
   &.advanced-table-fullscreen {
     background-color: $bg_light;
     box-sizing: border-box;
@@ -248,7 +256,10 @@
     z-index: $z_10;
 
     .pb_table {
-      th, td, div, button {
+      th,
+      td,
+      div,
+      button {
         font-size: calc(100%);
       }
       box-sizing: border-box;
@@ -266,7 +277,7 @@
       }
     }
   }
-  
+
   .advanced-table-fullscreen-header {
     background-color: $white;
     height: 44px;
@@ -372,78 +383,32 @@
     width: 2px;
   }
 
+  // Sticky Left Columns Styling
+  &[class*="advanced-table-sticky-left-columns"] {
+    overflow-x: scroll;
+    .sticky-left {
+      position: sticky !important;
+      z-index: 2;
+      background-color: $white;
+      box-shadow: $shadow_deep;
+    }
+    @include advanced-table-sticky-mixin(
+      $border_light,
+      $white,
+      lighten($silver, $opacity_7)
+    );
+  }
+
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
-      border-radius: 4px;
-      box-shadow: 1px 0 0 0px $border_light,
-                  -1px 0 0 0px $border_light;
-      display: block;
       overflow-x: auto;
       width: 100%;
-      [class^=pb_table].table-sm.table-card thead tr th:first-child,
-      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-        border-left-width: 0px !important;
-      }
-      [class^=pb_table].table-sm.table-card thead tr th:last-child,
-      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
-        border-right-width: 0px;
-      }
-      [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
-      [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
-          border-radius: 0 0 0 0;
-        }
-      .table-header-cells:first-child,
-      td:first-child,
-      .pb_table_td:first-child,
-      .checkbox-cell.checkbox-cell-header:first-child,
-      [class*="pinned-left"] {
-          background-color: $white;
-          box-shadow: $shadow_deep !important;
-          position: sticky !important;
-          left: 0;
-          z-index: 2;
-      }
-      .bg-silver td:first-child {
-        background-color: lighten($silver, $opacity_7);
-      }
-      .bg-white td:first-child {
-          background-color: $white;
-      }
-
-      .virtualized-table-row {
-        &.bg-silver td:first-child {
-          background-color: lighten($silver, $opacity_7);
-        }
-        &.bg-white td:first-child {
-          background-color: $white;
-        }
-        &.bg-row-selection td:first-child {
-          background-color: $info_subtle;
-        }
-      }
-
-      .row-selection-actions-card {
-        border-right-width: 0px;
-        border-left-width: 0px;
-        position: sticky;
-        top: 0;
-        left: 0;
-        border-radius: unset;
-      }
-      .checkbox-cell {
-        display: table-cell !important;
-      }
-      .sticky-header {
-        thead {
-          th:first-child {
-            box-shadow: 1px 0 10px -2px $border_light !important;
-          }
-        }
-        .pb_advanced_table_header {
-          box-shadow: none !important;
-        }
-      }
+      @include advanced-table-sticky-mixin(
+        $border_light,
+        $white,
+        lighten($silver, $opacity_7)
+      );
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -480,7 +445,9 @@
       }
     }
 
-    .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
+    .table-header-cells:first-child,
+    td:first-child,
+    .pb_table_td:first-child {
       box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
 
@@ -488,12 +455,14 @@
       background-color: $border_dark !important;
     }
 
-    .sort-button-icon, .header-sort-button > div, .pb_th_link {
+    .sort-button-icon,
+    .header-sort-button > div,
+    .pb_th_link {
       color: $white !important;
     }
 
     .gray-icon {
-      color:  $text_dk_light !important;
+      color: $text_dk_light !important;
     }
 
     .sticky-header {
@@ -536,63 +505,33 @@
       z-index: $z_10;
     }
 
+    &[class*="advanced-table-sticky-left-columns"] {
+      .sticky-left {
+        background-color: $bg_dark;
+      }
+      @include advanced-table-sticky-mixin(
+        $border_dark,
+        $bg_dark_card,
+        $bg_dark
+      );
+    }
+
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {
-        border-radius: 4px;
-        box-shadow: 1px 0 0 0px $border_dark,
-                    -1px 0 0 0px $border_dark;
-        display: block;
-        overflow-x: scroll;
-        width: 100%;
-        [class^=pb_table].table-sm.table-card thead tr th:first-child,
-        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-          border-left-width: 0px;
-        }
-        [class^=pb_table].table-sm.table-card thead tr th:last-child,
-        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
-          border-right-width: 0px;
-        }
-        [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
-        [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
-            border-radius: 0 0 0 0;
-        }
-        .table-header-cells:first-child,
-        td:first-child,
-        .pb_table_td:first-child,
-        .checkbox-cell.checkbox-cell-header:first-child,
-        [class*="pinned-left"] {
-          background: $bg_dark_card;
-          border-right: $border_dark;
-          box-shadow: $shadow_deep !important;
-          position: sticky !important;
-        }
-        .bg-silver td:first-child {
-          background-color: $bg_dark;
-        }
-        .bg-white td:first-child {
-          background-color: $bg_dark_card;
-        }
-
-        // Dark mode virtualized rows
-        .virtualized-table-row {
-          &.bg-silver td:first-child {
-            background-color: $bg_dark;
-          }
-          &.bg-white td:first-child {
-            background-color: $bg_dark_card;
-          }
-        }
-
         .sticky-header {
           thead {
             th:first-child {
-              background: $bg_dark;
-              box-shadow: 1px 0 10px -2px $border_dark !important;
+              background: $bg_dark_card;
             }
           }
         }
+        @include advanced-table-sticky-mixin(
+          $border_dark,
+          $bg_dark_card,
+          $bg_dark
+        );
       }
     }
   }
-}
+}

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

@@ -38,6 +38,8 @@ type AdvancedTableProps = {
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
   expandedControl?: GenericObject
+  expandByDepth?: { [key: string]: string | number }
+  onExpandByDepthClick?: (arg: number, arg1: any) => void
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   initialLoadingRowsCount?: number
@@ -73,6 +75,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
+    expandByDepth,
+    onExpandByDepthClick,
     htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
@@ -87,6 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     showActionsBar = true,
     selectableRows,
     sortControl,
+    stickyLeftColumn,
     tableData,
     tableOptions,
     tableProps,
@@ -233,6 +238,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'advanced-table-fullscreen': isFullscreen,
       'advanced-table-allow-fullscreen': allowFullScreen
     },
+    {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     globalProps(props),
     className
   );
@@ -278,6 +284,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
+            expandByDepth={expandByDepth}
             expanded={expanded}
             expandedControl={expandedControl}
             handleExpandOrCollapse={handleExpandOrCollapse}
@@ -286,11 +293,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isActionBarVisible={isActionBarVisible}
             isFullscreen={isFullscreen}
             loading={loading}
+            onExpandByDepthClick={onExpandByDepthClick}
             responsive={responsive}
             selectableRows={selectableRows}
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}
             sortControl={sortControl}
+            stickyLeftColumn={stickyLeftColumn}
             subRowHeaders={tableOptions?.subRowHeaders}
             table={table}
             tableContainerRef={tableWrapperRef}