playbook_ui 14.19.0 → 14.20.0.pre.alpha.revert4453PBNTR933reactdraggablebugdragbtwnexamples7854

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 242dea3f908e8ab1063890e221e4a5a52ab48694d7cba5ce7d20223b05ebece5
-  data.tar.gz: 2b8a758c373ac4796e6f7bfaf5b1df93f0a0289272df3dd3dbd5c758c84380f9
+  metadata.gz: d810ce992ce83180c727b57ffd2015356b7860a523383f4a8810b4b964c6ea1e
+  data.tar.gz: 7674cda91f367bc7ad377806520109d2ffd1cd9076e51c34fb5f1e3baf37120c
 SHA512:
-  metadata.gz: f2aff5a100ae75592c9f06769d1773a5c053b9aaabf107b6861e36c7892d7a8239a7da9fbc82dfbaf1cc37dd58b1dd1ba580390d1e0dd21dcb6f496040ae3f33
-  data.tar.gz: f144555056550a5abc69c7a9efd94ab207530c7d3263e18da5263cb26382b34f07b55b30a68834617f8e7bf57e5c8e724457e7f77225dbc31aa5a8b625515bcb
+  metadata.gz: f5d3b8da029137dbf003df505ec900c151d0986db08089339e685d89a7a38ba4b830bf745ea5701aa439bdd2df0f9febcd5728caf65a642be9f1e58579fca37e
+  data.tar.gz: 8304eed6d900e0a9f052b7dec2066c713606a906b7f749bd47b36553dfb0ac2df3e8ecf4f76ca1c15d80a88398dfa0b5efc954d7ca0ca109d94eb8aa5292c01f

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

@@ -93,7 +93,17 @@ 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 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

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

@@ -1,52 +1,211 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useContext, useState } from "react";
+
+import AdvancedTableContext from "../Context/AdvancedTableContext";
+import { buildVisibilityTree } from "../Utilities/VisibilityTree";
+
 import Card from "../../pb_card/_card";
 import Caption from "../../pb_caption/_caption";
 import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
