@svgrid/grid 2.2.25 → 2.2.27

package/src/a11y/dismissable.test.ts

@@ -1,95 +1,119 @@
-import { afterEach, describe, expect, it } from 'vitest'
-import { createDismissableLayer, dismissableDepth } from './dismissable'
-
-function panel(): HTMLElement {
-  const el = document.createElement('div')
-  document.body.appendChild(el)
-  return el
-}
-
-afterEach(() => {
-  document.body.innerHTML = ''
-})
-
-describe('createDismissableLayer', () => {
-  it('dismisses on Escape when topmost', () => {
-    const el = panel()
-    let reason: string | null = null
-    const layer = createDismissableLayer({ element: () => el, onDismiss: (r) => (reason = r) })
-    layer.activate()
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
-    expect(reason).toBe('escape')
-    layer.release()
-  })
-
-  it('dismisses on outside pointerdown but not inside', () => {
-    const el = panel()
-    const inside = document.createElement('button')
-    el.appendChild(inside)
-    let reason: string | null = null
-    const layer = createDismissableLayer({ element: () => el, onDismiss: (r) => (reason = r) })
-    layer.activate()
-
-    inside.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
-    expect(reason).toBeNull()
-
-    document.body.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
-    expect(reason).toBe('outside')
-    layer.release()
-  })
-
-  it('treats a pointerdown in ANY of multiple elements as inside', () => {
-    const panelEl = panel()
-    const trigger = panel()
-    let reason: string | null = null
-    const layer = createDismissableLayer({
-      element: () => [panelEl, trigger],
-      onDismiss: (r) => (reason = r),
-    })
-    layer.activate()
-
-    trigger.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
-    expect(reason).toBeNull() // trigger counts as inside
-
-    document.body.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
-    expect(reason).toBe('outside')
-    layer.release()
-  })
-
-  it('only the top layer responds to Escape', () => {
-    const a = panel()
-    const b = panel()
-    const hits: string[] = []
-    const layerA = createDismissableLayer({ element: () => a, onDismiss: () => hits.push('a') })
-    const layerB = createDismissableLayer({ element: () => b, onDismiss: () => hits.push('b') })
-    layerA.activate()
-    layerB.activate()
-    expect(dismissableDepth()).toBe(2)
-
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
-    expect(hits).toEqual(['b']) // only the topmost
-
-    layerB.release()
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
-    expect(hits).toEqual(['b', 'a']) // now a is on top
-
-    layerA.release()
-    expect(dismissableDepth()).toBe(0)
-  })
-
-  it('respects closeOnEscape / closeOnOutside flags', () => {
-    const el = panel()
-    let count = 0
-    const layer = createDismissableLayer({
-      element: () => el,
-      onDismiss: () => count++,
-      closeOnEscape: false,
-      closeOnOutside: false,
-    })
-    layer.activate()
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
-    document.body.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
-    expect(count).toBe(0)
-    layer.release()
-  })
-})
+import { afterEach, describe, expect, it } from 'vitest'
+import { createDismissableLayer, dismissableDepth, onScrollOutside } from './dismissable'
+
+function panel(): HTMLElement {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  return el
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('createDismissableLayer', () => {
+  it('dismisses on Escape when topmost', () => {
+    const el = panel()
+    let reason: string | null = null
+    const layer = createDismissableLayer({ element: () => el, onDismiss: (r) => (reason = r) })
+    layer.activate()
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    expect(reason).toBe('escape')
+    layer.release()
+  })
+
+  it('dismisses on outside pointerdown but not inside', () => {
+    const el = panel()
+    const inside = document.createElement('button')
+    el.appendChild(inside)
+    let reason: string | null = null
+    const layer = createDismissableLayer({ element: () => el, onDismiss: (r) => (reason = r) })
+    layer.activate()
+
+    inside.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
+    expect(reason).toBeNull()
+
+    document.body.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
+    expect(reason).toBe('outside')
+    layer.release()
+  })
+
+  it('treats a pointerdown in ANY of multiple elements as inside', () => {
+    const panelEl = panel()
+    const trigger = panel()
+    let reason: string | null = null
+    const layer = createDismissableLayer({
+      element: () => [panelEl, trigger],
+      onDismiss: (r) => (reason = r),
+    })
+    layer.activate()
+
+    trigger.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
+    expect(reason).toBeNull() // trigger counts as inside
+
+    document.body.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
+    expect(reason).toBe('outside')
+    layer.release()
+  })
+
+  it('only the top layer responds to Escape', () => {
+    const a = panel()
+    const b = panel()
+    const hits: string[] = []
+    const layerA = createDismissableLayer({ element: () => a, onDismiss: () => hits.push('a') })
+    const layerB = createDismissableLayer({ element: () => b, onDismiss: () => hits.push('b') })
+    layerA.activate()
+    layerB.activate()
+    expect(dismissableDepth()).toBe(2)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    expect(hits).toEqual(['b']) // only the topmost
+
+    layerB.release()
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    expect(hits).toEqual(['b', 'a']) // now a is on top
+
+    layerA.release()
+    expect(dismissableDepth()).toBe(0)
+  })
+
+  it('close-on-scroll ignores scrolling inside the panel', () => {
+    const el = panel()
+    const list = document.createElement('div') // e.g. the filter menu's facet list
+    el.appendChild(list)
+    let closed = 0
+    const off = onScrollOutside(() => el, () => closed++)
+
+    // Inner scroll containers don't bubble, so this only reaches the capture
+    // listener - it must NOT close the menu the user is scrolling.
+    list.dispatchEvent(new Event('scroll'))
+    el.dispatchEvent(new Event('scroll'))
+    expect(closed).toBe(0)
+
+    // A scroll anywhere else moves the anchor, so the panel closes.
+    document.body.dispatchEvent(new Event('scroll'))
+    expect(closed).toBe(1)
+    document.dispatchEvent(new Event('scroll'))
+    expect(closed).toBe(2)
+
+    off()
+    document.body.dispatchEvent(new Event('scroll'))
+    expect(closed).toBe(2)
+  })
+
+  it('respects closeOnEscape / closeOnOutside flags', () => {
+    const el = panel()
+    let count = 0
+    const layer = createDismissableLayer({
+      element: () => el,
+      onDismiss: () => count++,
+      closeOnEscape: false,
+      closeOnOutside: false,
+    })
+    layer.activate()
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    document.body.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
+    expect(count).toBe(0)
+    layer.release()
+  })
+})

package/src/a11y/dismissable.ts

@@ -1,94 +1,114 @@
-/**
- * dismissable-layer - a global stack of dismissable overlays (dropdowns,
- * popovers, dialogs). Escape and outside-pointer dismiss only the TOP layer, so
- * a menu opened inside a dialog closes the menu first and the dialog second -
- * the ordering users expect from nested overlays. One set of document listeners
- * is shared by every layer instead of each component wiring its own.
- */
-type Reason = 'escape' | 'outside'
-
-/** One element, several elements, or a getter of either. A pointerdown counts
- *  as "inside" when it lands in ANY of them (e.g. a popover's panel AND its
- *  trigger, so clicking the trigger doesn't immediately re-dismiss). */
-export type DismissTarget = HTMLElement | null | ReadonlyArray<HTMLElement | null>
-
-type Layer = {
-  element: () => DismissTarget
-  onDismiss: (reason: Reason) => void
-  closeOnEscape: boolean
-  closeOnOutside: boolean
-}
-
-function containsTarget(target: DismissTarget, node: Node | null): boolean {
-  if (!node) return false
-  const els = Array.isArray(target) ? target : [target as HTMLElement | null]
-  return els.some((el) => el != null && el.contains(node))
-}
-
-const stack: Layer[] = []
-let wired = false
-
-function ensureWired() {
-  if (wired || typeof document === 'undefined') return
-  wired = true
-  document.addEventListener(
-    'keydown',
-    (e) => {
-      if (e.key !== 'Escape') return
-      const top = stack[stack.length - 1]
-      if (top?.closeOnEscape) {
-        e.stopPropagation()
-        top.onDismiss('escape')
-      }
-    },
-    true,
-  )
-  document.addEventListener(
-    'pointerdown',
-    (e) => {
-      const top = stack[stack.length - 1]
-      if (!top?.closeOnOutside) return
-      if (!containsTarget(top.element(), e.target as Node)) top.onDismiss('outside')
-    },
-    true,
-  )
-}
-
-export type DismissableOptions = {
-  /** The panel element(s); a pointerdown outside ALL of them dismisses the layer.
-   *  Pass multiple (e.g. panel + trigger) so clicking the trigger doesn't
-   *  immediately re-dismiss what it just opened. */
-  element: () => DismissTarget
-  onDismiss: (reason: Reason) => void
-  /** Dismiss on Escape when topmost. Default true. */
-  closeOnEscape?: boolean
-  /** Dismiss on outside pointerdown when topmost. Default true. */
-  closeOnOutside?: boolean
-}
-
-export type DismissableLayer = { activate: () => void; release: () => void }
-
-/** Register a dismissable layer. Inert until `activate()`. */
-export function createDismissableLayer(options: DismissableOptions): DismissableLayer {
-  const layer: Layer = {
-    element: options.element,
-    onDismiss: options.onDismiss,
-    closeOnEscape: options.closeOnEscape ?? true,
-    closeOnOutside: options.closeOnOutside ?? true,
-  }
-  return {
-    activate() {
-      ensureWired()
-      if (!stack.includes(layer)) stack.push(layer)
-    },
-    release() {
-      const i = stack.indexOf(layer)
-      if (i >= 0) stack.splice(i, 1)
-    },
-  }
-}
-
-/** Test/introspection helper: current number of active layers. */
-export function dismissableDepth(): number {
-  return stack.length
-}
+/**
+ * dismissable-layer - a global stack of dismissable overlays (dropdowns,
+ * popovers, dialogs). Escape and outside-pointer dismiss only the TOP layer, so
+ * a menu opened inside a dialog closes the menu first and the dialog second -
+ * the ordering users expect from nested overlays. One set of document listeners
+ * is shared by every layer instead of each component wiring its own.
+ */
+type Reason = 'escape' | 'outside'
+
+/** One element, several elements, or a getter of either. A pointerdown counts
+ *  as "inside" when it lands in ANY of them (e.g. a popover's panel AND its
+ *  trigger, so clicking the trigger doesn't immediately re-dismiss). */
+export type DismissTarget = HTMLElement | null | ReadonlyArray<HTMLElement | null>
+
+type Layer = {
+  element: () => DismissTarget
+  onDismiss: (reason: Reason) => void
+  closeOnEscape: boolean
+  closeOnOutside: boolean
+}
+
+function containsTarget(target: DismissTarget, node: Node | null): boolean {
+  if (!node) return false
+  const els = Array.isArray(target) ? target : [target as HTMLElement | null]
+  return els.some((el) => el != null && el.contains(node))
+}
+
+const stack: Layer[] = []
+let wired = false
+
+function ensureWired() {
+  if (wired || typeof document === 'undefined') return
+  wired = true
+  document.addEventListener(
+    'keydown',
+    (e) => {
+      if (e.key !== 'Escape') return
+      const top = stack[stack.length - 1]
+      if (top?.closeOnEscape) {
+        e.stopPropagation()
+        top.onDismiss('escape')
+      }
+    },
+    true,
+  )
+  document.addEventListener(
+    'pointerdown',
+    (e) => {
+      const top = stack[stack.length - 1]
+      if (!top?.closeOnOutside) return
+      if (!containsTarget(top.element(), e.target as Node)) top.onDismiss('outside')
+    },
+    true,
+  )
+}
+
+export type DismissableOptions = {
+  /** The panel element(s); a pointerdown outside ALL of them dismisses the layer.
+   *  Pass multiple (e.g. panel + trigger) so clicking the trigger doesn't
+   *  immediately re-dismiss what it just opened. */
+  element: () => DismissTarget
+  onDismiss: (reason: Reason) => void
+  /** Dismiss on Escape when topmost. Default true. */
+  closeOnEscape?: boolean
+  /** Dismiss on outside pointerdown when topmost. Default true. */
+  closeOnOutside?: boolean
+}
+
+export type DismissableLayer = { activate: () => void; release: () => void }
+
+/** Register a dismissable layer. Inert until `activate()`. */
+export function createDismissableLayer(options: DismissableOptions): DismissableLayer {
+  const layer: Layer = {
+    element: options.element,
+    onDismiss: options.onDismiss,
+    closeOnEscape: options.closeOnEscape ?? true,
+    closeOnOutside: options.closeOnOutside ?? true,
+  }
+  return {
+    activate() {
+      ensureWired()
+      if (!stack.includes(layer)) stack.push(layer)
+    },
+    release() {
+      const i = stack.indexOf(layer)
+      if (i >= 0) stack.splice(i, 1)
+    },
+  }
+}
+
+/** Test/introspection helper: current number of active layers. */
+export function dismissableDepth(): number {
+  return stack.length
+}
+
+/**
+ * Close-on-scroll for popovers that are position:fixed and anchored by a
+ * one-time measurement taken when they open. Scrolling an ancestor slides the
+ * anchor out from under them, so they have to close - but scrolling INSIDE
+ * them (a long menu, a facet list) must not, which is what a bare capture-phase
+ * window listener gets wrong: inner scroll containers don't bubble, so the
+ * capture listener sees them and dismisses the panel the user is scrolling.
+ *
+ * Returns the unsubscribe function.
+ */
+export function onScrollOutside(element: () => DismissTarget, onOutside: () => void): () => void {
+  if (typeof window === 'undefined') return () => {}
+  const handler = (event: Event) => {
+    if (containsTarget(element(), event.target as Node)) return
+    onOutside()
+  }
+  window.addEventListener('scroll', handler, true)
+  return () => window.removeEventListener('scroll', handler, true)
+}

package/src/a11y.contract.test.ts

@@ -1,49 +1,49 @@
-import { describe, expect, it } from 'vitest'
-import {
-  getGridCellA11yProps,
-  getGridHeaderA11yProps,
-  getGridRootA11yProps,
-  getGridRowA11yProps,
-} from './a11y'
-
-function attrsToHtml(attrs: Record<string, string | number | boolean>) {
-  return Object.entries(attrs)
-    .map(([key, value]) => `${key}="${String(value)}"`)
-    .join(' ')
-}
-
-describe('a11y contract rendering', () => {
-  it('builds expected headless markup attributes', () => {
-    const root = getGridRootA11yProps()
-    const header = getGridHeaderA11yProps({
-      sortable: true,
-      sortDirection: 'descending',
-    })
-    const row = getGridRowA11yProps(1)
-    const cell = getGridCellA11yProps({
-      rowIndex: 1,
-      colIndex: 2,
-      selected: true,
-    })
-
-    const html = [
-      `<table ${attrsToHtml(root)}><thead>`,
-      `<tr ${attrsToHtml(row)}>`,
-      `<th ${attrsToHtml(header)}>Age</th>`,
-      `</tr></thead><tbody>`,
-      `<tr ${attrsToHtml(row)}><td ${attrsToHtml(cell)}>42</td></tr>`,
-      `</tbody></table>`,
-    ].join('')
-
-    expect(html).toContain('role="grid"')
-    expect(html).toContain('role="columnheader"')
-    expect(html).toContain('aria-sort="descending"')
-    expect(html).toContain('aria-selected="true"')
-    expect(html).toContain('aria-colindex="2"')
-  })
-
-  it('creates stable active descendant ids', async () => {
-    const { getGridCellDomId } = await import('./a11y')
-    expect(getGridCellDomId('svgrid', 3, 4)).toBe('svgrid_cell_3_4')
-  })
-})
+import { describe, expect, it } from 'vitest'
+import {
+  getGridCellA11yProps,
+  getGridHeaderA11yProps,
+  getGridRootA11yProps,
+  getGridRowA11yProps,
+} from './a11y'
+
+function attrsToHtml(attrs: Record<string, string | number | boolean>) {
+  return Object.entries(attrs)
+    .map(([key, value]) => `${key}="${String(value)}"`)
+    .join(' ')
+}
+
+describe('a11y contract rendering', () => {
+  it('builds expected headless markup attributes', () => {
+    const root = getGridRootA11yProps()
+    const header = getGridHeaderA11yProps({
+      sortable: true,
+      sortDirection: 'descending',
+    })
+    const row = getGridRowA11yProps(1)
+    const cell = getGridCellA11yProps({
+      rowIndex: 1,
+      colIndex: 2,
+      selected: true,
+    })
+
+    const html = [
+      `<table ${attrsToHtml(root)}><thead>`,
+      `<tr ${attrsToHtml(row)}>`,
+      `<th ${attrsToHtml(header)}>Age</th>`,
+      `</tr></thead><tbody>`,
+      `<tr ${attrsToHtml(row)}><td ${attrsToHtml(cell)}>42</td></tr>`,
+      `</tbody></table>`,
+    ].join('')
+
+    expect(html).toContain('role="grid"')
+    expect(html).toContain('role="columnheader"')
+    expect(html).toContain('aria-sort="descending"')
+    expect(html).toContain('aria-selected="true"')
+    expect(html).toContain('aria-colindex="2"')
+  })
+
+  it('creates stable active descendant ids', async () => {
+    const { getGridCellDomId } = await import('./a11y')
+    expect(getGridCellDomId('svgrid', 3, 4)).toBe('svgrid_cell_3_4')
+  })
+})

package/src/a11y.test.ts

@@ -1,59 +1,59 @@
-import { describe, expect, it } from 'vitest'
-import {
-  getGridCellA11yProps,
-  getGridHeaderA11yProps,
-  getGridRootA11yProps,
-  getGridRowA11yProps,
-} from './a11y'
-
-describe('a11y helpers', () => {
-  it('returns grid role props', () => {
-    expect(
-      getGridRootA11yProps({
-        activeDescendantId: 'svgrid_cell_0_0',
-        rowCount: 10,
-        colCount: 5,
-      }),
-    ).toEqual({
-      role: 'grid',
-      tabindex: 0,
-      'aria-activedescendant': 'svgrid_cell_0_0',
-      'aria-rowcount': 10,
-      'aria-colcount': 5,
-    })
-  })
-
-  it('returns header sort semantics', () => {
-    expect(
-      getGridHeaderA11yProps({
-        sortable: true,
-        sortDirection: 'ascending',
-      }),
-    ).toEqual({
-      role: 'columnheader',
-      'aria-sort': 'ascending',
-    })
-  })
-
-  it('returns row and cell indices for accessibility metadata', () => {
-    expect(getGridRowA11yProps(2)).toEqual({
-      role: 'row',
-      'aria-rowindex': 2,
-    })
-
-    expect(
-      getGridCellA11yProps({
-        id: 'svgrid_cell_2_3',
-        rowIndex: 2,
-        colIndex: 3,
-        selected: true,
-      }),
-    ).toEqual({
-      role: 'gridcell',
-      id: 'svgrid_cell_2_3',
-      'aria-colindex': 3,
-      'aria-rowindex': 2,
-      'aria-selected': true,
-    })
-  })
-})
+import { describe, expect, it } from 'vitest'
+import {
+  getGridCellA11yProps,
+  getGridHeaderA11yProps,
+  getGridRootA11yProps,
+  getGridRowA11yProps,
+} from './a11y'
+
+describe('a11y helpers', () => {
+  it('returns grid role props', () => {
+    expect(
+      getGridRootA11yProps({
+        activeDescendantId: 'svgrid_cell_0_0',
+        rowCount: 10,
+        colCount: 5,
+      }),
+    ).toEqual({
+      role: 'grid',
+      tabindex: 0,
+      'aria-activedescendant': 'svgrid_cell_0_0',
+      'aria-rowcount': 10,
+      'aria-colcount': 5,
+    })
+  })
+
+  it('returns header sort semantics', () => {
+    expect(
+      getGridHeaderA11yProps({
+        sortable: true,
+        sortDirection: 'ascending',
+      }),
+    ).toEqual({
+      role: 'columnheader',
+      'aria-sort': 'ascending',
+    })
+  })
+
+  it('returns row and cell indices for accessibility metadata', () => {
+    expect(getGridRowA11yProps(2)).toEqual({
+      role: 'row',
+      'aria-rowindex': 2,
+    })
+
+    expect(
+      getGridCellA11yProps({
+        id: 'svgrid_cell_2_3',
+        rowIndex: 2,
+        colIndex: 3,
+        selected: true,
+      }),
+    ).toEqual({
+      role: 'gridcell',
+      id: 'svgrid_cell_2_3',
+      'aria-colindex': 3,
+      'aria-rowindex': 2,
+      'aria-selected': true,
+    })
+  })
+})