playbook_ui 14.17.0 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13874566f1f6c12cde0929976d074965455ec07aec5f90e4bea2b2ae0e7e3b0e
-  data.tar.gz: 2d6fae64049b09f78c419089d563bd15daa6d3cd8857c7743264c78367eb6f00
+  metadata.gz: c1e18bde3ae663443a8f2abd729409a4dd3606b200f20af8e682deefcb536628
+  data.tar.gz: 15b2591ea63aafe61e85edace6dede5fb518b1be8c7ef38e2dac80f28398a171
 SHA512:
-  metadata.gz: 88ec472b7d3b00f5359abad8596f1ecdc32f2308c02d0eb4a27c31259b2f563fabdf2458f9fc741865f7c05d99cc11ae55bf747c49f1db16b8b991010ee6ea41
-  data.tar.gz: 181523ec91b70cca9e242a1b5679afb5bee4f77da05391e58618e9269b3d9709cdcbbb18a00d7f0ca221050fec168bb03c984a4cda6980382645c5da9f397ee8
+  metadata.gz: 65433f86291b38b3f92b055c59da8f29a9aba259175f5e70be216a9696e0a54d2ac1500db582214db292f5257de8bbfe2d094c7c601b115906da2a4c2b2a1c82
+  data.tar.gz: 69557c4012871a0641ef15d9652950ae1e872c6babe475a1035f6a975ec5033b452fe09b4713e0711a7aabbaf1c785bccfba7d5c7e92cd933001ebf78c0b2cb6

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;
     }
   }