-import { showActionBar, hideActionBar } from "../Utilities/ActionBarAnimationHelper";
+import Icon from "../../pb_icon/_icon";
+import Checkbox from "../../pb_checkbox/_checkbox";
+import SectionSeparator from "../../pb_section_separator/_section_separator";
+import Tooltip from "../../pb_tooltip/_tooltip";
+import PbReactPopover from "../../pb_popover/_popover";
+
+import {
+  showActionBar,
+  hideActionBar,
+} from "../Utilities/ActionBarAnimationHelper";
+import { GenericObject } from "../../types";
 
 interface TableActionBarProps {
-  isVisible: boolean;
+  isVisible: boolean | GenericObject | undefined;
   selectedCount: number;
   actions?: React.ReactNode[] | React.ReactNode;
+  type?: string;
+}
+
+interface VisibilityNode {
+  id?: string | undefined;
+  label?: string | undefined;
+  children?: VisibilityNode[];
 }
 
 const TableActionBar: React.FC<TableActionBarProps> = ({
   isVisible,
   selectedCount,
-  actions
+  actions,
+  type = "row-selection",
 }) => {
   const cardRef = useRef(null);
+  const { table, columnVisibilityControl, columnDefinitions } =
+    useContext(AdvancedTableContext);
+
+  // ----------- Column visibility logic -----------
+  const includeIds = columnVisibilityControl?.includeIds;
+  const firstLeafId = table.getAllLeafColumns()[0]?.id;
+  // Get the first leaf column ID to exclude it from the visibility tree
+  // This is to avoid showing the first column in the dropdown
+  // as toggling it's visibility breaks the expanded row functionality
+  const tree = buildVisibilityTree(columnDefinitions, includeIds).filter(node => node.id !== firstLeafId);
+
+  const renderLeaf = (id: string, label: string) => {
+    const col   = table.getColumn(id);
+    const show  = col.getIsVisible();
+
+    const handleVisibilityChange = () => {
+      col.toggleVisibility();
+      if (columnVisibilityControl?.onColumnVisibilityChange) {
+        const updatedVisibilityState = {
+          ...table.getAllColumns().reduce((acc: { [x: string]: any; }, col: { id: string | number; getIsVisible: () => any; }) => {
+            acc[col.id] = col.getIsVisible();
+            return acc;
+          }, {}),
+        };
+        columnVisibilityControl?.onColumnVisibilityChange(updatedVisibilityState);
+      }
+    };
+
+    return (
+      <Checkbox
+          checked={show}
+          key={id}
+          onChange={handleVisibilityChange}
+          paddingBottom="xs"
+          text={label}
+      />
+    );
+  };
+
+  const gatherLeafIds = (node: VisibilityNode): string[] =>
+    node.children && node.children.length
+      ? node.children.flatMap(gatherLeafIds)
+      : node.id
+      ? [node.id]
+      : [];
+
+  const renderGroup = (node: VisibilityNode ) => {
+     const leaves = gatherLeafIds(node);
+    const visibleArray   = leaves.map((id) => table.getColumn(id).getIsVisible());
+    const allOn    = visibleArray.every(Boolean);
+    const someOn   = visibleArray.some(Boolean);
+
+       const handleGroupVisibilityChange = () => {
+      leaves.forEach((id) => table.getColumn(id).toggleVisibility(!allOn));
+      if (columnVisibilityControl?.onColumnVisibilityChange) {
+        const updatedVisibilityState = {
+          ...table.getAllColumns().reduce((acc: { [x: string]: any; }, col: { id: string | number; getIsVisible: () => any; }) => {
+            acc[col.id] = col.getIsVisible();
+            return acc;
+          }, {}),
+        };
+        columnVisibilityControl?.onColumnVisibilityChange(updatedVisibilityState);
+      }
+    };
+    return (
+      <>
+        <Checkbox
+            checked={allOn}
+            indeterminate={!allOn && someOn}
+            onChange={handleGroupVisibilityChange}
+            paddingBottom="xs"
+            text={node.label}
+        />
+        <Flex flexDirection="column" 
+            paddingLeft="lg"
+        >
+          {node?.children?.map((child) =>
+            child.children ? renderGroup(child) : renderLeaf(child.id, child.label),
+          )}
+        </Flex>
+      </>
+    );
+  };
+// ------------ End of column visibility logic --------
 
   useEffect(() => {
-    if (cardRef.current) {
+    if (cardRef.current && type === "row-selection") {
       if (isVisible) {
         showActionBar(cardRef.current);
       } else {
         hideActionBar(cardRef.current);
       }
     }
-  }, [isVisible]);
+  }, [isVisible, type]);
+
+  const [showPopover, setShowPopover] = useState(false)
+
+  const togglePopover = () => setShowPopover((prev) => !prev)
+  const handleShouldClose = (shouldClose: boolean) =>
+    setShowPopover(!shouldClose)
+
+  const popoverReference = (
+    <Tooltip 
+        placement="top" 
+        text="Column Configuration"
+    >
+      <div onClick={togglePopover}>
+      <Icon
+          color="primary"
+          cursor="pointer"
+          icon="sliders-h"
+      />
+      </div>
+    </Tooltip>
+  )
 
   return (
     <Card
         borderNone={!isVisible}
-        className={`${isVisible && "show-action-card row-selection-actions-card"}`}
+        className={`${
+          isVisible && "show-action-card row-selection-actions-card"
+        }`}
         htmlOptions={{ ref: cardRef as any }}
         padding={`${isVisible ? "xs" : "none"}`}
     >
       <Flex
           alignItems="center"
-          justify="between"
+          justify={type === "row-selection" ? "between" : "end"}
       >
-        <Caption
-            color="light"
-            paddingLeft="xs"
-            size="xs"
-        >
-          {selectedCount} Selected
-        </Caption>
-        <FlexItem>{actions}</FlexItem>
+        {type === "row-selection" ? (
+          <>
+            <Caption color="light" 
+                paddingLeft="xs" 
+                size="xs"
+            >
+              {selectedCount} Selected
+            </Caption>
+            <FlexItem>{actions}</FlexItem>
+          </>
+        ) : (
+          <PbReactPopover
+              closeOnClick="outside"
+              placement="bottom-end"
+              reference={popoverReference}
+              shouldClosePopover={handleShouldClose}
+              show={showPopover}
+              zIndex={3}
+          >
+            <>
+              <Caption 
+                  paddingY="sm" 
+                  text="Columns Config"
+                  textAlign="center" 
+              />
+              <SectionSeparator paddingBottom="xs" />
+              {tree.map((node: VisibilityNode) => (
+                <Flex cursor="pointer" 
+                    flexDirection="column" 
+                    key={node.id}
+                    paddingX="xs"
+                >
+                  {node.children ? renderGroup(node) : renderLeaf(node.id, node.label)}
+                </Flex>
+              ))}
+              </>
+          </PbReactPopover>
+        )}
       </Flex>
     </Card>
   );

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext, useState } from "react"
 import classnames from "classnames"
 import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
 
