playbook_ui 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082 → 18.3.0.pre.alpha.PLAY3353ATselectall20974

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 106354f9d720a7693c85b275f1de67cb17a21e3e28f28f90a758ee9b19942367
-  data.tar.gz: 9a5fbcd069bdaf722663195395f810d351e72e322a527e0157d666609363cc60
+  metadata.gz: f9b4809fd0eaae6c78ca3e4974fcabf0c17d94bab7faa4135164e4361aa4ea62
+  data.tar.gz: f5bd947efc3cb866c9482b95335493a56ab2b18c029cc90cd9b8329b661d1314
 SHA512:
-  metadata.gz: 8a13eb3272cf0c06bb2defa816ca14a48f2cb2fffd1185516f6ff40556fab6e9c9766d3929929680ea18511efc952ebefa5a1d836e554c99df384a1d9ef88ea4
-  data.tar.gz: d754688073c058e93739e273d4f6d8f54fa26f5a86869c7e764a3dddfb492f6c63efb86b914b6d9d45424f859e0996269f416b8ab38411268a8b89b23b17915c
+  metadata.gz: ba18f2d83a5827bdb20795ad4e9212b1d1c4c17c0dcf5acf5f0962454d1541e93f84eaa05ddac530b755afaed46fefed09c06b1d1f81b6fb4b62e5520de036ba
+  data.tar.gz: a40e05d0bf5d74b2e58932249fca3b9087a8bf18360ce3fda60e63afaa05af9c31dd0124671ac04707ef00b0e631d4151fa1d227b9aa19b32917fd6ccaa235e1

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

@@ -92,55 +92,43 @@ export const TableHeader = ({
       </tr>
     ))
 
-  // Empty checkbox-column cell on upper multi-header rows; checkbox only on the lowest row.
-  const renderSelectableHeaderCell = (
-    isLowestHeaderRow: boolean,
-    extraClassName?: string
-  ) => (
-    <th className={classnames(customCellClassnames, "checkbox-cell-header", extraClassName)}>
-      {isLowestHeaderRow ? (
-        <Checkbox
-            checked={table?.getIsAllRowsSelected()}
-            indeterminate={table?.getIsSomeRowsSelected()}
-            onChange={table?.getToggleAllRowsSelectedHandler()}
-        />
-      ) : null}
-    </th>
-  )
-
   const renderRegularTableHeader = () => (
     <thead className={classes}
         id={id}
         ref={headerRef}
     >
       {renderSpacerRows()}
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, headerGroupIndex: number, headerGroups: HeaderGroup<GenericObject>[]) => {
-        const isLowestHeaderRow = headerGroupIndex === headerGroups.length - 1
-
-        return (
-          <tr key={`${headerGroup.id}-headerGroup`}>
-            {!hasAnySubRows && selectableRows && renderSelectableHeaderCell(isLowestHeaderRow)}
-            {headerGroup.headers.map(header => {
-              const isPinnedLeft = columnPinning.left.includes(header.id)
-              return (
-                <TableHeaderCell
-                    enableSorting={enableSorting}
-                    enableToggleExpansion={enableToggleExpansion}
-                    handleExpandOrCollapse={handleExpandOrCollapse}
-                    header={header}
-                    headerChildren={children}
-                    isPinnedLeft={isPinnedLeft}
-                    key={`${header.id}-header`}
-                    loading={loading}
-                    persistToggleExpansionButton={persistToggleExpansionButton}
-                    sortIcon={sortIcon}
-                    table={table}
-                />
-              )
-            })}
-          </tr>
-        )
-      })}
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
+        <tr key={`${headerGroup.id}-headerGroup`}>
+          {!hasAnySubRows && selectableRows && (
+            <th className={customCellClassnames}>
+              <Checkbox
+                  checked={table?.getIsAllRowsSelected()}
+                  indeterminate={table?.getIsSomeRowsSelected()}
+                  onChange={table?.getToggleAllRowsSelectedHandler()}
+              />
+            </th>
+          )}
+          {headerGroup.headers.map(header => {
+            const isPinnedLeft = columnPinning.left.includes(header.id)
+            return (
+              <TableHeaderCell
+                  enableSorting={enableSorting}
+                  enableToggleExpansion={enableToggleExpansion}
+                  handleExpandOrCollapse={handleExpandOrCollapse}
+                  header={header}
+                  headerChildren={children}
+                  isPinnedLeft={isPinnedLeft}
+                  key={`${header.id}-header`}
+                  loading={loading}
+                  persistToggleExpansionButton={persistToggleExpansionButton}
+                  sortIcon={sortIcon}
+                  table={table}
+              />
+            )
+          })}
+        </tr>
+      ))}
     </thead>
   );
 
