playbook_ui 18.1.0 → 18.2.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4989243cbc32bb750918ef297467d634a7db628b51bbf211895e293f3d14feeb
-  data.tar.gz: ee6a1cad85e386cd21a8d584c8715b97070f7a69b9ccb5cdb388f031cc1b7e81
+  metadata.gz: 5db309b02e5dd780da0f53f519c006634be2dd50e13553ce229ddd8be84a5527
+  data.tar.gz: dd7da084d43bf1060792d5dcc88dcc5fe2eaabe30d143f262083c80bef7f0a90
 SHA512:
-  metadata.gz: 9823736cae61fe883d0210734d6c12163fae9a4d5e5b1f17ed8da990b5dbad5e816fc49374b672fe04bb3f1e6fc9b7c5704faf39f7119c170cad30954a6393f3
-  data.tar.gz: c72caccadf7ab6a8f10fd9ee1197b06c1fba46a684f893b4f5d16525b91e6a69358aa51e1301fd7b9465127b34ac00c678263ed20258b2f90cc603443ea41243
+  metadata.gz: fcc52f997e3940eae2b3c00d36620ab00d2f44fddbce652671a6a3f6223877ce3cce1310d994e405dffad6fa92629727c8b1651a777cf379dd198a810ba1c93d
+  data.tar.gz: 18cd7637fe9d879a22a4df5505afda151de2e0a8f6bb02dc742016efe4bf4692bc2d08b50c88f078be99b0ea95c95e543dea5061489c4ffe9eada2799900a509

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

