playbook_ui 14.17.0.pre.alpha.PLAY20547307 → 14.17.0.pre.alpha.aticonclosefix7325

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 06c3be1f56543c7c3eaaa61b499fcd468b2d949490d1e63a9633466889d2a82f
-  data.tar.gz: 40597dc6319352c9362e3f165228a93daa9adbe5853f3145581d038eb58a09b7
+  metadata.gz: '08949d72294c6b2c2fc44dc8d3716404b5940e7eb25db3e0b6b29e2b8f258395'
+  data.tar.gz: eabbfae2140786b0b6770e6896c093dcc9d3fba74ba798f193217e5add140780
 SHA512:
-  metadata.gz: f013f65db3bc6a708f1009b8103d8da9f1dd0bd762b18a5c48dc8745160955249ea53ea784496257401ee0820499a441514f758d5ae6709aa928de5b1dee4a73
-  data.tar.gz: bf8c87674cbf08d0b905a6c2b769c373c1d63c23a968010950ca1d35449cbe91c7e06a282f909244c9abcba56b2186812c38a9083ed0dca60446f354bde86dcb
+  metadata.gz: c68f79659149544dd46a41dd889584f860d4878190c16f91d1ff90313bfbcc7ba5d62654526e8d4d81dc76cf31a44eb791a21c52cae086d57d7ddde3145ba667
+  data.tar.gz: d440f257a2800fba3b4649d6576329faf84d4ee15c36d0dc15576303888abe001d0d2a776ef11ce0c94a3ee703c5f4c44237265beab3822e2d0767efa069b63f

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,10 +40,6 @@ export const TableHeaderCell = ({
   table
 }: TableHeaderCellProps) => {
   const {
-    expanded,
-    setExpanded,
-    expandByDepth,
-    toggleExpansionIcon,
     sortControl,
     responsive,
     selectableRows,
@@ -118,17 +107,6 @@ const isToggleExpansionEnabled =
     justifyHeader = isLeafColumn ? "end" : "center";
   }
   
-  const handleExpandDepth = (depth: number) => {
-    const updated = updateExpandAndCollapseState(
-      table.getRowModel(),
-      expanded,
-      undefined,
-      depth
-    )
-    setExpanded(updated)
-  }
-  
-
   return (
     <th
         align="right"
@@ -165,34 +143,9 @@ const isToggleExpansionEnabled =
               />
             )
           }
-          {isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
+          {isToggleExpansionEnabled && hasAnySubRows && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
-          {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
-              <Dropdown 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;
+        }
+      }
     }
   }
 

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

@@ -130,9 +130,6 @@
         box-sizing: border-box !important;
       }
     }
-    .expand-by-depth-dropdown {
-      min-width: 150px;
-    }
   }
 
   .pb_advanced_table_body {

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

@@ -38,7 +38,6 @@ type AdvancedTableProps = {
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
   expandedControl?: GenericObject
-  expandByDepth?: { [key: string]: string | number }
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   initialLoadingRowsCount?: number
@@ -74,7 +73,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
-    expandByDepth,
     htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
@@ -282,7 +280,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
-            expandByDepth={expandByDepth}
             expanded={expanded}
             expandedControl={expandedControl}
             handleExpandOrCollapse={handleExpandOrCollapse}

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

@@ -22,7 +22,6 @@ examples:
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
   - advanced_table_expanded_control: Expanded Control
-  - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options

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

@@ -25,5 +25,4 @@ export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_
 export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 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 AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'

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

@@ -31,6 +31,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.toggleElement(this.target);
       }
     });
+    
+    this.hideCloseIcon()
 
     const nestedButtons = this.element
       .closest("table")
@@ -49,6 +51,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     });
   }
 
+  hideCloseIcon() {
+    const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
+    closeIcon.style.display = "none";
+}
+
   showElement(elements) {
     elements.forEach((elem) => {
       elem.style.display = "table-row";

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -30,7 +30,7 @@
                                     class="gray-icon expand-toggle-icon"
                                     data-advanced-table="true">
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>
                             <% end %>
                         <% end %>

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -35,7 +35,7 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
-    separators?: boolean;
+    separators: boolean;
     triggerRef?: any;
     variant?: "default" | "subtle";
 };

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -22,7 +22,7 @@ type DropdownOptionProps = {
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
-  key?: string | number;
+  key?: string;
   option?: GenericObject;
   padding?: string;
 }  & GlobalProps;

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -84,8 +84,8 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftColumn,
-            'sticky-right-column': stickyRightColumn,
+            'sticky-left-column': stickyLeftColumn.length,
+            'sticky-right-column': stickyRightColumn.length,
             'striped': striped,
             'header-borderless': headerStyle === 'borderless',
             'header-floating': headerStyle === 'floating',