@@ -8,10 +8,8 @@ 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 SectionSeparator from "../../pb_section_separator/_section_separator"
+import PbReactPopover from "../../pb_popover/_popover";
 import Icon from "../../pb_icon/_icon"
 
 import { SortIconButton } from "./SortIconButton"
@@ -79,9 +77,26 @@ export const TableHeaderCell = ({
   header?.column.getLeafColumns().length === 1 &&
   header?.column.getLeafColumns()[0].id === header.column.id
 
-  const isLastHeaderCell =
-    header?.column.parent?.columns.at(-1) === header?.column ||
-    (header?.colSpan > 1 && header?.column.parent !== undefined);
+  const columnHasVisibleLeaf = (col: any): boolean =>
+    col.getIsVisible?.() ||
+    (Array.isArray(col.columns) &&
+      col.columns.some((child: any) => columnHasVisibleLeaf(child)));
+      
+   // Check on column position in stack + visibility to add the vertical border 
+  const isLastHeaderCell = (() => {
+    if (!header) return false;
+  
+    if (header.colSpan > 1 && header.column.parent !== undefined) return true;
+  
+    const parent = header.column.parent;
+  
+    if (!parent) {
+      const topHeaders = table?.getHeaderGroups()[0].headers.filter((h: any) => columnHasVisibleLeaf(h.column));
+      return topHeaders?.at(-1)?.id === header.id;
+    }
+    const visibleSiblings = parent.columns.filter(columnHasVisibleLeaf);
+    return visibleSiblings.at(-1) === header.column;
+  })();
  
 const cellClassName = classnames(
   "table-header-cells",
@@ -119,6 +134,20 @@ const isToggleExpansionEnabled =
     justifyHeader = isLeafColumn ? "end" : "center";
   }
   
+  const [showPopover, setShowPopover] = useState(false)
+
+  const togglePopover = () => setShowPopover((prev) => !prev)
+  const handleShouldClose = (shouldClose: boolean) =>
+    setShowPopover(!shouldClose)
+
+  const popoverReference = (
+      <div className="gray-icon toggle-all-icon" 
+          onClick={togglePopover}
+      >
+          <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
+      </div>
+  )
+
   const handleExpandDepth = (depth: number) => {
     if (onExpandByDepthClick) {
       const flatRows = table?.getRowModel().flatRows
@@ -174,31 +203,33 @@ const isToggleExpansionEnabled =
               <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"
+
+                    <PbReactPopover
+                        closeOnClick="any"
+                        placement="bottom-start"
+                        reference={popoverReference}
+                        shouldClosePopover={handleShouldClose}
+                        show={showPopover}
+                        zIndex={3}
                     > 
+                    {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
+                      <>
                       <Flex
                           alignItems="center"
+                          className="pb-advanced-table-popover-option"
+                          cursor="pointer"
                           htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
                           paddingX="sm"
                           paddingY="xs"
                           >
                             {option.label}
-                          </Flex>
-                    </DropdownOption>
-                  ))}
-                </DropdownContainer>
-              </Dropdown>
+                      </Flex>
+                      {index !== expandByDepth.length - 1 && <SectionSeparator/>}
+                      </>
+                        ))}
+                    </PbReactPopover>
+                 
+
             )}
 
           {isToggleExpansionEnabledLoading &&(

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

@@ -26,6 +26,8 @@ interface UseTableStateProps {
   virtualizedRows?: boolean;
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
+  columnVisibilityControl?: GenericObject;
+
 }
 
 export function useTableState({
@@ -40,16 +42,19 @@ export function useTableState({
   pagination = false,
   paginationProps,
   virtualizedRows = false,
-  tableOptions
+  tableOptions,
+  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({});
   // 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;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -104,17 +109,21 @@ export function useTableState({
   }]), [columnDefinitions, sortControl]);
 
   // Custom state based on features enabled
-  const customState = useCallback(() => {
-    if (sortControl && selectableRows) {
-      return { state: { expanded, sorting, rowSelection } };
-    } else if (sortControl) {
-      return { state: { expanded, sorting } };
-    } else if (selectableRows) {
-      return { state: { expanded, rowSelection } };
-    } else {
-      return { state: { expanded } };
-    }
-  }, [expanded, rowSelection, sortControl, selectableRows, sorting]);
+  const customState = useCallback(() => ({
+    state: {
+      expanded,
+      ...(sortControl     && { sorting }),
+      ...(selectableRows  && { rowSelection }),
+      ...(columnVisibility && { columnVisibility }),
+    },
+  }), [
+    expanded,
+    sortControl,
+    sorting,
+    selectableRows,
+    rowSelection,
+    columnVisibility,
+  ]);
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
@@ -145,6 +154,7 @@ export function useTableState({
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
     getRowId: selectableRows ? row => row.id : undefined,
+    onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions
     },

data/app/pb_kits/playbook/pb_advanced_table/Utilities/VisibilityTree.ts

@@ -0,0 +1,47 @@
+export interface VisibilityNode {
+  id: string;
+  label: string;
+  children?: VisibilityNode[];
+}
+export const buildVisibilityTree = (
+  defs: any[],
+  allowed?: string[] | null
+): VisibilityNode[] =>
+  defs
+    .map((def) => {
+      const isGroup = Array.isArray(def.columns) && def.columns.length > 0;
+
+      // No filter at all → keep it
+      if (!allowed?.length) {
+        return isGroup
+          ? {
+              id: def.id,
+              label: def.label,
+              children: buildVisibilityTree(def.columns, allowed),
+            }
+          : { id: def.id, label: def.label };
+      }
+
+      // 1️⃣ If *this* ID is explicitly allowed → keep it & all its children
+      if (allowed.includes(def.id)) {
+        return isGroup
+          ? {
+              id: def.id,
+              label: def.label,
+              children: buildVisibilityTree(def.columns, null),
+            }
+          : { id: def.id, label: def.label };
+      }
+
+      // Otherwise, if it’s a group, recurse & keep only if kids survive
+      if (isGroup) {
+        const kids = buildVisibilityTree(def.columns, allowed).filter(Boolean);
+        return kids.length
+          ? { id: def.id, label: def.label, children: kids }
+          : null;
+      }
+
+      // Leaf not allowed → drop it
+      return null;
+    })
+    .filter(Boolean);

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

@@ -150,13 +150,6 @@
         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 {
@@ -545,14 +538,12 @@
       background-color: $white;
       box-shadow: $shadow_deep;
     }
+
     @include advanced-table-sticky-mixin(
       $border_light,
       $white,
       lighten($silver, $opacity_7)
     );
-
-    // Apply border colors for sticky columns
-    @include apply-sticky-colors("light");
   }
 
   // Responsive Styles
@@ -818,3 +809,8 @@
     }
   }
 }