@@ -152,37 +140,41 @@ export const TableHeader = ({
         ref={headerRef}
     >
       {renderSpacerRows("virtualized-header-row-header")}
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, headerGroupIndex: number, headerGroups: HeaderGroup<GenericObject>[]) => {
-        const isLowestHeaderRow = headerGroupIndex === headerGroups.length - 1
-
-        return (
-          <tr
-              className="virtualized-header-row-header"
-              key={`${headerGroup.id}-headerGroup-virtualized`}
-          >
-            {!hasAnySubRows && selectableRows && renderSelectableHeaderCell(isLowestHeaderRow, "virtualized-header-cell")}
-            {headerGroup.headers.map(header => {
-              const isPinnedLeft = columnPinning.left.includes(header.id)
-              return (
-                <TableHeaderCell
-                    enableSorting={enableSorting}
-                    enableToggleExpansion={enableToggleExpansion}
-                    handleExpandOrCollapse={handleExpandOrCollapse}
-                    header={header}
-                    headerChildren={children}
-                    isPinnedLeft={isPinnedLeft}
-                    isVirtualized
-                    key={`${header.id}-header-virtualized`}
-                    loading={loading}
-                    persistToggleExpansionButton={persistToggleExpansionButton}
-                    sortIcon={sortIcon}
-                    table={table}
-                />
-              )
-            })}
-          </tr>
-        )
-      })}
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
+        <tr
+            className="virtualized-header-row-header"
+            key={`${headerGroup.id}-headerGroup-virtualized`}
+        >
+          {!hasAnySubRows && selectableRows && (
+            <th className={classnames(customCellClassnames, "virtualized-header-cell")}>
+              <Checkbox
+                  checked={table?.getIsAllRowsSelected()}
+                  indeterminate={table?.getIsSomeRowsSelected()}
+                  onChange={table?.getToggleAllRowsSelectedHandler()}
+              />
+            </th>
+          )}
+          {headerGroup.headers.map(header => {
+            const isPinnedLeft = columnPinning.left.includes(header.id)
+            return (
+              <TableHeaderCell
+                  enableSorting={enableSorting}
+                  enableToggleExpansion={enableToggleExpansion}
+                  handleExpandOrCollapse={handleExpandOrCollapse}
+                  header={header}
+                  headerChildren={children}
+                  isPinnedLeft={isPinnedLeft}
+                  isVirtualized
+                  key={`${header.id}-header-virtualized`}
+                  loading={loading}
+                  persistToggleExpansionButton={persistToggleExpansionButton}
+                  sortIcon={sortIcon}
+                  table={table}
+              />
+            )
+          })}
+        </tr>
+      ))}
     </thead>
   );
   return (

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

@@ -296,13 +296,6 @@
     .pb_tooltip_kit {
       font-weight: unset;
       text-transform: unset;
-
-      .tooltip_tooltip {
-        font-size: initial;
-        font-weight: normal;
-        letter-spacing: normal;
-        text-transform: none;
-      }
     }
   }
 

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

@@ -1521,55 +1521,6 @@ test("single header row does not mark every column as last-header-cell", () => {
   expect(kit.querySelector("tbody td.last-cell")).not.toBeInTheDocument()
 })
 
