playbook_ui 14.18.0 → 14.19.0.pre.alpha.PLAY1973formpillinternalsizing7728

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 94ec449a03aebe3006ca1edc972e4632eb4ce67276e4e2a575dd54e4a26d87be
-  data.tar.gz: 6843d0fe6728e70935869341db3aa00e22eaa987e935ff80c502629f841fee9b
+  metadata.gz: eb03eeb6d4f6845e9a28ad2d458559cb1f0efc49c982e66a49e9c94dde91a5d3
+  data.tar.gz: 5c8d3da2bcce5b6ee616e1ce946ed8c2cb38357c18d99fdb373a9f1d2dd84d1f
 SHA512:
-  metadata.gz: c4f7a5ceff1a63c95bfea4df95fcc16a633fd926d6a521cf812062292da2cc73ddaf8b3e010311bcedd20b962a7558855c44895d236ab5db3b0015cda458fb1c
-  data.tar.gz: ed2800f912e35e9e0c2e457613ad19d58e9801b9fc8ce8a322c38d0d0609b28138eaeb9dcce449e441ceb93983697c628b49790eccc930c9264e4e9c11fbc505
+  metadata.gz: 9d9c9d3367dc7b29172ae603ede775506ce76e2285547e769be6348e4e59185ba316e78ffccc1377a5baf79a73b1c4212596098498683c370a9405aaa89afffc
+  data.tar.gz: 70a2d58d2832f1a98f0652b980b9b3bc396eada7fd1cee732e848096c17db18cae3637bf6f218c927c839c543cad4c8a13b9f6aa63febd0669ab8543c19becc8

data/app/pb_kits/playbook/_playbook.scss

@@ -40,7 +40,6 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
-@import 'pb_gantt_chart/gantt_chart';
 @import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';

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