playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY20787400

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7baa338bb75cb26c1132c864778628ebcffefab2f521a56d79dab553358fe5d8
-  data.tar.gz: 6d8d21d62396220dd1882c83e7002457d3db571da2a914ab5d05184c38df367a
+  metadata.gz: eaa89f27b581b891e8f2e308b3c2878cae2b2073485c731ab1f2143ce5201c43
+  data.tar.gz: 43c6a430f135f407da1de984fc6eb79d4aad2c5ca6e3228e22648c7a5df640b5
 SHA512:
-  metadata.gz: d5e0ba02e3d069bfbfb68fa7612036969a277e45b7d20a6c45f81e38dd798ddee91900a85d259336380639794654f28b1d8b89fc207f11a95b537e40ebdb6644
-  data.tar.gz: c30476a417049e3e83fb851189685e18c6d631464f4e7ae3c3cb6dd9fe324a3d55344cda9fb3d500521957e1deaaef14554a25ac5a4efa06858f51fefab2e14d
+  metadata.gz: 03ec5e9d380203c29d2ec6335961b6bbdc600b5f52186145a4dfc8a57bbb470d12bccb0b720a56620418236b945a488ad04b3421d865d4039e656ac88e2a8e45
+  data.tar.gz: 40f77a4576409998dff40d9ef56b172aa09b891ec42db213cf14f11ce31659cd1ec89135e2ed8b803f52318ba7c9556846e16aa9d10bde2569c78a7ee3bf13f7

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/Utilities/types.ts

@@ -3,4 +3,4 @@ import { ExpandedState } from "@tanstack/react-table"
 export type ExpandedStateObject = Extract<
   ExpandedState,
   Record<string, boolean>
->
+>

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

@@ -7,6 +7,8 @@
 @import "./scss_partials/chrome_styles";
 @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;
@@ -92,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;
       }
     }
@@ -103,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;
@@ -121,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 {
@@ -144,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;
       }
     }
@@ -172,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;
@@ -229,6 +238,56 @@
     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;
+    height: 100vh;
+    left: 0;
+    overflow: auto;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: $z_10;
+
+    .pb_table {
+      th,
+      td,
+      div,
+      button {
+        font-size: calc(100%);
+      }
+      box-sizing: border-box;
+      margin: $space_lg;
+      max-width: calc(100% - 64px);
+      width: calc(100% - 64px);
+    }
+
+    .pb_table.sticky-header {
+      thead,
+      .pb_advanced_table_header {
+        position: sticky !important;
+        top: 44px !important;
+        z-index: $z_10;
+      }
+    }
+  }
+
+  .advanced-table-fullscreen-header {
+    background-color: $white;
+    height: 44px;
+    padding: 13px 20px;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: $z_10;
+  }
+
   // Icons
   .button-icon {
     display: flex;
@@ -277,6 +336,16 @@
     }
   }
 
+  .fullscreen-icon {
+    @extend .button-icon;
+    @extend %primary-color-pseudo;
+    padding: 2px 0;
+
+    &:focus-visible {
+      border-radius: $border_rad_lighter;
+    }
+  }
+
   // Vertical separator
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
@@ -314,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) {
@@ -422,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;
     }
 
@@ -430,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 {
@@ -466,63 +493,45 @@
       box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
 
+    // Fullscreen
+    &.advanced-table-fullscreen {
+      background: $bg_dark;
+    }
+
+    .advanced-table-fullscreen-header {
+      background-color: $bg_dark_card;
+      position: sticky;
+      top: 0;
+      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
+        );
       }
     }
   }
-}
+}