playbook_ui 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2173 → 13.18.0.pre.alpha.PLAY12062177

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c50bdb2d776257482837525dcef9ac706994226966a7acc3041b81f5f9cf89e6
-  data.tar.gz: c467ed886607d31ee16abca2bdec30da5880ad8ff58798d74232f7852d6165db
+  metadata.gz: a740b3ef475875baabe4286f70025efcc3bf6a921b6232814b4abc5a3b952cf8
+  data.tar.gz: eab607b01ab71bdf312d0ccd9b92ff9a54ddf688657e58ada68c545046532a7b
 SHA512:
-  metadata.gz: cd6efe9805a59dfd26fa143d566f107e6ab5f0435920a6ca5d7985aee7b2859b297734c319a13b1f76ba04732ca8292a24b40811b742bbd9703ae662f48217b4
-  data.tar.gz: c60068a9dcb1beebd857868a1fcbf795f9d59697ebce2de88da31fe9a7d50c7e22fd17563417676d0a806ab9e30417223095b9012a8d42e1a594673450e2c41f
+  metadata.gz: afeee437dc320d7042b28d061c94a4821037b0af4862aa7ba56ebcaa474c0bba3c2ac52df0cbe96d47d6a6b90bdb7b346aab99653ed46ec226064998670f812b
+  data.tar.gz: bf328b19bef5e5725cbaae856699127d715a75f74ae151eef2c68b135c3d56b92ac79ab89cfe3ca4b4745660b7528c7cfd0dfb53c774d3275986440b6ebc75fd

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