@@ -53,10 +53,7 @@ const TableCellRenderer = ({
           }
 
           const parent = cell.column.parent;
-          if (!parent) {
-            const last = row.getVisibleCells().at(-1);
-            return last?.column.id === cell.column.id;
-          }
+          if (!parent) return i !== 0;
 
           const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
           return visibleSiblings.at(-1)?.id === cell.column.id;

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

@@ -103,16 +103,20 @@ export const TableHeaderCell = ({
     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 
+
+   // 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));
+      const headerGroups = table?.getHeaderGroups() ?? [];
+      const isSubheader = (header.headerGroup?.depth ?? 0) > 0;
+      if (isSubheader && headerGroups.length > 1 && header.index !== 0) return true;
+
+      const topHeaders = headerGroups[0]?.headers.filter((item: any) => columnHasVisibleLeaf(item.column));
       return topHeaders?.at(-1)?.id === header.id;
     }
     const visibleSiblings = parent.columns.filter(columnHasVisibleLeaf);

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

@@ -1,33 +1,55 @@
 import React from "react";
 import Pagination from "../../pb_pagination/_pagination";
+import SectionSeparator from "../../pb_section_separator/_section_separator";
 
 interface TablePaginationProps {
-  table: any;
   onChange: (page: number) => void;
   position: "top" | "bottom";
   range?: number;
+  sectionSeparator?: boolean;
+  table: any;
 }
 
 const TablePagination: React.FC<TablePaginationProps> = ({
-  table,
   onChange,
   position,
-  range = 5
+  range = 5,
+  sectionSeparator = false,
+  table,
 }) => {
   const current = table.getState().pagination.pageIndex + 1;
   const total = table.getPageCount();
 
-  return (
+  // Pagination returns null when total <= 1; avoid orphan separators.
+  if (total <= 1) {
+    return null;
+  }
+
+  const pagination = (
     <Pagination
         current={current}
         key={`pagination-${position}-${current}`}
-        marginBottom={position === "top" ? "xs" : undefined}
-        marginTop={position === "bottom" ? "xs" : undefined}
+        marginBottom={!sectionSeparator && position === "top" ? "xs" : undefined}
+        marginLeft={sectionSeparator ? "lg" : undefined}
+        marginTop={!sectionSeparator && position === "bottom" ? "xs" : undefined}
         onChange={onChange}
+        paddingY={sectionSeparator ? "xs" : undefined}
         range={range}
         total={total}
     />
   );
+
+  if (!sectionSeparator) {
+    return pagination;
+  }
+
+  return (
+    <>
+      <SectionSeparator />
+      {pagination}
+      {position === "top" && <SectionSeparator />}
+    </>
+  );
 };
 
 export default TablePagination;

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

@@ -46,6 +46,9 @@ export const VirtualizedTableView = ({
   } = useContext(AdvancedTableContext)
 
   const columnPinning = table.getState().columnPinning || { left: [] };
+  const isMultiHeaderColumn = (table.options.meta?.columnDefinitions || []).some(
+    (column: Record<string, unknown>) => "columns" in column
+  );
   const sortingState = JSON.stringify(table.getState().sorting || []);
 
   // Store column widths extracted from header
@@ -212,7 +215,9 @@ export const VirtualizedTableView = ({
 
               {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 = cell.column.parent
+                  ? cell.column.parent.columns.at(-1)?.id === cell.column.id
+                  : isMultiHeaderColumn && i !== 0;
                 const cellWidth = columnWidths[cell.column.id] || 'auto';
 
                 return (

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

@@ -293,6 +293,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             onChange={onPageChange}
             position="top"
             range={paginationProps?.range}
+            sectionSeparator={paginationProps?.sectionSeparator}
             table={table}
         />
       )}
@@ -375,6 +376,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             onChange={onPageChange}
             position="bottom"
             range={paginationProps?.range}
+            sectionSeparator={paginationProps?.sectionSeparator}
             table={table}
         />
       )}

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

@@ -1383,4 +1383,140 @@ test("cascadeCollapse=true with header toggle all: collapse all then expand all
   await waitFor(() => {
     expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
   })
-})
+})
+
+test("pagination does not render section separators by default", () => {
+  const { container } = render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        pagination
+        paginationProps={{ pageSize: 1 }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  expect(container.querySelectorAll(".pb_paginate")).toHaveLength(2)
+  expect(container.querySelectorAll(".pb_section_separator_kit")).toHaveLength(0)
+})
+
+test("paginationProps.sectionSeparator renders separators for top and bottom pagination", () => {
+  const { container } = render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        pagination
+        paginationProps={{ pageSize: 1, sectionSeparator: true }}
+        tableData={MOCK_DATA}
+        tableProps={{ container: false }}
+    />
+  )
+
+  const paginations = container.querySelectorAll(".pb_paginate")
+  const separators = container.querySelectorAll(".pb_section_separator_kit")
+
+  expect(paginations).toHaveLength(2)
+  expect(separators).toHaveLength(3)
+  expect(paginations[0]).toHaveClass("ml_lg")
+  expect(paginations[0]).toHaveClass("py_xs")
+  expect(paginations[1]).toHaveClass("ml_lg")
+  expect(paginations[1]).toHaveClass("py_xs")
+  expect(separators[0].nextElementSibling).toBe(paginations[0])
+  expect(paginations[0].nextElementSibling).toBe(separators[1])
+  expect(separators[2].nextElementSibling).toBe(paginations[1])
+})
+
+const groupedColumnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        accessor: "newEnrollments",
+        label: "New Enrollments",
+      },
+      {
+        accessor: "scheduledMeetings",
+        label: "Scheduled Meetings",
+      },
+    ],
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        accessor: "completedClasses",
+        label: "Completed Classes",
+      },
+      {
+        accessor: "graduatedStudents",
+        label: "Graduated Students",
+      },
+    ],
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Difference",
+  },
+]
+
+const headerWithText = (row, text) => (
+  [...row.querySelectorAll("th")].find((cell) => cell.textContent.includes(text))
+)
+
+test("parentless subheaders get last-header-cell without a placeholder parent", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={groupedColumnDefinitions}
+        data={{ testid: testId }}
+        enableToggleExpansion="none"
+        tableData={MOCK_DATA_NO_SUBROWS}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const [topRow, subheaderRow] = kit.querySelectorAll("thead tr")
+  const topCells = topRow.querySelectorAll("th")
+
+  expect(headerWithText(subheaderRow, "Year")).not.toHaveClass("last-header-cell")
+  expect(headerWithText(subheaderRow, "New Enrollments")).not.toHaveClass("last-header-cell")
+  expect(headerWithText(subheaderRow, "Scheduled Meetings")).toHaveClass("last-header-cell")
+  expect(headerWithText(subheaderRow, "Attendance Rate")).toHaveClass("last-header-cell")
+  expect(headerWithText(subheaderRow, "Completed Classes")).not.toHaveClass("last-header-cell")
+  expect(headerWithText(subheaderRow, "Graduated Students")).toHaveClass("last-header-cell")
+  expect(headerWithText(subheaderRow, "Difference")).toHaveClass("last-header-cell")
+  expect(headerWithText(topRow, "Enrollment Data")).not.toHaveClass("last-header-cell")
+  expect(topCells[topCells.length - 1]).toHaveClass("last-header-cell")
+
+  const bodyCells = kit.querySelector("tbody tr").querySelectorAll("td")
+  const bodyGroupEnds = [...bodyCells].map((cell) => cell.classList.contains("last-cell"))
+  expect(bodyGroupEnds).toEqual([false, false, true, true, false, true, true])
+})
+
+test("single header row does not mark every column as last-header-cell", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        enableToggleExpansion="none"
+        tableData={MOCK_DATA_NO_SUBROWS}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const headers = kit.querySelectorAll("thead th")
+  const groupEnds = [...headers].filter((cell) => cell.classList.contains("last-header-cell"))
+
+  expect(headers.length).toBeGreaterThan(1)
+  expect(headers[0]).not.toHaveClass("last-header-cell")
+  expect(groupEnds).toHaveLength(1)
+  expect(kit.querySelector("tbody td.last-cell")).not.toBeInTheDocument()
+})
+

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