+
+// Outside of the pb_advanced_table class for popover
+.pb-advanced-table-popover-option:hover {
+  background-color: $bg_light;
+}

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

@@ -35,6 +35,7 @@ type AdvancedTableProps = {
   className?: string
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
+  columnVisibilityControl?: GenericObject
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -73,6 +74,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     className,
     columnDefinitions,
     columnGroupBorderColor,
+    columnVisibilityControl,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -132,7 +134,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     virtualizedRows,
     tableOptions,
-    onRowSelectionChange
+    onRowSelectionChange,
+    columnVisibilityControl,
   });
 
   // Initialize table actions
@@ -252,7 +255,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     : {};
 
   // Visibility flag for action bar
-  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
 
   return (
     <>
@@ -286,6 +289,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         <AdvancedTableProvider
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
+            columnVisibilityControl={columnVisibilityControl}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -316,6 +320,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 actions={actions}
                 isVisible={isActionBarVisible}
                 selectedCount={selectedRowsLength}
+                type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
             {/* Main Table */}

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx

@@ -0,0 +1,57 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnVisibility = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      id: "year"
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      id: "newEnrollments"
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      id: "scheduledMeetings"
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      id: "attendanceRate"
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+      id: "completedClasses"
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+      id: "classCompletionRate"
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+      id: "graduatedStudents"
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          columnVisibilityControl={{default: true}}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnVisibility

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md

@@ -0,0 +1,4 @@
+The `columnVisibilityControl` prop allows users to toggle the visibility of table columns dynamically.
+
+The default can be enabled simply by passing `{ default:true }` to the prop as shown. This will render the header with the icon enabled dropdown. The dropdown contains all columns present in the Table and any can be toggled on or off via the checkboxes. 
+**NOTE**: The first column will not be shown in the dropdown as an option since all the expansion logic/functionality lives there and it should always be visible.