-const selectableMultiHeaderData = MOCK_DATA_NO_SUBROWS.map((row, index) => ({
-  ...row,
-  id: String(index + 1),
-}))
-
-test("multi-column selectable headers keep one select-all checkbox on the lowest header row", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={groupedColumnDefinitions}
-        data={{ testid: testId }}
-        enableToggleExpansion="none"
-        selectableRows
-        tableData={selectableMultiHeaderData}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const headerRows = kit.querySelectorAll("thead tr")
-  const checkboxHeaderCells = kit.querySelectorAll("thead th.checkbox-cell-header")
-  const headerCheckboxes = kit.querySelectorAll("thead th.checkbox-cell-header input[type='checkbox']")
-
-  expect(headerRows.length).toBeGreaterThan(1)
-  expect(checkboxHeaderCells).toHaveLength(headerRows.length)
-  expect(headerCheckboxes).toHaveLength(1)
-
-  const lowestHeaderRow = headerRows[headerRows.length - 1]
-  expect(lowestHeaderRow.querySelector("th.checkbox-cell-header input[type='checkbox']")).toBeInTheDocument()
-  expect(headerRows[0].querySelector("th.checkbox-cell-header input[type='checkbox']")).not.toBeInTheDocument()
-})
-
-test("single-header selectable rows still render one select-all checkbox", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        enableToggleExpansion="none"
-        selectableRows
-        tableData={selectableMultiHeaderData}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const headerRows = kit.querySelectorAll("thead tr")
-  const headerCheckboxes = kit.querySelectorAll("thead th.checkbox-cell-header input[type='checkbox']")
-
-  expect(headerRows).toHaveLength(1)
-  expect(headerCheckboxes).toHaveLength(1)
-})
-
 const visibilityColumnDefinitions = [
   {
     accessor: "year",

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

@@ -1 +1,3 @@
-The `columnVisibilityControl` prop can also be used with multi-header columns as shown.
+The `columnVisibilityControl` prop can also be used with multi-header columns as shown.
+
+`showSelectAll` updates every leaf column in the popover that can be hidden. Group checkboxes stay in sync with that selection. Hiding every column in a group keeps the subheader rows, so the table header does not collapse. With controlled state, persist `value` from the `onChange` updater so each leaf id stays stored.

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

@@ -1,179 +1,60 @@
-/* eslint-disable no-console */
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
-
-const columnDefinitions = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          { accessor: "newEnrollments", label: "New Enrollments" },
-          { accessor: "scheduledMeetings", label: "Scheduled Meetings" },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          { accessor: "completedClasses", label: "Completed Classes" },
-          { accessor: "classCompletionRate", label: "Class Completion Rate" },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          { accessor: "attendanceRate", label: "Attendance Rate" },
-          { accessor: "graduatedStudents", label: "Graduated Students" },
-        ],
-      },
-    ],
-  },
-]
-
-const subRowHeaders = ["Quarter", "Month", "Day"]
-const months = ["January", "April", "July", "October", "December"]
-
-const buildTableData = (tableId) => (
-  Array.from({ length: 5 }, (_, index) => {
-    const year = 2020 + index
-
-    return {
-      id: `${tableId}-${year}`,
-      year: String(year),
-      quarter: `Q${(index % 4) + 1}`,
-      month: months[index],
-      day: String(index + 1),
-      newEnrollments: String(20 + index),
-      scheduledMeetings: String(10 + index),
-      attendanceRate: `${50 + index}%`,
-      completedClasses: String(3 + index),
-      classCompletionRate: `${30 + index}%`,
-      graduatedStudents: String(19 + index),
-    }
-  })
-)
-
-const buildTableDataSubrows = (tableId) => (
-  Array.from({ length: 5 }, (_, index) => {
-    const year = 2020 + index
-    const quarter = `Q${(index % 4) + 1}`
-
-    return {
-      id: `${tableId}-${year}`,
-      year: String(year),
-      quarter,
-      month: months[index],
-      day: String(index + 1),
-      newEnrollments: String(20 + index),
-      scheduledMeetings: String(10 + index),
-      attendanceRate: `${50 + index}%`,
-      completedClasses: String(3 + index),
-      classCompletionRate: `${30 + index}%`,
-      graduatedStudents: String(19 + index),
-      children: [
-        {
-          id: `${tableId}-${year}-q${(index % 4) + 1}`,
-          quarter,
-          month: months[index],
-          day: String(index + 1),
-        },
-      ],
-    }
-  })
-)
-
-const standardAllData = buildTableDataSubrows("standard_multi_column_all")
-const standardNoneData = buildTableData("standard_multi_column_none")
-const segmentedAllData = buildTableDataSubrows("segmented_multi_column_all")
-const segmentedNoneData = buildTableData("segmented_multi_column_none")
-
-const AdvancedTableSelectableRows = (props) => (
-  <div>
-    <Title
-        marginBottom="sm"
-        size={4}
-        tag="h4"
-        text="Standard AdvancedTable"
-    />
-
-    <Caption
-        text="Multi-column headers with selectable rows and expandable subrows — Standard / Enable Toggle Expansion All"
-    />
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        enableToggleExpansion="all"
-        marginBottom="md"
-        onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
-        selectableRows
-        subRowHeaders={subRowHeaders}
-        tableData={standardAllData}
-        {...props}
-    />
-
-    <Caption
-        text="Multi-column headers with selectable rows — Standard / Enable Toggle Expansion None"
-    />
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        enableToggleExpansion="none"
-        onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
-        selectableRows
-        tableData={standardNoneData}
-        {...props}
-    />
-
-    <Title
-        marginBottom="sm"
-        marginTop="xl"
-        size={4}
-        tag="h4"
-        text="Segmented AdvancedTable"
-    />
-
-    <Caption
-        text="Multi-column headers with selectable rows and expandable subrows — Subcomponent / Enable Toggle Expansion All"
-    />
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        enableToggleExpansion="all"
-        marginBottom="md"
-        onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
-        selectableRows
-        tableData={segmentedAllData}
-        {...props}
-    >
-      <AdvancedTable.Header />
-      <AdvancedTable.Body subRowHeaders={subRowHeaders} />
-    </AdvancedTable>
-
-    <Caption
-        text="Multi-column headers with selectable rows — Subcomponent / Enable Toggle Expansion None"
-    />
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        enableToggleExpansion="none"
-        onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
-        selectableRows
-        tableData={segmentedNoneData}
-        {...props}
-    >
-      <AdvancedTable.Header />
-      <AdvancedTable.Body subRowHeaders={subRowHeaders} />
-    </AdvancedTable>
-  </div>
-)
-
-export default AdvancedTableSelectableRows
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableSelectableRows = (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",
+    },
+  ]
+
+  //Render the subRow header rows
+  const subRowHeaders = ["Quarter", "Month", "Day"]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
+          selectableRows
+          tableData={MOCK_DATA}
+          
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableSelectableRows

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json

