playbook_ui 18.1.0 → 18.2.0.pre.alpha.PLAY327120425

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4989243cbc32bb750918ef297467d634a7db628b51bbf211895e293f3d14feeb
-  data.tar.gz: ee6a1cad85e386cd21a8d584c8715b97070f7a69b9ccb5cdb388f031cc1b7e81
+  metadata.gz: f8f8593b69d966ab95ba226e2bf230f5e4bd7bbe494268b72b60b03b1ff3d375
+  data.tar.gz: 06343cb4c8a1ff008ded342f8fcbac14ccbd1974112fb45f0910faca46321e38
 SHA512:
-  metadata.gz: 9823736cae61fe883d0210734d6c12163fae9a4d5e5b1f17ed8da990b5dbad5e816fc49374b672fe04bb3f1e6fc9b7c5704faf39f7119c170cad30954a6393f3
-  data.tar.gz: c72caccadf7ab6a8f10fd9ee1197b06c1fba46a684f893b4f5d16525b91e6a69358aa51e1301fd7b9465127b34ac00c678263ed20258b2f90cc603443ea41243
+  metadata.gz: a272d7f15e19115ed50a3babf800d70cd304715653a60d3618568927b549b193ee81f41465051c2d62f38b9af23e5a2dc88bc83981cba32329131cec39f49b31
+  data.tar.gz: f927dcb0b36028b00cb12925a52b62f11d8a2bf4192d55b909f8b6f9545a8a05c54ef11ba7942e75c1547882a1802870a71b8d5c709ad85527e3a669a50c4221

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.scss

@@ -491,12 +491,10 @@
     }
   }
 
-  // First column separator/border
+  // First data column separator/border (Year when no separate checkbox column)
   .table-header-cells:first-child,
-  .table-header-cells-custom:first-child,
-  td:first-child,
-  .pb_table_td:first-child,
-  .checkbox-cell.checkbox-cell-header:first-child {
+  td:first-child:not(.checkbox-cell),
+  .pb_table_td:first-child:not(.checkbox-cell) {
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
@@ -504,6 +502,14 @@
     box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
+  // Separate checkbox column (Rails + React): separator on the first data column
+  .table-header-cells-custom + th[colspan="1"],
+  .table-header-cells-custom + .table-header-cells[colspan="1"],
+  td.checkbox-cell + td,
+  td.checkbox-cell + .pb_table_td {
+    box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+  }
+
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -715,6 +721,12 @@
         box-shadow: 0 0 0 0 !important;
       }
 
+      // Re-apply after the nth-child(2) clear above (checkbox column layouts)
+      td.checkbox-cell + td,
+      td.checkbox-cell + .pb_table_td {
+        box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+      }
+
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,
@@ -816,10 +828,15 @@
     }
 
     .table-header-cells:first-child,
-    .table-header-cells-custom:first-child,
-    td:first-child,
-    .pb_table_td:first-child,
-    .checkbox-cell.checkbox-cell-header:first-child {
+    td:first-child:not(.checkbox-cell),
+    .pb_table_td:first-child:not(.checkbox-cell) {
+      box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+    }
+
+    .table-header-cells-custom + th[colspan="1"],
+    .table-header-cells-custom + .table-header-cells[colspan="1"],
+    td.checkbox-cell + td,
+    td.checkbox-cell + .pb_table_td {
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 

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_advanced_table/table_header.html.erb

@@ -1,14 +1,19 @@
 <%= pb_content_tag(:thead) do %>
   <% object.header_rows.each_with_index do |header_row, row_index| %>
+    <% is_lowest_header_row = row_index == header_rows.size - 1 %>
     <%= pb_rails("table/table_row") do %>
-      <% if row_index == 0 && object.selectable_rows && object.enable_toggle_expansion == "none" %>
-        <%= object.render_select_all_header %>
+      <% if object.selectable_rows && object.enable_toggle_expansion == "none" %>
+        <% if is_lowest_header_row %>
+          <%= object.render_select_all_header %>
+        <% else %>
+          <%= object.render_select_all_header_spacer %>
+        <% end %>
       <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_component = object.header_component_info(cell, cell_index, row_index) %>
         <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
           <%= pb_rails("flex", props: { align: "center", justify: object.header_flex_justify(cell, cell_index, row_index), text_align: object.header_flex_text_align(cell) }) do %>
-            <% if cell_index.zero? && row_index === header_rows.size - 1 %>
+            <% if cell_index.zero? && is_lowest_header_row %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
                   <%= object.render_select_all_checkbox %>

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

@@ -58,13 +58,8 @@ module Playbook
       # Selectable Rows No Subrows - checkboxes in their own first cell
       def render_select_all_header
         if selectable_rows
-          additional_classes = []
-          additional_classes << "table-header-cells-custom"
-          additional_classes << "header-cells-with-actions" if show_actions_bar
-          additional_classes << "checkbox-cell-header"
-          additional_classes << "pinned-left" if responsive == "scroll"
           pb_rails("table/table_header", props: {
-                     classname: additional_classes.join(" "),
+                     classname: select_all_header_classname,
                    }) do
             pb_rails("checkbox", props: {
                        id: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
@@ -76,6 +71,15 @@ module Playbook
         end
       end
 
+      # Empty checkbox-column cell for upper multi-header rows so columns stay aligned
+      def render_select_all_header_spacer
+        if selectable_rows
+          pb_rails("table/table_header", props: {
+                     classname: select_all_header_classname,
+                   })
+        end
+      end
+
       # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
       def render_select_all_checkbox
         if selectable_rows
@@ -212,6 +216,15 @@ module Playbook
 
     private
 
+      def select_all_header_classname
+        additional_classes = []
+        additional_classes << "table-header-cells-custom"
+        additional_classes << "header-cells-with-actions" if show_actions_bar
+        additional_classes << "checkbox-cell-header"
+        additional_classes << "pinned-left" if responsive == "scroll"
+        additional_classes.join(" ")
+      end
+
       def header_layout_styles(cell)
         original_def = find_original_column_def_for_cell(cell)
         return {} unless original_def

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

@@ -189,7 +189,7 @@ module Playbook
 
           pb_rails("checkbox", props: {
                      id: "#{prefix}select-row-#{row_id || row.object_id}",
-                     indeterminate_main: !last_row,
+                     indeterminate_main: row_children.present?,
                      indeterminate_main_labels: ["", ""],
                      indeterminate_parent: indeterminate_parent,
                      name: "#{prefix}select-row-#{row_id || row.object_id}",

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 type BackgroundColors = 'gradient' |
   'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
@@ -35,7 +36,7 @@ type BackgroundProps = {
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
   transition?: 'fade' | 'blur' | 'scale',
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 type ResponsiveProp<T> = T | {
   xs?: T,
@@ -166,6 +167,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         alt={alt}
         className={classes}
         id={id}

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

@@ -221,6 +221,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Background } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_caption/_caption.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 type CaptionProps = {
   aria?: {[key: string]: string},
@@ -15,7 +16,7 @@ type CaptionProps = {
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
   text?: string,
   variant?: null | "link",
-} & GlobalProps;
+} & GlobalProps & GlobalEventProps;
 
 const Caption = (props: CaptionProps): React.ReactElement => {
   if (props.variant) deprecatedProps() //variant prop is deprecated, use color instead
@@ -62,6 +63,7 @@ const Caption = (props: CaptionProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={css}
         id={id}
     >

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

@@ -78,6 +78,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Caption } from 'playbook-ui'",