playbook_ui 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469 → 14.18.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6bbfa2629209297ecc32adbb7e4fae0ebb1078e24a1ed2bbb91ef902e4d54633
-  data.tar.gz: 0d7a64e3d789cf0c9b2570743fbbedf2654cf0ebfc3e6bb6617604fcc239591e
+  metadata.gz: 7f3de47141a421d9d9d54ab4699505a03bdc2ba36fce5d87d2bd3bc007526e7d
+  data.tar.gz: ffb8e34afbabf026e6a10a8a3ab7981237015d8ba57945df855316d3b93f2ed4
 SHA512:
-  metadata.gz: 0b0508316833ff5d8b933071c26531941539325fbd9f068b49242b06a3c2049194655e3465ad4bc8f91b9ab7ee59a2cf7c0d66a4420b298d273bd05f43d7d5f2
-  data.tar.gz: '09a117e1055ff3f3cc1c3d1f11c14a46292a54377f1961f0e7d91094dcfe66bb5d37544d0b4752c654663f303605e01867ab5c302d2beee8135b014ca8e11307'
+  metadata.gz: b42981d33ab74bac828aef053f460a9ce9b108b21955f311e9050d1a3e0a7bc06629de944bd11c4cb4d677612a905c32d9faf199eb7614e74534060a75cac1bb
+  data.tar.gz: '09b073481994a722f3330d2f8a581fd9426e9f36ec394e5456db05274313189db59ef9d364b9bbb648846b67f1cc5a3f38912ca7730c680a22bd35c6e1c3c7b7'

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react"
+import React, { useContext } from "react"
 import classnames from "classnames"
 import { flexRender, Row, Cell } from "@tanstack/react-table"
 
@@ -32,21 +32,9 @@ export const RegularTableView = ({
     table,
     selectableRows,
     hasAnySubRows,
-    stickyLeftColumn
+    isPinnedLeft = false,
   } = 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 || [];
 
@@ -94,7 +82,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"
@@ -102,17 +90,9 @@ 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, RowModel } from "@tanstack/react-table"
+import { flexRender, Header, Table } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 
@@ -8,16 +8,9 @@ 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"
 
@@ -47,17 +40,11 @@ export const TableHeaderCell = ({
   table
 }: TableHeaderCellProps) => {
   const {
-    expanded,
-    setExpanded,
-    expandByDepth,
-    onExpandByDepthClick,
-    toggleExpansionIcon,
     sortControl,
     responsive,
     selectableRows,
     hasAnySubRows,
     showActionsBar,
-    stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
   } = useContext(AdvancedTableContext);
@@ -89,9 +76,7 @@ const cellClassName = classnames(
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
-   isLastHeaderCell ? "last-header-cell" : "",
-  stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
-
+   isLastHeaderCell ? "last-header-cell" : ""
 ); 
 
 const cellId = `${loading ? 
@@ -119,21 +104,6 @@ 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"
@@ -141,13 +111,6 @@ 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">
@@ -170,36 +133,9 @@ const isToggleExpansionEnabled =
               />
             )
           }
-          {isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
+          {isToggleExpansionEnabled && hasAnySubRows && (
               <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,9 +22,10 @@ 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, undefined);
+    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
     setExpanded(updatedRows);
   }, [expanded, setExpanded, onToggleExpansionClick, table]);
 

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

@@ -1,4 +1,4 @@
-import { RowModel, Row } from "@tanstack/react-table"
+import { RowModel } from "@tanstack/react-table"
 import { ExpandedStateObject } from "./types"
 import { GenericObject } from "../../types"
 
@@ -14,40 +14,30 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
 export const updateExpandAndCollapseState = (
   tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
-  targetParent?: string,
-  targetDepth?: number,
+  targetParent: string
 ) => {
   const updateExpandedRows: Record<string, boolean> = {};
-  const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
+  const rows = tableRows.rows;
 
-  const rowsToToggle: Row<GenericObject>[] = [];
+  let isExpansionConsistent = true;
+  const areRowsExpanded = new Set<boolean>();
 
   for (const row of rows) {
-    const shouldBeUpdated =
-      targetDepth !== undefined
-        ? row.depth <= targetDepth
-        : targetParent === undefined
-        ? row.depth === 0
-        : targetParent === row.parentId;
-
+    const shouldBeUpdated = targetParent === undefined ? row.depth === 0 : targetParent === row.parentId;
+    
     if (shouldBeUpdated) {
-      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;
+      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;
+        }
+      }
     }
   }