@@ -7,24 +7,18 @@
     "subRowHeaders": "AdvancedTable.Body.props"
   },
   "defaults": {
-    "cascadeCollapse": false,
+    "columnGroupBorderColor": "none",
     "enableToggleExpansion": "header",
-    "enableSortingRemoval": false,
     "fullWidthCell": false,
     "groupSeparators": false,
-    "initialLoadingRowsCount": 10,
     "inlineRowLoading": false,
     "loading": false,
     "maxHeight": "auto",
-    "pagination": false,
     "responsive": "scroll",
     "scrollBarNone": false,
     "selectableRows": false,
     "showActionsBar": true,
     "persistToggleExpansionButton": false,
-    "sortParentOnly": false,
-    "toggleExpansionIcon": "arrows-from-line",
-    "virtualizedRows": false,
     "collapsibleTrail": true,
     "columnVisibilityControl": {
       "default": true

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

@@ -88,7 +88,6 @@ examples:
   - 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
-  - advanced_table_column_visibility_multi_select_all: Column Visibility Control with Select All and Multi-Header Columns
   - advanced_table_grouped_headers_composition: Grouped headers, custom headers, sort, and pinned rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling

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

@@ -34,7 +34,6 @@ export { default as AdvancedTableColumnBorderColor} from './_advanced_table_colu
 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 AdvancedTableColumnVisibilityMultiSelectAll } from './_advanced_table_column_visibility_multi_select_all.jsx'
 export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'

data/app/pb_kits/playbook/pb_advanced_table/kit.schema.json

@@ -21,8 +21,7 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ],
-      "default": false
+      ]
     },
     "columnDefinitions": {
       "type": "array",
@@ -37,28 +36,15 @@
         "react",
         "rails"
       ],
-      "values": {
-        "react": [
-          "text_lt_default",
-          "text_lt_light",
-          "text_lt_lighter",
-          "text_dk_default",
-          "text_dk_light",
-          "text_dk_lighter"
-        ],
-        "rails": [
-          "text_lt_default",
-          "text_lt_light",
-          "text_lt_lighter",
-          "text_dk_default",
-          "text_dk_light",
-          "text_dk_lighter",
-          "none"
-        ]
-      },
-      "default": {
-        "rails": "none"
-      }
+      "values": [
+        "text_lt_default",
+        "text_lt_light",
+        "text_lt_lighter",
+        "text_dk_default",
+        "text_dk_light",
+        "text_dk_lighter"
+      ],
+      "default": "none"
     },
     "columnVisibilityControl": {
       "type": "GenericObject",
@@ -89,8 +75,7 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ],
-      "default": false
+      ]
     },
     "expandedControl": {
       "type": "GenericObject",
@@ -130,8 +115,7 @@
       "type": "number",
       "platforms": [
         "react"
-      ],
-      "default": 10
+      ]
     },
     "inlineRowLoading": {
       "type": "boolean",
@@ -186,8 +170,7 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ],
-      "default": false
+      ]
     },
     "paginationProps": {
       "type": "GenericObject",
@@ -263,8 +246,7 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ],
-      "default": false
+      ]
     },
     "stickyLeftColumn": {
       "type": "array",
@@ -296,8 +278,7 @@
       "type": "string | string[]",
       "platforms": [
         "react"
-      ],
-      "default": "arrows-from-line"
+      ]
     },
     "onRowSelectionChange": {
       "type": "function",
@@ -315,8 +296,7 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ],
-      "default": false
+      ]
     },
     "enableSorting": {
       "type": "boolean",