@operato/data-grist 10.29.5 → 10.29.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.29.5",
+  "version": "10.29.7",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "type": "module",
@@ -116,5 +116,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "0995f71d6a9678da116781ec38ae80a253ab8b3e"
+  "gitHead": "9e14db8a889f2b59cc0ad9018861b14cf9490ce1"
 }

package/test/accessible-name.test.ts

@@ -348,8 +348,9 @@ describe('grouped header spans two rows', () => {
  * wrapper. Two things then depend on this structure:
  *
  * ```
- * column layout      the host is a flex column. A wrapper that generates a box swallows header
- *                    and body into one flex item, and the body's flex: 1 stops working
+ * column layout      the host is a flex column. The wrapper is itself a flex column (it is the one
+ *                    scroller that header and body share), so the body still takes the height
+ *                    left under the header
  * sibling selector   "show the settings button on header hover" is an adjacent-sibling rule, so
  *                    the button has to sit directly after the wrapper
  * ```
@@ -378,7 +379,7 @@ describe('grid wrapper stays out of the layout', () => {
     expect(grid.nextElementSibling, 'adjacent-sibling rule no longer holds').to.equal(setting)
   })
 
-  it('leaves header and body as flex items of the host', async () => {
+  it('lays header and body out as a column that fills the host', async () => {
     const el: any = await fixture(html`
       <div style="height: 300px; display: flex">
         <ox-grid
@@ -396,7 +397,8 @@ describe('grid wrapper stays out of the layout', () => {
     const header = grid.renderRoot.querySelector('ox-grid-header') as HTMLElement
     const body = grid.renderRoot.querySelector('ox-grid-body') as HTMLElement
 
-    expect(getComputedStyle(wrapper).display).to.equal('contents')
+    expect(getComputedStyle(wrapper).display).to.equal('flex')
+    expect(getComputedStyle(wrapper).flexDirection).to.equal('column')
 
     /* The body takes the remaining height; a wrapper with a box shrinks it to header height. */
     expect(body.offsetHeight, 'body does not take the remaining height').to.be.greaterThan(100)

package/test/field-contains-content.test.ts

@@ -0,0 +1,125 @@
+/* Elements are compared by presence, not by value: a failing element comparison makes chai render the DOM and hang the runner. */
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/data-grist.js'
+
+/**
+ * A cell keeps what its renderer draws inside its column.
+ *
+ * `FieldRenderer` may return a plain string, and the cell rendered it as a bare text node. Only
+ * `span` and `pre` were clipped, so a long string — or an `<a>` — spilled past its track. The body's
+ * scrollWidth grew past the header's (the header is just the sum of the column widths): at the far
+ * right the header stopped while the body kept scrolling, and stray text showed where there were no
+ * columns. Header and body now share one scroller, so the overflow shows as the grid scrolling past
+ * its last column instead.
+ *
+ *   [measured] operato-office contract list — body 5503 / header 3830 (2026-10-04)
+ *
+ * The long cells sit in the last column, because only content that runs past the last track widens
+ * the body; in a middle column the next cell paints over it and the defect hides.
+ */
+
+const LONG = '긴 글자가 열 너비를 넘는다 '.repeat(40)
+
+const settle = (ms = 150) => new Promise(resolve => setTimeout(resolve, ms))
+
+type Root = HTMLElement & { renderRoot: ShadowRoot; updateComplete: Promise<unknown> }
+
+async function grid(renderer: (value: unknown) => unknown) {
+  const config = {
+    columns: [
+      { type: 'string', name: 'id', hidden: true },
+      { type: 'string', name: 'name', header: 'name', width: 120 },
+      { type: 'string', name: 'note', header: 'note', width: 160, record: { renderer } }
+    ],
+    pagination: { pages: [20] }
+  }
+
+  const el = (await fixture(html`
+    <ox-grist
+      style="width: 400px; height: 300px"
+      mode="GRID"
+      .config=${config}
+      .fetchHandler=${async () => ({
+        total: 2,
+        records: [
+          { id: '1', name: 'a', note: LONG },
+          { id: '2', name: 'b', note: LONG }
+        ]
+      })}
+    ></ox-grist>
+  `)) as Root & { fetch(): Promise<void> }
+
+  await el.fetch()
+  await settle()
+  await el.updateComplete
+
+  const grist = el.renderRoot.querySelector('#grist') as Root
+  const scroller = grist.renderRoot.querySelector('div[grid]') as HTMLElement
+  const header = grist.renderRoot.querySelector('ox-grid-header') as Root
+  const body = grist.renderRoot.querySelector('ox-grid-body') as Root
+  await body.updateComplete
+
+  const notes = Array.from(body.renderRoot.querySelectorAll('ox-grid-field')).filter(
+    f => (f as any).column?.name === 'note'
+  ) as Root[]
+
+  return { scroller, header, body, notes }
+}
+
+describe('a grid cell keeps its content inside its column', () => {
+  /* Resizing the grid body inside a fixture trips Chrome's benign "ResizeObserver loop" error. */
+  const ignoreResizeLoop = (e: ErrorEvent) => {
+    if (String(e.message).includes('ResizeObserver loop')) {
+      e.stopImmediatePropagation()
+      e.preventDefault()
+    }
+  }
+  let previousOnError: OnErrorEventHandler = null
+  before(() => {
+    window.addEventListener('error', ignoreResizeLoop, true)
+    previousOnError = window.onerror
+    window.onerror = (message, ...rest) =>
+      String(message).includes('ResizeObserver loop') ? true : previousOnError?.call(window, message, ...rest)
+  })
+  after(() => {
+    window.removeEventListener('error', ignoreResizeLoop, true)
+    window.onerror = previousOnError
+  })
+
+  const renderers: [string, (value: unknown) => unknown][] = [
+    ['a plain string', value => String(value)],
+    ['an <a>', value => html`<a href="#">${value}</a>`]
+  ]
+
+  for (const [kind, renderer] of renderers) {
+    it(`${kind}: the grid scrolls exactly as far as its columns reach`, async () => {
+      const { scroller, header, body, notes } = await grid(renderer)
+
+      expect(notes.length, 'the long cells must be drawn, or this measures nothing').to.be.at.least(2)
+      expect(body.offsetWidth, 'header and body span the same width').to.equal(header.offsetWidth)
+      expect(scroller.scrollWidth, 'content past the last column scrolls on into empty space').to.equal(
+        header.offsetWidth
+      )
+    })
+
+    it(`${kind}: the cell is as wide as its column and clips what does not fit`, async () => {
+      const { notes } = await grid(renderer)
+
+      for (const note of notes) {
+        expect(Math.round(note.getBoundingClientRect().width)).to.equal(160)
+        expect(getComputedStyle(note).overflowX).to.equal('hidden')
+      }
+    })
+  }
+
+  it('a plain string still ends in an ellipsis', async () => {
+    const { notes } = await grid(value => String(value))
+
+    const text = notes[0].renderRoot.querySelector('span') as HTMLElement | null
+    expect(!!text, 'the string sits in a box that can take text-overflow').to.equal(true)
+    expect(getComputedStyle(text!).textOverflow).to.equal('ellipsis')
+    expect(text!.clientWidth).to.be.lessThan(160)
+  })
+})

package/test/grid-single-scroller.test.ts

@@ -0,0 +1,150 @@
+/* Elements are compared by presence, not by value: a failing element comparison makes chai render the DOM and hang the runner. */
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/data-grist.js'
+
+/**
+ * Header and body move as one.
+ *
+ * The body used to be its own scroller, and the header a second scroller that copied the body's
+ * scrollLeft from its scroll event (and the other way round). Three things went wrong:
+ *
+ * ```
+ * gap      the compositor moves the body at once; the header only moves after the main thread
+ *          handles the event, so on a busy screen it trails by several frames
+ * shake    the sync ran both ways, so a late header event put the body back one frame
+ * the end  when the two scroll widths differ, the header stops while the body goes on
+ * ```
+ *
+ * Now the role=grid box is the only scroller. The header sticks to its top and the body does not
+ * scroll. Nothing copies a position, so nothing can trail or pull back.
+ */
+
+type Root = HTMLElement & { renderRoot: ShadowRoot; updateComplete: Promise<unknown> }
+
+const settle = (ms = 150) => new Promise(resolve => setTimeout(resolve, ms))
+
+async function grid() {
+  const columns: any[] = [
+    { type: 'gutter', gutterName: 'sequence' },
+    { type: 'string', name: 'id', hidden: true },
+    { type: 'string', name: 'code', header: 'code', width: 120, fixed: true }
+  ]
+  for (let i = 0; i < 12; i++) {
+    columns.push({ type: 'string', name: 'c' + i, header: 'col ' + i, width: 110 })
+  }
+
+  const records = Array.from({ length: 60 }, (_, r) => {
+    const record: any = { id: String(r), code: 'C-' + r }
+    for (let i = 0; i < 12; i++) record['c' + i] = `v${r}-${i}`
+    return record
+  })
+
+  const el = (await fixture(html`
+    <ox-grist
+      style="width: 600px; height: 320px"
+      mode="GRID"
+      .config=${{ columns, pagination: { pages: [100] } }}
+      .fetchHandler=${async () => ({ total: records.length, records })}
+    ></ox-grist>
+  `)) as Root & { fetch(): Promise<void> }
+
+  await el.fetch()
+  await settle()
+  await el.updateComplete
+
+  const grist = el.renderRoot.querySelector('#grist') as Root & { focused?: { row: number; column: number } }
+  const scroller = grist.renderRoot.querySelector('div[grid]') as HTMLElement
+  const header = grist.renderRoot.querySelector('ox-grid-header') as Root
+  const body = grist.renderRoot.querySelector('ox-grid-body') as Root
+  await body.updateComplete
+
+  return { grist, scroller, header, body }
+}
+
+/** The largest horizontal distance between a column's header cell and its cell in the first row. */
+function misalignment(header: Root, body: Root) {
+  const heads = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]
+  const row = body.renderRoot.querySelector('div[grid-row]') as HTMLElement
+  const cells = Array.from(row.querySelectorAll('ox-grid-field')) as HTMLElement[]
+  const n = Math.min(heads.length, cells.length)
+
+  let worst = 0
+  for (let i = 0; i < n; i++) {
+    worst = Math.max(worst, Math.abs(heads[i].getBoundingClientRect().left - cells[i].getBoundingClientRect().left))
+  }
+  return { n, worst }
+}
+
+describe('grid header and body share one scroller', () => {
+  /* Resizing the grid body inside a fixture trips Chrome's benign "ResizeObserver loop" error. */
+  const ignoreResizeLoop = (e: ErrorEvent) => {
+    if (String(e.message).includes('ResizeObserver loop')) {
+      e.stopImmediatePropagation()
+      e.preventDefault()
+    }
+  }
+  let previousOnError: OnErrorEventHandler = null
+  before(() => {
+    window.addEventListener('error', ignoreResizeLoop, true)
+    previousOnError = window.onerror
+    window.onerror = (message, ...rest) =>
+      String(message).includes('ResizeObserver loop') ? true : previousOnError?.call(window, message, ...rest)
+  })
+  after(() => {
+    window.removeEventListener('error', ignoreResizeLoop, true)
+    window.onerror = previousOnError
+  })
+
+  it('neither the header nor the body scrolls on its own', async () => {
+    const { scroller, header, body } = await grid()
+
+    expect(scroller.scrollWidth, 'the grid must overflow, or this measures nothing').to.be.greaterThan(
+      scroller.clientWidth
+    )
+    expect(getComputedStyle(body).overflowX).to.equal('visible')
+    expect(getComputedStyle(header).overflowX).to.equal('visible')
+    expect(header.offsetWidth, 'header and body span the same width').to.equal(body.offsetWidth)
+  })
+
+  for (const where of ['start', 'middle', 'end'] as const) {
+    it(`every column lines up with its header at the ${where}`, async () => {
+      const { scroller, header, body } = await grid()
+
+      const max = scroller.scrollWidth - scroller.clientWidth
+      scroller.scrollLeft = where === 'start' ? 0 : where === 'middle' ? Math.round(max / 2) : max
+      await settle(50)
+
+      const { n, worst } = misalignment(header, body)
+      expect(n, 'columns must be drawn, or this measures nothing').to.be.greaterThan(10)
+      expect(worst).to.equal(0)
+    })
+  }
+
+  it('the header stays on top when the rows scroll', async () => {
+    const { scroller, header } = await grid()
+
+    scroller.scrollTop = 600
+    await settle(50)
+
+    expect(scroller.scrollTop, 'the rows must scroll, or this measures nothing').to.be.greaterThan(0)
+    expect(header.getBoundingClientRect().top).to.equal(scroller.getBoundingClientRect().top)
+  })
+
+  it('a focused row that was under the header is brought out below it', async () => {
+    const { grist, scroller, header, body } = await grid()
+
+    scroller.scrollTop = 600
+    await settle(50)
+
+    grist.focused = { row: 2, column: 3 }
+    await grist.updateComplete
+    await body.updateComplete
+    await settle(50)
+
+    const focused = body.renderRoot.querySelector('ox-grid-field[focused]') as HTMLElement
+    expect(!!focused, 'a cell must take the focus').to.equal(true)
+    expect(focused.getBoundingClientRect().top).to.be.at.least(header.getBoundingClientRect().bottom - 1)
+  })
+})