playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

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

@@ -1,8 +1,9 @@
 import React, {useState} from "react"
-import { render, screen, waitFor } from "../utilities/test-utils"
+import { fireEvent, render, screen, waitFor } from "../utilities/test-utils"
 
 import { AdvancedTable } from "playbook-ui/advanced-table"
 import { Pill, colors } from "playbook-ui"
+import { buildGroupSeparatorInsets } from "./Utilities/RowUtils"
 
 global.ResizeObserver = class {
   observe() {}
@@ -1520,3 +1521,1101 @@ 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",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+    id: "year",
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+    id: "newEnrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+    id: "scheduledMeetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+    id: "attendanceRate",
+  },
+]
+
+const groupedVisibilityColumnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+    id: "year",
+  },
+  {
+    label: "Enrollment Data",
+    id: "enrollmentData",
+    columns: [
+      {
+        accessor: "newEnrollments",
+        label: "New Enrollments",
+        id: "newEnrollments",
+      },
+      {
+        accessor: "scheduledMeetings",
+        label: "Scheduled Meetings",
+        id: "scheduledMeetings",
+      },
+    ],
+  },
+]
+
+const openColumnVisibilityMenu = () => {
+  fireEvent.click(screen.getByLabelText("sliders-h icon"))
+}
+
+const headerTexts = (kit) =>
+  [...kit.querySelectorAll("thead th")].map((cell) => cell.textContent || "")
+
+const checkboxNamed = (name) =>
+  screen.getByRole("checkbox", {
+    name: (accessibleName) => {
+      const normalized = accessibleName.replace(/\s+/g, " ").trim()
+      return normalized === name || normalized.endsWith(` ${name}`)
+    },
+  })
+
+const queryCheckboxNamed = (name) =>
+  screen.queryByRole("checkbox", {
+    name: (accessibleName) => {
+      const normalized = accessibleName.replace(/\s+/g, " ").trim()
+      return normalized === name || normalized.endsWith(` ${name}`)
+    },
+  })
+
+test("column visibility select all is hidden unless showSelectAll is enabled", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={visibilityColumnDefinitions}
+        columnVisibilityControl={{ default: true }}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  openColumnVisibilityMenu()
+
+  expect(queryCheckboxNamed("Select All")).not.toBeInTheDocument()
+  expect(queryCheckboxNamed("Deselect All")).not.toBeInTheDocument()
+  expect(checkboxNamed("New Enrollments")).toBeInTheDocument()
+})
+
+test("column visibility select all toggles available columns and stays in sync", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={visibilityColumnDefinitions}
+        columnVisibilityControl={{ showSelectAll: true }}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  openColumnVisibilityMenu()
+
+  const deselectAll = checkboxNamed("Deselect All")
+  expect(deselectAll).toBeChecked()
+  expect(deselectAll).not.toBePartiallyChecked()
+  expect(deselectAll).toHaveAttribute("type", "checkbox")
+  expect(deselectAll).not.toBeDisabled()
+
+  deselectAll.focus()
+  expect(deselectAll).toHaveFocus()
+  const spaceKey = new KeyboardEvent("keydown", {
+    bubbles: true,
+    cancelable: true,
+    code: "Space",
+    key: " ",
+  })
+  deselectAll.dispatchEvent(spaceKey)
+  expect(spaceKey.defaultPrevented).toBe(false)
+  fireEvent.click(deselectAll)
+
+  expect(checkboxNamed("Select All")).not.toBeChecked()
+  expect(headerTexts(kit).some((text) => text.includes("Year"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Scheduled Meetings"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Attendance Rate"))).toBe(false)
+
+  fireEvent.click(checkboxNamed("New Enrollments"))
+
+  expect(checkboxNamed("Select All")).toBePartiallyChecked()
+  expect(checkboxNamed("New Enrollments")).toBeChecked()
+  expect(checkboxNamed("Scheduled Meetings")).not.toBeChecked()
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("Scheduled Meetings"))).toBe(false)
+
+  fireEvent.click(checkboxNamed("Select All"))
+
+  expect(checkboxNamed("Deselect All")).toBeChecked()
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("Scheduled Meetings"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("Attendance Rate"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("Year"))).toBe(true)
+})
+
+test("column visibility select all leaves excluded columns unchanged", () => {
+  const onChange = jest.fn()
+  const onColumnVisibilityChange = jest.fn()
+
+  const ControlledVisibility = () => {
+    const [columnVisibility, setColumnVisibility] = useState({
+      attendanceRate: false,
+      scheduledMeetings: false,
+    })
+
+    return (
+      <AdvancedTable
+          columnDefinitions={visibilityColumnDefinitions}
+          columnVisibilityControl={{
+            includeIds: ["newEnrollments", "scheduledMeetings"],
+            onChange: (updater) => {
+              const nextVisibility = typeof updater === "function" ? updater(columnVisibility) : updater
+              onChange(nextVisibility)
+              setColumnVisibility(nextVisibility)
+            },
+            onColumnVisibilityChange,
+            showSelectAll: true,
+            value: columnVisibility,
+          }}
+          data={{ testid: testId }}
+          tableData={MOCK_DATA}
+      />
+    )
+  }
+
+  render(<ControlledVisibility />)
+
+  const kit = screen.getByTestId(testId)
+  openColumnVisibilityMenu()
+
+  expect(checkboxNamed("Select All")).toBePartiallyChecked()
+  expect(queryCheckboxNamed("Attendance Rate")).not.toBeInTheDocument()
+  expect(headerTexts(kit).some((text) => text.includes("Attendance Rate"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Year"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("Scheduled Meetings"))).toBe(false)
+
+  fireEvent.click(checkboxNamed("Select All"))
+
+  expect(checkboxNamed("Deselect All")).toBeChecked()
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("Scheduled Meetings"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("Attendance Rate"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Year"))).toBe(true)
+  expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+    attendanceRate: false,
+    newEnrollments: true,
+    scheduledMeetings: true,
+  }))
+  expect(onColumnVisibilityChange).toHaveBeenCalledWith(expect.objectContaining({
+    attendanceRate: false,
+    newEnrollments: true,
+    scheduledMeetings: true,
+    year: true,
+  }))
+
+  fireEvent.click(checkboxNamed("Deselect All"))
+
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Scheduled Meetings"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Attendance Rate"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Year"))).toBe(true)
+})
+
+test("column visibility select all stays in sync with grouped columns", () => {
+  const onColumnVisibilityChange = jest.fn()
+
+  render(
+    <AdvancedTable
+        columnDefinitions={groupedVisibilityColumnDefinitions}
+        columnVisibilityControl={{
+          onColumnVisibilityChange,
+          showSelectAll: true,
+        }}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  openColumnVisibilityMenu()
+
+  expect(checkboxNamed("Deselect All")).toBeChecked()
+  expect(checkboxNamed("Enrollment Data")).toBeChecked()
+
+  const headerRowCount = kit.querySelectorAll("thead tr").length
+  fireEvent.click(checkboxNamed("Deselect All"))
+
+  expect(onColumnVisibilityChange).toHaveBeenCalledWith(expect.objectContaining({
+    enrollmentData: false,
+    year: true,
+  }))
+  expect(kit.querySelectorAll("thead tr")).toHaveLength(headerRowCount)
+  expect(checkboxNamed("Select All")).not.toBeChecked()
+  expect(checkboxNamed("Enrollment Data")).not.toBeChecked()
+  expect(checkboxNamed("New Enrollments")).not.toBeChecked()
+  expect(headerTexts(kit).some((text) => text.includes("Enrollment Data"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Year"))).toBe(true)
+
+  fireEvent.click(checkboxNamed("New Enrollments"))
+
+  expect(checkboxNamed("Select All")).toBePartiallyChecked()
+  expect(checkboxNamed("Enrollment Data")).toBePartiallyChecked()
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("Scheduled Meetings"))).toBe(false)
+
+  fireEvent.click(checkboxNamed("Select All"))
+
+  expect(checkboxNamed("Deselect All")).toBeChecked()
+  expect(checkboxNamed("Enrollment Data")).toBeChecked()
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("Scheduled Meetings"))).toBe(true)
+})
+
+test("deselect all keeps nested multi-header rows", () => {
+  const nestedColumnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+    },
+    {
+      label: "Enrollment Data",
+      id: "enrollmentData",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          id: "enrollmentStats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+              id: "newEnrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+              id: "scheduledMeetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      id: "performanceData",
+      columns: [
+        {
+          label: "Attendance",
+          id: "attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+              id: "attendanceRate",
+            },
+          ],
+        },
+      ],
+    },
+  ]
+
+  render(
+    <AdvancedTable
+        columnDefinitions={nestedColumnDefinitions}
+        columnVisibilityControl={{ showSelectAll: true }}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.querySelectorAll("thead tr")).toHaveLength(3)
+
+  openColumnVisibilityMenu()
+  fireEvent.click(checkboxNamed("Deselect All"))
+
+  expect(kit.querySelectorAll("thead tr")).toHaveLength(3)
+  const spacerCells = kit.querySelectorAll("thead tr.header-spacer-row[aria-hidden='true'] .header-spacer-cell")
+  expect(spacerCells).toHaveLength(2)
+  spacerCells.forEach((cell) => {
+    expect(cell).not.toHaveClass("table-header-cells")
+    expect(cell).not.toHaveClass("table-header-cells-custom")
+  })
+  expect(headerTexts(kit).some((text) => text.includes("Year"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Attendance Rate"))).toBe(false)
+})
+
+test("grouped headers render no spacer rows or placeholder text while columns are visible", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={groupedVisibilityColumnDefinitions}
+        columnVisibilityControl={{ default: true }}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.querySelectorAll("thead tr")).toHaveLength(2)
+  expect(kit.querySelector("thead tr.header-spacer-row")).not.toBeInTheDocument()
+  expect(headerTexts(kit)[0]).toBe("")
+})
+
+test("select all sends the same callback shapes as single column toggles", () => {
+  const onChange = jest.fn()
+  const onColumnVisibilityChange = jest.fn()
+
+  const ControlledVisibility = () => {
+    const [columnVisibility, setColumnVisibility] = useState({})
+
+    return (
+      <AdvancedTable
+          columnDefinitions={groupedVisibilityColumnDefinitions}
+          columnVisibilityControl={{
+            onChange: (updater) => {
+              onChange(updater)
+              setColumnVisibility(updater)
+            },
+            onColumnVisibilityChange,
+            showSelectAll: true,
+            value: columnVisibility,
+          }}
+          data={{ testid: testId }}
+          tableData={MOCK_DATA}
+      />
+    )
+  }
+
+  render(<ControlledVisibility />)
+
+  const kit = screen.getByTestId(testId)
+  openColumnVisibilityMenu()
+
+  fireEvent.click(checkboxNamed("New Enrollments"))
+  fireEvent.click(checkboxNamed("Select All"))
+
+  const [toggleUpdater, selectAllUpdater] = onChange.mock.calls.map(([updater]) => updater)
+  expect(typeof toggleUpdater).toBe("function")
+  expect(typeof selectAllUpdater).toBe("function")
+  expect(selectAllUpdater({ newEnrollments: false })).toEqual({
+    newEnrollments: true,
+    scheduledMeetings: true,
+  })
+
+  const [toggleState, selectAllState] = onColumnVisibilityChange.mock.calls.map(([state]) => state)
+  expect(Object.keys(selectAllState).sort()).toEqual(Object.keys(toggleState).sort())
+  expect(selectAllState).toEqual({ enrollmentData: true, year: true })
+
+  fireEvent.click(checkboxNamed("Deselect All"))
+
+  expect(onColumnVisibilityChange).toHaveBeenLastCalledWith({ enrollmentData: false, year: true })
+  expect(checkboxNamed("New Enrollments")).not.toBeChecked()
+  expect(checkboxNamed("Scheduled Meetings")).not.toBeChecked()
+  expect(headerTexts(kit).some((text) => text.includes("Enrollment Data"))).toBe(false)
+})
+
+test("hidden groups keep the existing header layout unless select all is enabled", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={groupedVisibilityColumnDefinitions}
+        columnVisibilityControl={{
+          value: {
+            newEnrollments: false,
+            scheduledMeetings: false,
+          },
+        }}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.querySelector("thead tr.header-spacer-row")).not.toBeInTheDocument()
+  expect(kit.querySelectorAll("thead tr")).toHaveLength(1)
+  expect(headerTexts(kit).some((text) => text.includes("Year"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("Enrollment Data"))).toBe(false)
+})
+
+test("select all is omitted when no listed column can be hidden", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={visibilityColumnDefinitions}
+        columnVisibilityControl={{ showSelectAll: true }}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+        tableOptions={{ enableHiding: false }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  openColumnVisibilityMenu()
+
+  expect(queryCheckboxNamed("Select All")).not.toBeInTheDocument()
+  expect(queryCheckboxNamed("Deselect All")).not.toBeInTheDocument()
+  expect(checkboxNamed("New Enrollments")).toBeChecked()
+
+  fireEvent.click(checkboxNamed("New Enrollments"))
+
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(true)
+  openColumnVisibilityMenu()
+  openColumnVisibilityMenu()
+  expect(checkboxNamed("New Enrollments")).toBeChecked()
+})
+
+test("virtualized spacer cells stay out of column header measurement", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={groupedVisibilityColumnDefinitions}
+        columnVisibilityControl={{
+          showSelectAll: true,
+          value: {
+            newEnrollments: false,
+            scheduledMeetings: false,
+          },
+        }}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+        virtualizedRows
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const spacerCells = kit.querySelectorAll("thead .header-spacer-cell")
+  const measuredCells = document.querySelectorAll(".table-header-cells, .table-header-cells-custom")
+
+  expect(spacerCells.length).toBeGreaterThan(0)
+  spacerCells.forEach((cell) => {
+    expect(cell).not.toHaveClass("table-header-cells")
+    expect(cell).not.toHaveClass("table-header-cells-custom")
+  })
+  expect(Array.from(measuredCells).some((cell) => cell.classList.contains("header-spacer-cell"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Year"))).toBe(true)
+})
+
+test("grouped select all persisted from the onChange updater round-trips leaf visibility", () => {
+  const onChange = jest.fn()
+  const onColumnVisibilityChange = jest.fn()
+
+  const PersistedGroupedVisibility = () => {
+    const [columnVisibility, setColumnVisibility] = useState({})
+
+    return (
+      <AdvancedTable
+          columnDefinitions={groupedVisibilityColumnDefinitions}
+          columnVisibilityControl={{
+            onChange: (updater) => {
+              setColumnVisibility((currentVisibility) => {
+                const nextVisibility = typeof updater === "function" ? updater(currentVisibility) : updater
+                onChange(nextVisibility)
+                return nextVisibility
+              })
+            },
+            onColumnVisibilityChange,
+            showSelectAll: true,
+            value: columnVisibility,
+          }}
+          data={{ testid: testId }}
+          tableData={MOCK_DATA}
+      />
+    )
+  }
+
+  render(<PersistedGroupedVisibility />)
+
+  const kit = screen.getByTestId(testId)
+  openColumnVisibilityMenu()
+  fireEvent.click(checkboxNamed("Deselect All"))
+
+  expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+    newEnrollments: false,
+    scheduledMeetings: false,
+  }))
+  expect(onColumnVisibilityChange).toHaveBeenCalledWith({ enrollmentData: false, year: true })
+  expect(checkboxNamed("Select All")).not.toBeChecked()
+  expect(checkboxNamed("Enrollment Data")).not.toBeChecked()
+  expect(checkboxNamed("New Enrollments")).not.toBeChecked()
+  expect(checkboxNamed("Scheduled Meetings")).not.toBeChecked()
+  expect(headerTexts(kit).some((text) => text.includes("Enrollment Data"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Scheduled Meetings"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Year"))).toBe(true)
+
+  fireEvent.click(checkboxNamed("Select All"))
+
+  expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({
+    newEnrollments: true,
+    scheduledMeetings: true,
+  }))
+  expect(onColumnVisibilityChange).toHaveBeenLastCalledWith({ enrollmentData: true, year: true })
+  expect(checkboxNamed("Deselect All")).toBeChecked()
+  expect(checkboxNamed("Enrollment Data")).toBeChecked()
+  expect(checkboxNamed("New Enrollments")).toBeChecked()
+  expect(checkboxNamed("Scheduled Meetings")).toBeChecked()
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(true)
+  expect(headerTexts(kit).some((text) => text.includes("Scheduled Meetings"))).toBe(true)
+})
+
+test("select all state persisted from onColumnVisibilityChange round-trips through value", () => {
+  const PersistedVisibility = () => {
+    const [columnVisibility, setColumnVisibility] = useState({ attendanceRate: false })
+
+    return (
+      <AdvancedTable
+          columnDefinitions={visibilityColumnDefinitions}
+          columnVisibilityControl={{
+            onChange: () => {},
+            onColumnVisibilityChange: setColumnVisibility,
+            showSelectAll: true,
+            value: columnVisibility,
+          }}
+          data={{ testid: testId }}
+          tableData={MOCK_DATA}
+      />
+    )
+  }
+
+  render(<PersistedVisibility />)
+
+  const kit = screen.getByTestId(testId)
+  openColumnVisibilityMenu()
+
+  fireEvent.click(checkboxNamed("Select All"))
+
+  expect(checkboxNamed("Deselect All")).toBeChecked()
+  expect(headerTexts(kit).some((text) => text.includes("Attendance Rate"))).toBe(true)
+
+  fireEvent.click(checkboxNamed("Deselect All"))
+
+  expect(checkboxNamed("Select All")).not.toBeChecked()
+  expect(headerTexts(kit).some((text) => text.includes("New Enrollments"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Attendance Rate"))).toBe(false)
+  expect(headerTexts(kit).some((text) => text.includes("Year"))).toBe(true)
+})
+
+const MOCK_DATA_GROUP_SEPARATORS = [
+  {
+    year: "2021",
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    children: [
+      {
+        year: "2021",
+        quarter: "Q1",
+        newEnrollments: "5",
+        scheduledMeetings: "2",
+        children: [
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "January",
+            newEnrollments: "2",
+            scheduledMeetings: "1",
+          },
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "February",
+            newEnrollments: "3",
+            scheduledMeetings: "1",
+          },
+        ],
+      },
+      {
+        year: "2021",
+        quarter: "Q2",
+        newEnrollments: "6",
+        scheduledMeetings: "3",
+        children: [
+          {
+            year: "2021",
+            quarter: "Q2",
+            month: "April",
+            newEnrollments: "3",
+            scheduledMeetings: "1",
+          },
+          {
+            year: "2021",
+            quarter: "Q2",
+            month: "May",
+            newEnrollments: "3",
+            scheduledMeetings: "2",
+          },
+        ],
+      },
+    ],
+  },
+]
+
+test("groupSeparators=false (default) does not add group-separator-row", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        expandedControl={{ value: { "0": true, "0.0": true }, onChange: () => {} }}
+        tableData={MOCK_DATA_GROUP_SEPARATORS}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.querySelector(".group-separator-row")).not.toBeInTheDocument()
+})
+
+test("groupSeparators marks last visible child of each nested group", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        expandedControl={{ value: { "0": true, "0.0": true, "0.1": true }, onChange: () => {} }}
+        groupSeparators
+        tableData={MOCK_DATA_GROUP_SEPARATORS}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const separatorRows = kit.querySelectorAll("tbody tr.group-separator-row")
+  const separatorMonths = [...separatorRows].map((row) => row.textContent)
+
+  expect(separatorRows.length).toBe(2)
+  expect(separatorMonths.some((text) => text.includes("February"))).toBe(true)
+  expect(separatorMonths.some((text) => text.includes("May"))).toBe(true)
+  expect(kit.querySelector("tbody tr.group-separator-row")?.textContent).not.toContain("January")
+  expect(
+    [...kit.querySelectorAll("tbody tr")].find((row) => row.textContent.includes("2021") && !row.classList.contains("depth-sub-row-1") && !row.classList.contains("depth-sub-row-2"))
+  ).not.toHaveClass("group-separator-row")
+})
+
+test("groupSeparators defers separator to last descendant when last sibling is expanded", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        expandedControl={{ value: { "0": true, "0.0": true }, onChange: () => {} }}
+        groupSeparators
+        tableData={MOCK_DATA_GROUP_SEPARATORS}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const q1Row = [...kit.querySelectorAll("tbody tr")].find((row) =>
+    row.classList.contains("depth-sub-row-1") && row.textContent.includes("Q1")
+  )
+  const februaryRow = [...kit.querySelectorAll("tbody tr")].find((row) =>
+    row.textContent.includes("February")
+  )
+
+  expect(q1Row).not.toHaveClass("group-separator-row")
+  expect(februaryRow).toHaveClass("group-separator-row")
+})
+
+test("groupSeparators insets each closer to the outermost group it closes", () => {
+  const data = [
+    {
+      year: "2022",
+      newEnrollments: "1",
+      scheduledMeetings: "1",
+      children: [
+        {
+          year: "2022",
+          quarter: "Q1",
+          newEnrollments: "1",
+          scheduledMeetings: "1",
+          children: [
+            {
+              year: "2022",
+              quarter: "Q1",
+              month: "January",
+              newEnrollments: "1",
+              scheduledMeetings: "1",
+              children: [
+                { year: "2022", quarter: "Q1", month: "January", day: "15", newEnrollments: "1", scheduledMeetings: "1" },
+                { year: "2022", quarter: "Q1", month: "January", day: "25", newEnrollments: "1", scheduledMeetings: "1" },
+              ],
+            },
+            {
+              year: "2022",
+              quarter: "Q1",
+              month: "May",
+              newEnrollments: "1",
+              scheduledMeetings: "1",
+              children: [
+                { year: "2022", quarter: "Q1", month: "May", day: "2", newEnrollments: "1", scheduledMeetings: "1" },
+              ],
+            },
+          ],
+        },
+        {
+          year: "2022",
+          quarter: "Q2",
+          newEnrollments: "1",
+          scheduledMeetings: "1",
+          children: [
+            {
+              year: "2022",
+              quarter: "Q2",
+              month: "June",
+              newEnrollments: "1",
+              scheduledMeetings: "1",
+              children: [
+                { year: "2022", quarter: "Q2", month: "June", day: "5", newEnrollments: "1", scheduledMeetings: "1" },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ]
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        expandedControl={{
+          value: { "0": true, "0.0": true, "0.0.0": true, "0.0.1": true, "0.1": true, "0.1.0": true },
+          onChange: () => {},
+        }}
+        groupSeparators
+        tableData={data}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const dayRow = (day) => [...kit.querySelectorAll("tbody tr.depth-sub-row-3")].find((row) =>
+    row.querySelector("td")?.textContent.trim() === day
+  )
+
+  // One stroke per row, inset to the outermost group it closes
+  expect(dayRow("15")).not.toHaveClass("group-separator-row")
+  // Closes January → January's trail
+  expect(dayRow("25")).toHaveStyle({ "--group-separator-inset": "3.5em" })
+  // Closes May + Q1 → Q1's trail
+  expect(dayRow("2")).toHaveStyle({ "--group-separator-inset": "2.25em" })
+  // Closes June + Q2 + 2022 → full-bleed
+  expect(dayRow("5")).toHaveStyle({ "--group-separator-inset": "0em" })
+})
+
+test("groupSeparators insets Q1 closer to the Q1 label, not the year gutter", () => {
+  const data = [
+    {
+      year: "2022",
+      newEnrollments: "25",
+      scheduledMeetings: "1",
+      children: [
+        {
+          year: "2022",
+          quarter: "Q1",
+          newEnrollments: "12",
+          scheduledMeetings: "1",
+          children: [
+            { year: "2022", quarter: "Q1", month: "January", newEnrollments: "7", scheduledMeetings: "1" },
+            { year: "2022", quarter: "Q1", month: "May", newEnrollments: "5", scheduledMeetings: "1" },
+          ],
+        },
+        {
+          year: "2022",
+          quarter: "Q2",
+          newEnrollments: "13",
+          scheduledMeetings: "1",
+        },
+      ],
+    },
+  ]
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        expandedControl={{ value: { "0": true, "0.0": true }, onChange: () => {} }}
+        groupSeparators
+        tableData={data}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const mayRow = [...kit.querySelectorAll("tbody tr")].find((row) =>
+    row.classList.contains("group-separator-row") && row.textContent.includes("May")
+  )
+  const q2Row = [...kit.querySelectorAll("tbody tr")].find((row) =>
+    row.classList.contains("group-separator-row") && row.textContent.includes("Q2")
+  )
+  // Q1 closer → deepest trail on May (depth 2) = 2.25em; year closer → 0 (full-bleed)
+  expect(mayRow).toHaveStyle({ "--group-separator-inset": "2.25em" })
+  expect(q2Row).toHaveStyle({ "--group-separator-inset": "0em" })
+})
+
+test("groupSeparators marks last siblings in pinned nested rows", async () => {
+  const data = [
+    {
+      id: "y1",
+      year: "2021",
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      children: [
+        {
+          id: "q1",
+          year: "2021",
+          quarter: "Q1",
+          newEnrollments: "5",
+          scheduledMeetings: "2",
+          children: [
+            {
+              id: "jan",
+              year: "2021",
+              quarter: "Q1",
+              month: "January",
+              newEnrollments: "2",
+              scheduledMeetings: "1",
+            },
+            {
+              id: "feb",
+              year: "2021",
+              quarter: "Q1",
+              month: "February",
+              newEnrollments: "3",
+              scheduledMeetings: "1",
+            },
+          ],
+        },
+        {
+          id: "q2",
+          year: "2021",
+          quarter: "Q2",
+          newEnrollments: "6",
+          scheduledMeetings: "3",
+          children: [
+            {
+              id: "apr",
+              year: "2021",
+              quarter: "Q2",
+              month: "April",
+              newEnrollments: "3",
+              scheduledMeetings: "1",
+            },
+            {
+              id: "may",
+              year: "2021",
+              quarter: "Q2",
+              month: "May",
+              newEnrollments: "3",
+              scheduledMeetings: "2",
+            },
+          ],
+        },
+      ],
+    },
+  ]
+
+  const PinnedGroupSeparators = () => {
+    const [pinned, setPinned] = useState({ top: ["y1"] })
+    return (
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          data={{ testid: testId }}
+          expandedControl={{ value: { y1: true, q1: true, q2: true }, onChange: () => {} }}
+          groupSeparators
+          pinnedRows={{ value: pinned, onChange: setPinned }}
+          tableData={data}
+      />
+    )
+  }
+
+  render(<PinnedGroupSeparators />)
+
+  const kit = screen.getByTestId(testId)
+  await waitFor(() => {
+    const separatorRows = [...kit.querySelectorAll("tbody tr.pinned-row.group-separator-row")]
+    const separatorText = separatorRows.map((row) => row.textContent)
+
+    expect(separatorRows.length).toBe(2)
+    expect(separatorText.some((text) => text.includes("February"))).toBe(true)
+    expect(separatorText.some((text) => text.includes("May"))).toBe(true)
+  })
+})
+
+test("groupSeparators keeps separator on expanded last sibling with empty children (inlineRowLoading)", () => {
+  const data = [
+    {
+      year: "2021",
+      newEnrollments: "10",
+      scheduledMeetings: "1",
+      children: [
+        {
+          year: "2021",
+          quarter: "Q1",
+          newEnrollments: "5",
+          scheduledMeetings: "1",
+          children: [],
+        },
+        {
+          year: "2021",
+          quarter: "Q2",
+          newEnrollments: "5",
+          scheduledMeetings: "1",
+          children: [],
+        },
+      ],
+    },
+  ]
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        expandedControl={{ value: { "0": true, "0.1": true }, onChange: () => {} }}
+        groupSeparators
+        inlineRowLoading
+        tableData={data}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const q2Row = [...kit.querySelectorAll("tbody tr")].find((row) =>
+    row.classList.contains("depth-sub-row-1") && row.textContent.includes("Q2")
+  )
+
+  expect(q2Row).toHaveClass("group-separator-row")
+})
+
+test("groupSeparators follows sorted visible sibling order", async () => {
+  const data = [
+    {
+      year: "2021",
+      newEnrollments: "10",
+      scheduledMeetings: "1",
+      children: [
+        {
+          year: "2021",
+          quarter: "Q1",
+          newEnrollments: "30",
+          scheduledMeetings: "1",
+        },
+        {
+          year: "2021",
+          quarter: "Q2",
+          newEnrollments: "10",
+          scheduledMeetings: "1",
+        },
+      ],
+    },
+  ]
+
+  const sortColumnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      enableSort: true,
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ]
+
+  render(
+    <AdvancedTable
+        columnDefinitions={sortColumnDefinitions}
+        data={{ testid: testId }}
+        expandedControl={{ value: { "0": true }, onChange: () => {} }}
+        groupSeparators
+        tableData={data}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  // Original data order: Q2 is last sibling → separator on Q2
+  expect(
+    [...kit.querySelectorAll("tbody tr.group-separator-row")].some((row) =>
+      row.textContent.includes("Q2")
+    )
+  ).toBe(true)
+
+  const sortButton = kit.querySelector(".header-sort-secondary-columns")
+  expect(sortButton).toBeInTheDocument()
+  // sortDescFirst: first click is desc (Q1=30, Q2=10) — Q2 still last.
+  // Second click is asc (Q2=10, Q1=30) — separator should move to Q1.
+  sortButton.click()
+  sortButton.click()
+
+  await waitFor(() => {
+    const separatorRows = [...kit.querySelectorAll("tbody tr.group-separator-row")]
+    expect(separatorRows.some((row) => row.textContent.includes("Q1"))).toBe(true)
+    expect(separatorRows.some((row) => row.textContent.includes("Q2"))).toBe(false)
+  })
+})
+
+
+test("groupSeparators insets follow the trail formula past 3 levels", () => {
+  const rowsAt = (depths) => depths.map((depth, index) => ({ id: `${index}`, depth }))
+
+  // Depth-5 leaf closing only its depth-4 parent → 5th trail (5 + 4 * 0.25)
+  expect(buildGroupSeparatorInsets(rowsAt([0, 1, 2, 3, 4, 5, 4])).get("5")).toBe(6)
+  // Depth-5 leaf closing up to the depth-1 group → 2nd trail
+  expect(buildGroupSeparatorInsets(rowsAt([0, 1, 2, 3, 4, 5, 1])).get("5")).toBe(2.25)
+  // Depth-5 leaf closing the year → full-bleed
+  expect(buildGroupSeparatorInsets(rowsAt([0, 1, 2, 3, 4, 5, 0])).get("5")).toBe(0)
+})