@@ -0,0 +1,90 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Button from '../../pb_button/_button'
+import Card from '../../pb_card/_card'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import TextInput from '../../pb_text_input/_text_input'
+import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
+
+const AdvancedTablePaginationSectionSeparator = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const paginationProps = {
+    pageSize: 10,
+    sectionSeparator: true,
+  }
+
+  return (
+    <Card padding="none">
+      <Filter
+          background={false}
+          minWidth="xs"
+          results={PAGINATION_MOCK_DATA.length}
+          sortOptions={{
+            year: "Year",
+            newEnrollments: "New Enrollments",
+            scheduledMeetings: "Scheduled Meetings",
+          }}
+          sortValue={[{ name: "year", dir: "asc" }]}
+      >
+        {({ closePopover }) => (
+          <>
+            <TextInput label="Year" />
+            <Flex spacing="between">
+              <Button
+                  onClick={closePopover}
+                  text="Filter"
+              />
+              <Button
+                  text="Defaults"
+                  variant="secondary"
+              />
+            </Flex>
+          </>
+        )}
+      </Filter>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          pagination
+          paginationProps={paginationProps}
+          responsive="none"
+          tableData={PAGINATION_MOCK_DATA}
+          tableProps={{ container: false }}
+          {...props}
+      />
+    </Card>
+  )
+}
+
+export default AdvancedTablePaginationSectionSeparator

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

@@ -0,0 +1,5 @@
+Use `sectionSeparator` on `paginationProps` to add section separators and spacing around pagination, matching the Table pagination/filter pattern.
+
+- Defaults to `false`
+- When `true`, top pagination is sandwiched by separators, bottom pagination gets a leading separator, and both use Table filter spacing (`marginLeft="lg"`, `paddingY="xs"`)
+- Recommended with `tableProps.container` set to `false` inside a Card (often with a Filter above), as shown here

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

@@ -3,4 +3,5 @@
 - `pageIndex`: An optional prop to set which page is set to open on initial load. Default is '0'
 - `pageSize`: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'
 - `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
-- `onPageChange`: A callback function that gives to access to the current page index.
+- `onPageChange`: A callback function that gives to access to the current page index.
+- `sectionSeparator`: Adds section separators and Table filter-pattern spacing around pagination. Default is `false`. See the [Section Separator](https://playbook.powerapp.cloud/kits/advanced_table/react#pagination-section-separator) example.

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

@@ -67,6 +67,7 @@ examples:
   - advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
+  - advanced_table_pagination_section_separator: Pagination Section Separator
   - advanced_table_loading: Loading State
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_column_headers: Multi-Header Columns

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

@@ -13,6 +13,7 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTableFullWidthCell } from './_advanced_table_full_width_cell.jsx'
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
+export { default as AdvancedTablePaginationSectionSeparator } from './_advanced_table_pagination_section_separator.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
 export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
 export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'

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

@@ -32,13 +32,13 @@ module Playbook
       prop :pinned_rows, type: Playbook::Props::HashProp,
                          default: {}
 
-      def flatten_columns(columns)
-        columns.flat_map do |col|
+      def flatten_columns(columns, root: true)
+        columns.each_with_index.flat_map do |col, index|
           if col[:columns]
-            flatten_columns(col[:columns])
+            flatten_columns(col[:columns], root: false)
           elsif col[:accessor].present?
             if has_grouped_headers?
-              col.merge(is_last_in_group: last_in_group?(columns, col))
+              col.merge(is_last_in_group: root ? index != 0 : last_in_group?(columns, col))
             else
               col
             end

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

@@ -106,6 +106,22 @@
         }
       }
 
+      // Let Rails autocomplete use the trigger space left by its action icons.
+      > :has([data-dropdown-autocomplete]) {
+        flex: 1;
+        min-width: 0;
+
+        .pb_flex_kit:has([data-dropdown-autocomplete]) {
+          min-width: 0;
+          width: 100%;
+        }
+
+        [data-dropdown-autocomplete] {
+          min-width: 0;
+          width: 100%;
+        }
+      }
+
       .dropdown_input:disabled {
         background-color: $input_background_disabled;
         color: $input_text_disabled;