playbook_ui 18.2.0.pre.rc.2 → 18.2.0

data/app/pb_kits/playbook/pb_table/utilities/stickyColumns.test.ts

@@ -0,0 +1,266 @@
+import { applyStickyColumns } from "./stickyColumns"
+
+const stubWidth = (element: HTMLElement, width: number) => {
+  Object.defineProperty(element, "offsetWidth", {
+    configurable: true,
+    get: () => Math.floor(width),
+  })
+  element.getBoundingClientRect = () =>
+    ({
+      width,
+      height: 40,
+      top: 0,
+      left: 0,
+      bottom: 40,
+      right: width,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    } as DOMRect)
+}
+
+const buildStickyTable = () => {
+  document.body.innerHTML = `
+    <table class="pb_table">
+      <thead>
+        <tr>
+          <th data-sticky-id="1">Col 1</th>
+          <th data-sticky-id="2">Col 2</th>
+          <th data-sticky-id="3">Col 3</th>
+          <th>Col 4</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td data-sticky-id="1">A</td>
+          <td data-sticky-id="2">B</td>
+          <td data-sticky-id="3">C</td>
+          <td>D</td>
+        </tr>
+      </tbody>
+    </table>
+  `
+
+  return document.querySelector("table") as HTMLTableElement
+}
+
+describe("applyStickyColumns", () => {
+  afterEach(() => {
+    document.body.innerHTML = ""
+  })
+
+  test("scopes sticky left offsets to the given table", () => {
+    document.body.innerHTML = `
+      <table id="other">
+        <thead><tr><th data-sticky-id="1">Other</th></tr></thead>
+      </table>
+      <table id="target" class="pb_table">
+        <thead>
+          <tr>
+            <th data-sticky-id="1">Col 1</th>
+            <th data-sticky-id="2">Col 2</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td data-sticky-id="1">A</td>
+            <td data-sticky-id="2">B</td>
+          </tr>
+        </tbody>
+      </table>
+    `
+
+    const target = document.getElementById("target") as HTMLTableElement
+    const otherHeader = document.querySelector(
+      "#other th[data-sticky-id='1']"
+    ) as HTMLElement
+    const targetHeader1 = target.querySelector(
+      "th[data-sticky-id='1']"
+    ) as HTMLElement
+    const targetHeader2 = target.querySelector(
+      "th[data-sticky-id='2']"
+    ) as HTMLElement
+
+    stubWidth(targetHeader1, 100)
+    stubWidth(targetHeader2, 80)
+    stubWidth(otherHeader, 250)
+
+    applyStickyColumns(target, ["1", "2"], "left")
+
+    expect(otherHeader.classList.contains("sticky")).toBe(false)
+    expect(otherHeader.style.left).toBe("")
+    expect(targetHeader1.style.left).toBe("0px")
+    expect(targetHeader2.style.left).toBe("100px")
+  })
+
+  test("uses fractional widths so sticky left columns stay flush", () => {
+    const table = buildStickyTable()
+    const header1 = table.querySelector(
+      "th[data-sticky-id='1']"
+    ) as HTMLElement
+    const header2 = table.querySelector(
+      "th[data-sticky-id='2']"
+    ) as HTMLElement
+    const header3 = table.querySelector(
+      "th[data-sticky-id='3']"
+    ) as HTMLElement
+    const cell2 = table.querySelector(
+      "td[data-sticky-id='2']"
+    ) as HTMLElement
+
+    stubWidth(header1, 100.4)
+    stubWidth(header2, 80.2)
+    stubWidth(header3, 60)
+
+    applyStickyColumns(table, ["1", "2", "3"], "left")
+
+    expect(header1.style.left).toBe("0px")
+    expect(header1.classList.contains("with-border-right")).toBe(true)
+    // Must not use integer offsetWidth (100) or a gap appears at some zooms
+    expect(header2.style.left).toBe("100.4px")
+    expect(header2.classList.contains("with-border-right")).toBe(true)
+    expect(cell2.style.left).toBe(header2.style.left)
+    expect(header3.style.left).toBe("180.6px")
+    expect(header3.classList.contains("sticky-left-shadow")).toBe(true)
+    expect(header3.classList.contains("with-border-right")).toBe(false)
+  })
+
+  test("applies sticky right offsets from the trailing edge", () => {
+    const table = buildStickyTable()
+    const header1 = table.querySelector(
+      "th[data-sticky-id='1']"
+    ) as HTMLElement
+    const header2 = table.querySelector(
+      "th[data-sticky-id='2']"
+    ) as HTMLElement
+    const header3 = table.querySelector(
+      "th[data-sticky-id='3']"
+    ) as HTMLElement
+
+    stubWidth(header1, 60)
+    stubWidth(header2, 80)
+    stubWidth(header3, 100)
+
+    applyStickyColumns(table, ["1", "2", "3"], "right")
+
+    // Right sticky walks ids in reverse: 3 at right:0, then 2, then 1 with shadow
+    expect(header3.style.right).toBe("0px")
+    expect(header3.classList.contains("with-border-left")).toBe(true)
+    expect(header2.style.right).toBe("100px")
+    expect(header1.style.right).toBe("180px")
+    expect(header1.classList.contains("sticky-right-shadow")).toBe(true)
+  })
+
+  test("does not mutate the column id array when applying right sticky", () => {
+    const table = buildStickyTable()
+    const ids = ["1", "2", "3"]
+    const header1 = table.querySelector(
+      "th[data-sticky-id='1']"
+    ) as HTMLElement
+    const header2 = table.querySelector(
+      "th[data-sticky-id='2']"
+    ) as HTMLElement
+    const header3 = table.querySelector(
+      "th[data-sticky-id='3']"
+    ) as HTMLElement
+
+    stubWidth(header1, 60)
+    stubWidth(header2, 80)
+    stubWidth(header3, 100)
+
+    applyStickyColumns(table, ids, "right")
+
+    expect(ids).toEqual(["1", "2", "3"])
+  })
+
+  test("pins every header row cell that shares a sticky id", () => {
+    document.body.innerHTML = `
+      <table class="pb_table">
+        <thead>
+          <tr>
+            <th data-sticky-id="1"></th>
+            <th colspan="2">Group</th>
+          </tr>
+          <tr>
+            <th data-sticky-id="1">Territory</th>
+            <th>Shadow</th>
+            <th>Delta</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td data-sticky-id="1">East</td>
+            <td>1</td>
+            <td>2</td>
+          </tr>
+        </tbody>
+      </table>
+    `
+
+    const table = document.querySelector("table") as HTMLTableElement
+    const headers = table.querySelectorAll(
+      "th[data-sticky-id='1']"
+    ) as NodeListOf<HTMLElement>
+    const cell = table.querySelector(
+      "td[data-sticky-id='1']"
+    ) as HTMLElement
+
+    // First header row cell is empty/narrow; second row is wider — use max width
+    stubWidth(headers[0], 40)
+    stubWidth(headers[1], 120)
+    stubWidth(cell, 120)
+
+    applyStickyColumns(table, ["1"], "left")
+
+    expect(headers[0].classList.contains("sticky")).toBe(true)
+    expect(headers[0].style.left).toBe("0px")
+    expect(headers[0].classList.contains("sticky-left-shadow")).toBe(true)
+    expect(headers[1].classList.contains("sticky")).toBe(true)
+    expect(headers[1].style.left).toBe("0px")
+    expect(headers[1].classList.contains("sticky-left-shadow")).toBe(true)
+    expect(cell.style.left).toBe("0px")
+  })
+
+  test("sets top on sticky header cells when sticky-header is enabled", () => {
+    document.body.innerHTML = `
+      <table class="pb_table sticky-header sticky-left-column">
+        <thead>
+          <tr>
+            <th data-sticky-id="1">Group</th>
+            <th>Other</th>
+          </tr>
+          <tr>
+            <th data-sticky-id="1">Sub</th>
+            <th>Col</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td data-sticky-id="1">A</td>
+            <td>B</td>
+          </tr>
+        </tbody>
+      </table>
+    `
+
+    const table = document.querySelector("table") as HTMLTableElement
+    const headers = table.querySelectorAll(
+      "th[data-sticky-id='1']"
+    ) as NodeListOf<HTMLElement>
+    const firstRow = table.querySelector("thead tr") as HTMLElement
+
+    Object.defineProperty(firstRow, "offsetHeight", {
+      configurable: true,
+      get: () => 48,
+    })
+    stubWidth(headers[0], 100)
+    stubWidth(headers[1], 100)
+
+    applyStickyColumns(table, ["1"], "left")
+
+    expect(headers[0].style.top).toBe("0px")
+    expect(headers[1].style.top).toBe("48px")
+    expect(headers[0].style.left).toBe("0px")
+    expect(headers[1].style.left).toBe("0px")
+  })
+})