@@ -22,14 +22,13 @@ export const CustomCell = ({
   row,
   value,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded } = useContext(AdvancedTableContext);
+  const RowWithoutChildren = row.originalSubRows === undefined;
 
   const handleOnExpand = (row: Row<DataType>) => {
     onRowToggleClick && onRowToggleClick(row);
     setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
   };
-  const RowHasChildren = row.original.children ? true : false
-  const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
@@ -37,7 +36,7 @@ export const CustomCell = ({
           columnGap="xs"
           orientation="row"
       >
-        {renderButton ? (
+        {!RowWithoutChildren ? (
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
@@ -54,7 +53,7 @@ export const CustomCell = ({
             )}
           </button>
         ) : null}
-        <FlexItem paddingLeft={renderButton? "none" : "xs"}>
+        <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
           {row.depth === 0 ? getValue() : value}
         </FlexItem>
       </Flex>

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

@@ -1,9 +1,8 @@
-import React, { useContext } from "react"
+import React from "react"
 import Flex from "../../pb_flex/_flex"
 import Caption from "../../pb_caption/_caption"
 import { Row, Table } from "@tanstack/react-table"
 
-import AdvancedTableContext from "../Context/AdvancedTableContext";
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
 
@@ -13,7 +12,7 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 interface SubRowHeaderRowProps {
   collapsibleTrail?: boolean
-  enableToggleExpansion?: "all" | "header" | "none"
+  enableToggleExpansion?: "all" | "header"
   onClick: (row: Row<DataType>) => void
   row: Row<DataType>
   subRowHeaders?: string[]
@@ -28,11 +27,7 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
-  const { inlineRowLoading } = useContext(AdvancedTableContext);
-
   const numberOfColumns = table.getAllFlatColumns().length
-  const rowHasChildren = row.original.children ? true : false
-  const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
 
   return (
     <tr className="custom-row bg-silver">
@@ -47,13 +42,13 @@ export const SubRowHeaderRow = ({
           <Flex align="center" 
               columnGap="xs"
           >
-            {enableToggleExpansion === "all" && canExpand ? (
+            {enableToggleExpansion === "all" && row.getCanExpand() ? (
               <ToggleIconButton onClick={onClick} 
                   row={row}
               />
             ) : null}
             <Caption
-                marginLeft={canExpand ? "none" : "xs"}
+                marginLeft={row.getCanExpand() ? "none" : "xs"}
                 text={subRowHeaders[row.depth - 1]}
             />
           </Flex>

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

@@ -12,10 +12,11 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 type TableHeaderCellProps = {
   enableSorting?: boolean
-  enableToggleExpansion?: "all" | "header" | "none"
+  enableToggleExpansion?: "all" | "header"
   handleExpandOrCollapse?: () => void
   header?: Header<DataType, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
+  headerId?: string
   loading?: boolean
   sortIcon?: string | string[]
 } & GlobalProps
@@ -26,6 +27,7 @@ export const TableHeaderCell = ({
   handleExpandOrCollapse,
   header,
   headerChildren,
+  headerId,
   loading,
   sortIcon,
 }: TableHeaderCellProps) => {
@@ -48,22 +50,10 @@ const cellClassName = classnames("table-header-cells",
 );
 
 const cellId = `${loading ? 
-    `loading-${header.id}`
-    : `${header.id}`
+    `loading-${header.id}${headerId ? `-${headerId}` : ""}`
+    : `${header.id}${headerId ? `-${headerId}` : ""}`
 }`;
 
-const isToggleExpansionEnabledLoading =
-  header.index === 0 &&
-  loading &&
-  (enableToggleExpansion === "all" || "header") &&
-  enableToggleExpansion !== "none";
-  
-const isToggleExpansionEnabled =
-  header.index === 0 &&
-  !loading &&
-  (enableToggleExpansion === "all" || "header") &&
-  enableToggleExpansion !== "none";
-
   return (
     <th
         align="right"
@@ -83,11 +73,15 @@ const isToggleExpansionEnabled =
             alignItems="center"
             justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
         >
-          {isToggleExpansionEnabled && (
+          {header.index === 0 &&
+            !loading &&
+            (enableToggleExpansion === "all" || "header") && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
 
-          {isToggleExpansionEnabledLoading &&(
+          {header.index === 0 &&
+            loading &&
+            (enableToggleExpansion === "all" || "header") && (
               <div className="loading-toggle-icon header-toggle-icon" />
             )}
 

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -1,7 +1,4 @@
 import React, { useContext } from "react"
-import classnames from "classnames";
-import { buildCss } from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import { flexRender, Row } from "@tanstack/react-table"
 
@@ -13,46 +10,28 @@ import { isChrome } from "../Utilities/BrowserCheck"
 import { DataType } from "../Utilities/types"
 
 type TableBodyProps = {
-  className?: string;
   collapsibleTrail?: boolean
-  id?: string;
   subRowHeaders?: string[]
 }
 
 export const TableBody = ({
-  className,
   collapsibleTrail = true,
-  id,
   subRowHeaders,
-  ...props
 }: TableBodyProps) => {
-
   const {
-    columnDefinitions,
     enableToggleExpansion,
     handleExpandOrCollapse,
-    inlineRowLoading,
     loading,
     table,
   } = useContext(AdvancedTableContext)
-
-  const classes = classnames(
-    buildCss("pb_advanced_table_body"),
-    globalProps(props),
-    className
-  );
-
   return (
     <>
-      <tbody className={classes} 
-          id={id}
-      >
+      <tbody>
         {table.getRowModel().rows.map((row: Row<DataType>) => {
           const isExpandable = row.getIsExpanded()
           const isFirstChildofSubrow = row.depth > 0 && row.index === 0
-          const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
+          const rowHasNoChildren = !row.original.children?.length
           const numberOfColumns = table.getAllFlatColumns().length
-          const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
 
           return (
             <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -100,11 +79,9 @@ export const TableBody = ({
               </tr>
 
               {/* Display LoadingInline if Row Data is querying and there are no children already */}
-              {isDataLoading ? (
+              {isExpandable && rowHasNoChildren && row.depth === 0 ? (
                 <tr key={`${row.id}-row`}>
-                  <td colSpan={numberOfColumns}
-                      style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
-                  >
+                  <td colSpan={numberOfColumns}>
                     <LoadingInline />
                   </td>
                 </tr>

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -1,7 +1,4 @@
 import React, { useContext } from "react"
-import classnames from "classnames";
-import { buildCss } from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
 import { HeaderGroup } from "@tanstack/react-table"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 import { TableHeaderCell } from "../Components/TableHeaderCell"
@@ -9,19 +6,16 @@ import { DataType } from "../Utilities/types"
 
 type TableHeaderProps = {
   children?: React.ReactNode | React.ReactNode[]
-  className?: string
   enableSorting?: boolean
-  id?: string;
+  headerId?: string
   sortIcon?: string | string[]
 }
 
 export const TableHeader = ({
   children,
-  className,
   enableSorting = false,
-  id,
+  headerId,
   sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
-  ...props
 }: TableHeaderProps) => {
   const {
     enableToggleExpansion,
@@ -30,18 +24,9 @@ export const TableHeader = ({
     table,
   } = useContext(AdvancedTableContext)
 
-  const classes = classnames(
-    buildCss("pb_advanced_table_header"),
-    globalProps(props),
-    className
-  );
-
-
   return (
     <>
-      <thead className={classes}
-          id={id}
-      >
+      <thead>
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
@@ -52,6 +37,7 @@ export const TableHeader = ({
                   handleExpandOrCollapse={handleExpandOrCollapse}
                   header={header}
                   headerChildren={children}
+                  headerId={headerId}
                   key={`${header.id}-header`}
                   loading={loading}
                   sortIcon={sortIcon}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx

@@ -24,9 +24,10 @@ export const updateExpandAndCollapseState = (
   // Update isExpansionConsistent variable
   for (const row of rows) {
     if (
-      targetParent === undefined
+      row.getCanExpand() &&
+      (targetParent === undefined
         ? row.depth === 0
-        : targetParent === row.parentId
+        : targetParent === row.parentId)
     ) {
       areRowsExpanded.add(row.getIsExpanded())
       if (areRowsExpanded.size > 1) {
@@ -47,7 +48,7 @@ export const updateExpandAndCollapseState = (
     })
   } else {
     for (const row of rows) {
-      if (targetParent === row.parentId) {
+      if (row.getCanExpand() && targetParent === row.parentId) {
         updateExpandedRows[row.id] = !isExpansionConsistent
           ? true
           : !row.getIsExpanded()

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import Table from "../pb_table/_table";
 import {
@@ -28,12 +28,10 @@ type AdvancedTableProps = {
   className?: string;
   columnDefinitions: DataType[];
   data?: { [key: string]: string };
-  enableToggleExpansion?: "all" | "header" | "none";
+  enableToggleExpansion?: "all" | "header";
   expandedControl?: DataType;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   initialLoadingRowsCount?: number;
-  inlineRowLoading?: boolean;
   loading?: boolean | string;
   onRowToggleClick?: (arg: Row<DataType>) => void;
   onToggleExpansionClick?: (arg: Row<DataType>) => void;
@@ -53,10 +51,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
-    htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
-    inlineRowLoading = false,
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
@@ -108,9 +104,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
           const accessorValue = rowData[depthAccessor];
           return accessorValue ? (
-            <CustomCell
-                onRowToggleClick={onRowToggleClick}
-                row={row} 
+            <CustomCell row={row} 
                 value={accessorValue} 
             />
           ) : (
@@ -201,7 +195,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_advanced_table"),
     globalProps(props),
@@ -211,22 +204,19 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
-        {...htmlProps}
         className={classes} 
         id={id}
     >
       <AdvancedTableContext.Provider
           value={{
-            columnDefinitions,
-            enableToggleExpansion,
-            expanded,
+            table,
             handleExpandOrCollapse,
-            inlineRowLoading,
             loading,
+            enableToggleExpansion,
+            toggleExpansionIcon,
             setExpanded,
+            expanded,
             sortControl,
-            table,
-            toggleExpansionIcon,
           }}
       >
         <Table

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -343,39 +343,3 @@ test("sort button exists and sorts column data", () => {
   const row2 = kit.getElementsByTagName('tr')[2]
   expect(row2.id).toBe("0-0-0-row")
 }); 
-
-test("Generates Table.Header default + custom classname", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header className="custom-header" />
-      <AdvancedTable.Body />
-
-    </AdvancedTable>
-  );
-
-  const kit = screen.getByTestId(testId);
-  const tableHeader = kit.querySelector('thead')
-  expect(tableHeader).toHaveClass('pb_advanced_table_header custom-header')
-});
-
-test("Generates Table.Body default + custom classname", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header />
-      <AdvancedTable.Body className="custom-body-classname"/>
-
-    </AdvancedTable>
-  );
-
-  const kit = screen.getByTestId(testId);
-  const tableHeader = kit.querySelector('tbody')
-  expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
-});

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx

@@ -3,13 +3,14 @@ import React, { ReactNode, useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
 
-type FiltersPopoverProps = { 
+type FiltersPopoverProps = {
   children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode), 
   dark?: boolean,
+  maxHeight?: string,
   minWidth?: string,
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
 }
-const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
+const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -26,6 +27,7 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
   return (
     <PbReactPopover
         closeOnClick="outside"
+        maxHeight={maxHeight}
         minWidth={minWidth}
         placement={placement}
         reference={filterButton}

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -69,14 +69,14 @@
       <% end %>
     <% end %>
 
-    <% if object.template != "sort_only"%>
-      <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
+    <% if object.template != "sort_only" %>
+      <%= pb_rails("popover", props: object.popover_props) do %>
         <%= content %>
       <% end %>
     <%end%>
 
-    <% if object.template != "filter_only"%>
-      <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
+    <% if object.template != "filter_only" %>
+      <%= pb_rails("popover", props: object.popover_props) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>
               <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -10,6 +10,7 @@ module Playbook
                       values: %w[default single filter_only sort_only],
                       default: "default"
       prop :background, type: Playbook::Props::Boolean, default: true
+      prop :max_height
       prop :min_width, default: "auto"
       prop :placement, type: Playbook::Props::Enum,
                        values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
@@ -31,7 +32,7 @@ module Playbook
       end
 
       def wrapper(&block)
-        if object.background
+        if background
           pb_rails("card", props: { padding: "none" }, &block)
         else
           capture(&block)
@@ -48,6 +49,29 @@ module Playbook
           ""
         end
       end
+
+      def popover_props
+        if template != "sort_only"
+          {
+            max_height: max_height,
+            min_width: min_width,
+            close_on_click: "outside",
+            trigger_element_id: "filter#{id}",
+            tooltip_id: "filter-form#{id}",
+            position: placement,
+          }
+        elsif template != "filter_only"
+          {
+            max_height: max_height,
+            classname: "pb_filter_sort_menu",
+            close_on_click: "outside",
+            trigger_element_id: "sort-button#{id}",
+            tooltip_id: "sort-filter-btn-tooltip#{id}",
+            position: placement,
+            padding: "none",
+          }
+        end
+      end
     end
   end
 end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.18.0"
-  VERSION = "13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2173"
+  VERSION = "13.18.0.pre.alpha.PLAY12062177"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2173
+  version: 13.18.0.pre.alpha.PLAY12062177
 platform: ruby
 authors:
 - Power UX