playbook_ui 14.19.0.pre.alpha.borderfixadvancedtable7816 → 14.19.0.pre.alpha.play1997dropdownenablepillsinselection7702

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ef1378b88aac8a24d63b1c024f6df3b4b42536def72fd15a2c45ec1d31c5c45f
-  data.tar.gz: b97b6bc05dd55054977f491d17a7359b68884e2cb19ee025e50e4f70327a6cc8
+  metadata.gz: 5e1acc819228475b290eaea87ff0b86b2b62cea0c8d53baa8527c2bab9714a3a
+  data.tar.gz: 6ae3b6b23aae3dd4f27fc2b4ffd1c575f6bdfe51710fe5814661e81a36d8d810
 SHA512:
-  metadata.gz: 86cf679b210ca9d9eed69f2cfed5b6bd8529f9621c34af5389dc7a05f1d05a5daad70e5345bfd71c4c2210ecf829396b681b6b86c613319a66abd5814b79aad5
-  data.tar.gz: 5f7be00d7226069d440d62e4cb65f21556598b22920578634039729b6106ee4bd766d2e815344bfc735dec54e4971901588d454bdffd7121ee64f4a40c27b727
+  metadata.gz: a60e87407b7cdc3186cc515e4a0e783343b7e7257278f8dc3fa711c91447a5c3711911371121e4c3075799c305dc2da709b18f87e10cb9d51825c528ad797dec
+  data.tar.gz: '05912e775970c5b43a34112f4338c7269863c251a10cac6078c1a263db1a11b4d8207e363ab6377f1ea598fb8528bcc23a7d6e73a72c5f930f0b7fc15a276278'

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

@@ -93,17 +93,7 @@ export const RegularTableView = ({
 
               {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
                 const isPinnedLeft = columnPinning.left.includes(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 isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
                 const { column } = cell;
                 return (
                   <td

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

@@ -1,112 +1,25 @@
-import React, { useEffect, useRef, useContext } from "react";
-
-import AdvancedTableContext from "../Context/AdvancedTableContext";
-import { buildVisibilityTree } from "../Utilities/VisibilityTree";
-
+import React, { useEffect, useRef } from "react";
 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 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";
+import { showActionBar, hideActionBar } from "../Utilities/ActionBarAnimationHelper";
 
 interface TableActionBarProps {
-  isVisible: boolean | GenericObject | undefined;
+  isVisible: boolean;
   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,
-  type = "row-selection",
+  actions
 }) => {
   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 && type === "row-selection") {
+    if (cardRef.current) {
       if (isVisible) {
         showActionBar(cardRef.current);
       } else {
@@ -118,68 +31,22 @@ 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={type === "row-selection" ? "between" : "end"}
+          justify="between"
       >
-        {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>
-        )}
+        <Caption
+            color="light"
+            paddingLeft="xs"
+            size="xs"
+        >
+          {selectedCount} Selected
+        </Caption>
+        <FlexItem>{actions}</FlexItem>
       </Flex>
     </Card>
   );

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

@@ -79,26 +79,9 @@ export const TableHeaderCell = ({
   header?.column.getLeafColumns().length === 1 &&
   header?.column.getLeafColumns()[0].id === header.column.id
 
-  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 isLastHeaderCell =
+    header?.column.parent?.columns.at(-1) === header?.column ||
+    (header?.colSpan > 1 && header?.column.parent !== undefined);
  
 const cellClassName = classnames(
   "table-header-cells",

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

@@ -26,8 +26,6 @@ interface UseTableStateProps {
   virtualizedRows?: boolean;
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
-  columnVisibilityControl?: GenericObject;
-
 }
 
 export function useTableState({
@@ -42,19 +40,16 @@ export function useTableState({
   pagination = false,
   paginationProps,
   virtualizedRows = false,
-  tableOptions,
-  columnVisibilityControl
+  tableOptions
 }: 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"
@@ -109,21 +104,17 @@ export function useTableState({
   }]), [columnDefinitions, sortControl]);
 
   // Custom state based on features enabled
-  const customState = useCallback(() => ({
-    state: {
-      expanded,
-      ...(sortControl     && { sorting }),
-      ...(selectableRows  && { rowSelection }),
-      ...(columnVisibility && { columnVisibility }),
-    },
-  }), [
-    expanded,
-    sortControl,
-    sorting,
-    selectableRows,
-    rowSelection,
-    columnVisibility,
-  ]);
+  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]);
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
@@ -154,7 +145,6 @@ 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/_advanced_table.scss

@@ -53,15 +53,6 @@
     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;
@@ -554,12 +545,14 @@
       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

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

@@ -35,7 +35,6 @@ 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"
@@ -74,7 +73,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     className,
     columnDefinitions,
     columnGroupBorderColor,
-    columnVisibilityControl,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -134,8 +132,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     virtualizedRows,
     tableOptions,
-    onRowSelectionChange,
-    columnVisibilityControl,
+    onRowSelectionChange
   });
 
   // Initialize table actions
@@ -255,7 +252,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     : {};
 
   // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   return (
     <>
@@ -289,7 +286,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         <AdvancedTableProvider
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
-            columnVisibilityControl={columnVisibilityControl}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -320,7 +316,6 @@ 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/advanced_table.html.erb

@@ -1,18 +1,10 @@
 <%= pb_content_tag do %>
-  <% if object.selectable_rows && object.show_actions_bar %>
-    <%= pb_rails("advanced_table/table_action_bar", props: {
-      actions: object.actions,
-      is_visible: false,
-      selected_count: 0
-    }) %>
-  <% end %>
-
-  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
-    <% if content.present? %>
-      <% content.presence %>
-    <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
-      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
-    <% end %>
-  <% end %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
+          <% if content.present? %>
+            <% content.presence %>
+          <% else %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+          <% end %>
+        <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -25,10 +25,6 @@ module Playbook
                         default: "auto"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
-      prop :show_actions_bar, type: Playbook::Props::Boolean,
-                              default: true
-      prop :actions, type: Playbook::Props::Array,
-                     default: []
 
       def classname
         additional_classes = [responsive_classname, max_height_classname]
@@ -51,11 +47,6 @@ module Playbook
       def selected_rows_length
         selected_rows.length
       end
-
-      def is_action_bar_visible
-        # Action bar visibility is controlled by JS based on selection
-        false
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -15,8 +15,6 @@ examples:
   - advanced_table_column_border_color_rails: Column Group Border Color
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
-  - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -49,7 +47,3 @@ examples:
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
   - advanced_table_fullscreen: Fullscreen
-  - advanced_table_column_visibility: Column Visibility Control
-  - advanced_table_column_visibility_with_state: Column Visibility Control With State
-  - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
-  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -27,8 +27,4 @@ export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
-export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
-export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
-export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
-export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
-export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
+export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'