data/app/pb_kits/playbook/pb_table/utilities/stickyColumns.ts

@@ -0,0 +1,145 @@
+type StickySide = "left" | "right"
+
+/**
+ * Prefer the more precise layout width. Fractional values avoid integer
+ * offsetWidth rounding that leaves gaps between sticky columns at some
+ * zoom/viewport sizes.
+ */
+const measureStickyWidth = (element: HTMLElement): number => {
+  const rectWidth = element.getBoundingClientRect().width
+  return rectWidth > 0 ? rectWidth : element.offsetWidth
+}
+
+const formatStickyOffset = (offset: number): string =>
+  `${parseFloat(offset.toFixed(3))}px`
+
+const applyStickySideClasses = (
+  element: HTMLElement,
+  isLastColumn: boolean,
+  borderClass: string,
+  shadowClass: string
+): void => {
+  if (!isLastColumn) {
+    element.classList.add(borderClass)
+    element.classList.remove(shadowClass)
+  } else {
+    element.classList.remove(borderClass)
+    element.classList.add(shadowClass)
+  }
+}
+
+const stickyHeaderSelector = (colId: string): string =>
+  `th[data-sticky-id="${colId}"], .pb_table_th[data-sticky-id="${colId}"]`
+
+const stickyCellSelector = (colId: string): string =>
+  `td[data-sticky-id="${colId}"], .pb_table_td[data-sticky-id="${colId}"]`
+
+/**
+ * Vertical offset within thead so sticky column header cells keep sticking
+ * with sticky-header on multi-row theads (row 2+ need top: row1Height, etc.).
+ */
+const stickyHeaderRowTop = (header: HTMLElement): number => {
+  const row = header.closest("tr, .pb_table_tr") as HTMLElement | null
+  if (!row) return 0
+
+  let top = 0
+  let previous = row.previousElementSibling as HTMLElement | null
+  while (previous) {
+    if (previous instanceof HTMLElement) {
+      top += previous.offsetHeight
+    }
+    previous = previous.previousElementSibling as HTMLElement | null
+  }
+  return top
+}
+
+const applyStickyHeaderTop = (
+  table: Element,
+  headerElement: HTMLElement
+): void => {
+  if (!table.classList.contains("sticky-header")) return
+  headerElement.style.top = formatStickyOffset(stickyHeaderRowTop(headerElement))
+}
+
+export const applyStickyColumns = (
+  table: Element,
+  columnIds: string[],
+  side: StickySide
+): void => {
+  if (!columnIds.length) return
+
+  const orderedIds = side === "right" ? [...columnIds].reverse() : columnIds
+  const borderClass = side === "left" ? "with-border-right" : "with-border-left"
+  const shadowClass = side === "left" ? "sticky-left-shadow" : "sticky-right-shadow"
+
+  let accumulatedWidth = 0
+
+  orderedIds.forEach((colId, index) => {
+    const isLastColumn = index === orderedIds.length - 1
+    // Multi-row theads can repeat the same data-sticky-id on each header row —
+    // pin every matching th, not only the first.
+    const headers = table.querySelectorAll(stickyHeaderSelector(colId))
+    const cells = table.querySelectorAll(stickyCellSelector(colId))
+
+    if (!headers.length) return
+
+    const offset = accumulatedWidth
+    const offsetValue = formatStickyOffset(offset)
+    let columnWidth = 0
+
+    headers.forEach((header) => {
+      const headerElement = header as HTMLElement
+      headerElement.classList.add("sticky")
+      headerElement.style[side] = offsetValue
+      applyStickyHeaderTop(table, headerElement)
+      applyStickySideClasses(headerElement, isLastColumn, borderClass, shadowClass)
+      columnWidth = Math.max(columnWidth, measureStickyWidth(headerElement))
+    })
+
+    accumulatedWidth = offset + columnWidth
+
+    cells.forEach((cell) => {
+      const cellElement = cell as HTMLElement
+      cellElement.classList.add("sticky")
+      cellElement.style[side] = offsetValue
+      applyStickySideClasses(cellElement, isLastColumn, borderClass, shadowClass)
+    })
+  })
+
+  // Corner cells may use .sticky without data-sticky-id (e.g. colspan spanning
+  // multiple sticky columns). Still need top when sticky-header is on.
+  if (table.classList.contains("sticky-header")) {
+    table
+      .querySelectorAll("thead .sticky, .pb_table_thead .sticky")
+      .forEach((header) => {
+        applyStickyHeaderTop(table, header as HTMLElement)
+      })
+  }
+}
+
+/** Double rAF + fonts.ready so offsets are measured after layout settles. */
+export const scheduleStickyColumns = (apply: () => void): (() => void) => {
+  let cancelled = false
+  let frameId = 0
+
+  const run = () => {
+    if (!cancelled) apply()
+  }
+
+  frameId = requestAnimationFrame(() => {
+    run()
+    frameId = requestAnimationFrame(run)
+  })
+
+  const fonts = (
+    document as Document & { fonts?: { ready?: Promise<unknown> } }
+  ).fonts
+  if (fonts?.ready) {
+    fonts.ready.then(run).catch((): undefined => undefined)
+  }
+
+  return () => {
+    cancelled = true
+    cancelAnimationFrame(frameId)
+  }
+}

data/app/pb_kits/playbook/pb_title_count/_title_count.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -19,7 +20,7 @@ type TitleCountProps = {
   id?: string,
   title?: string,
   size?: "lg" | "sm",
-};
+} & GlobalEventProps;
 
 const TitleCount = (props: TitleCountProps): React.ReactElement => {
   const {
@@ -50,6 +51,7 @@ const TitleCount = (props: TitleCountProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={css}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
@@ -16,7 +17,7 @@ type TitleDetailProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   title: string,
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
   const {
@@ -40,6 +41,7 @@ const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classnames(pbCss, globalProps(props), className)}
         id={id}
     >

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

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