playbook_ui 14.19.0 → 14.20.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 242dea3f908e8ab1063890e221e4a5a52ab48694d7cba5ce7d20223b05ebece5
-  data.tar.gz: 2b8a758c373ac4796e6f7bfaf5b1df93f0a0289272df3dd3dbd5c758c84380f9
+  metadata.gz: 8fa79ee278fc38b79bf8ba0d013868027d1b9b26029ccb1cf2f173b2a7797c83
+  data.tar.gz: 9e914077f1ad480c8f7ffa9bb65a6828a7b9a887d7b8b3e536bacfa5ab7c5a6e
 SHA512:
-  metadata.gz: f2aff5a100ae75592c9f06769d1773a5c053b9aaabf107b6861e36c7892d7a8239a7da9fbc82dfbaf1cc37dd58b1dd1ba580390d1e0dd21dcb6f496040ae3f33
-  data.tar.gz: f144555056550a5abc69c7a9efd94ab207530c7d3263e18da5263cb26382b34f07b55b30a68834617f8e7bf57e5c8e724457e7f77225dbc31aa5a8b625515bcb
+  metadata.gz: 4ef970a5758c8caf8a18b1d242eaf93c406318aaa676c2515200ed8e35fb8391de2acb7c2bc22f9350d6dd8555e26707fcdae48d0b779ee50372d35606364f86
+  data.tar.gz: 1b0da522bd01978c4087c086cc6ec8d0066296696a7c8ff82d26e74d6d126694c83f2b3fa7d39b2cafb97678a9f66a4a175864a8c534d273590a763c03b18171

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,25 +1,112 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useContext } 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 Dropdown from "../../pb_dropdown/_dropdown";
+import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer";
+import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger";
+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 {
+  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();
+
+    return (
+      <Checkbox
+          checked={show}
+          key={id}
+          onChange={() => col.toggleVisibility()}
+          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);
+
+    return (
+      <>
+        <Checkbox
+            checked={allOn}
+            indeterminate={!allOn && someOn}
+            onChange={() =>
+              leaves.forEach((id) =>
+                table.getColumn(id).toggleVisibility(!allOn),
+              )
+            }
+            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 {
@@ -31,22 +118,68 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
   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>
+          </>
+        ) : (
+          <Dropdown
+              className="column-visibility-dropdown-wrapper"
+              options={columnDefinitions}
+          >
+            <DropdownTrigger>
+            <Tooltip 
+                placement='top' 
+                text="Column Configuration" 
+                zIndex={10}
+            >
+                <Icon 
+                    color="primary" 
+                    cursor="pointer" 
+                    icon="sliders-h" 
+                />
+            </Tooltip>
+            </DropdownTrigger>
+            <DropdownContainer
+                className="column-visibility-dropdown"
+                paddingTop="sm"
+            >
+              <>
+              <Caption 
+                  paddingBottom="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>
+              ))}
+              </>
+            </DropdownContainer>
+          </Dropdown>
+        )}
       </Flex>
     </Card>
   );

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

@@ -79,9 +79,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",

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

@@ -53,6 +53,15 @@
     width: 100%;
   }
 
+  .column-visibility-dropdown-wrapper {
+    position: unset !important;
+  }
+  .column-visibility-dropdown {
+    width: unset !important;
+    right: $space_xxs;
+    text-align: left;
+  }
+
   // Virtualized table styles
   .virtualized-table-row {
     display: table !important;

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. 

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

@@ -0,0 +1,62 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnVisibilityCustom = (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"
+    },
+  ]
+
+  const columnVisibilityControl = {
+    // This is the list of column ids that will be included in the column visibility control
+    includeIds:["newEnrollments", "scheduledMeetings", "attendanceRate", "completedClasses"],
+  }
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          columnVisibilityControl={columnVisibilityControl}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnVisibilityCustom

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

@@ -0,0 +1 @@
+By using the `includeIds` key/value pair as shown within the `columnVisibilityControl` prop, you can control which columns show up as options in the columnVisibility dropdown.

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

@@ -0,0 +1,82 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnVisibilityMulti = (props) => {
+    const columnDefinitions = [
+        {
+          accessor: "year",
+          label: "Year",
+          id: "year",
+          cellAccessors: ["quarter", "month", "day"],
+        },
+        {
+          label: "Enrollment Data",
+          id: "enrollmentData",
+          columns: [
+            {
+              label: "Enrollment Stats",
+              id: "enrollmentStats",
+              columns: [
+                {
+                  accessor: "newEnrollments",
+                  label: "New Enrollments",
+                  id: "newEnrollments",
+                },
+                {
+                  accessor: "scheduledMeetings",
+                  label: "Scheduled Meetings",
+                  id: "scheduledMeetings",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "Performance Data",
+          id: "performanceData",
+          columns: [
+            {
+              label: "Completion Metrics",
+              id: "completionMetrics",
+              columns: [
+                {
+                  accessor: "completedClasses",
+                  label: "Completed Classes",
+                  id: "completedClasses",
+                },
+                {
+                  accessor: "classCompletionRate",
+                  label: "Class Completion Rate",
+                  id: "classCompletionRate",
+                },
+              ],
+            },
+            {
+              label: "Attendance",
+              id: "attendance",
+              columns: [
+                {
+                  accessor: "attendanceRate",
+                  label: "Attendance Rate",
+                  id: "attendanceRate",
+                },
+              ],
+            },
+          ],
+        },
+      ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          columnVisibilityControl={{default: true}}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnVisibilityMulti

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

@@ -0,0 +1 @@
+The `columnVisibilityControl` prop can also be used with multi-header columns as shown.