@svgrid/grid 2.7.0 → 3.0.1

package/src/svgriddropdown.async-panel.svelte.test.ts

@@ -1,195 +1,195 @@
-/**
- * The dropdown panel's geometry is derived from the option COUNT, and it used
- * to be measured only when the panel opened.
- *
- * With an async `editorOptions` the list is empty at that moment, so the panel
- * was anchored and sized for ZERO options - about 8px tall. The options then
- * arrived and rendered outside that box, unstyled, with the grid rows visible
- * behind them. Reported from demo 428 as a broken editor.
- *
- * jsdom has no layout, so these assert the contract that produces the right
- * geometry: the panel re-measures the trigger whenever the visible option list
- * changes while it is open.
- */
-import { afterEach, describe, expect, it } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGridDropdown from './SvGridDropdown.svelte'
-
-const tick = () => new Promise<void>((r) => setTimeout(r, 0))
-const settle = async () => { for (let i = 0; i < 4; i += 1) await tick() }
-
-let cleanup: (() => void) | null = null
-afterEach(() => { cleanup?.(); cleanup = null })
-
-type Opt = { value: string; label: string }
-const opts = (...labels: string[]): Opt[] => labels.map((l) => ({ value: l, label: l }))
-
-/** Count trigger measurements, which is how the panel is anchored + sized. */
-function trackRectReads(rect?: Partial<DOMRect>) {
-  const reads: number[] = []
-  const orig = HTMLElement.prototype.getBoundingClientRect
-  HTMLElement.prototype.getBoundingClientRect = function () {
-    reads.push(1)
-    return {
-      top: 100, left: 0, width: 160, height: 30,
-      bottom: 130, right: 160, x: 0, y: 100, toJSON() {},
-      ...rect,
-    } as DOMRect
-  }
-  return { reads, restore: () => { HTMLElement.prototype.getBoundingClientRect = orig } }
-}
-
-const panelEl = () => document.querySelector('.sv-grid-dropdown-panel') as HTMLElement
-
-const optionEls = () => document.querySelectorAll('.sv-grid-dropdown-option')
-const emptyEl = () => document.querySelector('.sv-grid-dropdown-empty')
-
-describe('dropdown panel with a late-arriving option list', () => {
-  it('re-measures the trigger when options land after opening', async () => {
-    const t = trackRectReads()
-    try {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      // Opens with an empty list, exactly like an async source.
-      const props = $state({ options: [] as Opt[], value: null, onChange: () => {} })
-      const app = mount(SvGridDropdown, { target, props: props as never })
-      cleanup = () => { unmount(app); target.remove() }
-      await settle()
-
-      expect(optionEls()).toHaveLength(0)
-      const afterOpen = t.reads.length
-      expect(afterOpen).toBeGreaterThan(0)
-
-      // The request resolves.
-      props.options = opts('Paris', 'Lyon', 'Marseille', 'Toulouse', 'Bordeaux')
-      await settle()
-
-      expect(optionEls()).toHaveLength(5)
-      // Sized for an empty list and never re-measured is the bug; the panel has
-      // to consult the trigger again once it has real content.
-      expect(t.reads.length).toBeGreaterThan(afterOpen)
-    } finally {
-      t.restore()
-    }
-  })
-
-  it('re-measures when a search filter shrinks the list', async () => {
-    const t = trackRectReads()
-    try {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      const props = $state({
-        options: opts('Paris', 'Lyon', 'Marseille'),
-        value: null, searchable: true, onChange: () => {},
-      })
-      const app = mount(SvGridDropdown, { target, props: props as never })
-      cleanup = () => { unmount(app); target.remove() }
-      await settle()
-      const before = t.reads.length
-
-      const search = document.querySelector('.sv-grid-dropdown-search') as HTMLInputElement
-      search.value = 'lyo'
-      search.dispatchEvent(new Event('input', { bubbles: true }))
-      await settle()
-
-      expect(optionEls()).toHaveLength(1)
-      expect(t.reads.length).toBeGreaterThan(before)
-    } finally {
-      t.restore()
-    }
-  })
-
-  it('shows Loading rather than "No options" while a list is in flight', async () => {
-    const target = document.createElement('div')
-    document.body.appendChild(target)
-    const app = mount(SvGridDropdown, {
-      target,
-      props: { options: [], value: null, loading: true, onChange: () => {} } as never,
-    })
-    cleanup = () => { unmount(app); target.remove() }
-    await settle()
-    expect(emptyEl()?.textContent).toContain('Loading')
-    // Announced, so a screen reader hears the list arrive.
-    expect(emptyEl()?.getAttribute('role')).toBe('status')
-  })
-
-  it('still says "No options" when the list is genuinely empty', async () => {
-    const target = document.createElement('div')
-    document.body.appendChild(target)
-    const app = mount(SvGridDropdown, {
-      target,
-      props: { options: [], value: null, loading: false, onChange: () => {} } as never,
-    })
-    cleanup = () => { unmount(app); target.remove() }
-    await settle()
-    expect(emptyEl()?.textContent).toContain('No options')
-  })
-
-  it('is not capped by the row-height estimate when the list fits', async () => {
-    // `anchoredRect` clamps its `maxHeight` to our estimate, which assumes a
-    // 32px row. Themes with a bigger font render taller rows, so capping the
-    // panel at that estimate cut off the last option. A short list must be
-    // limited only by the real room available.
-    const t = trackRectReads({ top: 100, bottom: 130 })
-    try {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      const app = mount(SvGridDropdown, {
-        target,
-        props: { options: opts('FR', 'JP', 'US'), value: null, onChange: () => {} } as never,
-      })
-      cleanup = () => { unmount(app); target.remove() }
-      await settle()
-
-      const max = parseFloat(panelEl().style.maxHeight)
-      // The 3-row estimate is 3*32 + 8 = 104. Anything at or under that would
-      // clip; the real space below the trigger is far larger.
-      expect(max).toBeGreaterThan(104)
-    } finally {
-      t.restore()
-    }
-  })
-
-  it('anchors an upward panel by its bottom edge', async () => {
-    // Upward panels used to be positioned by `top`, derived from the same
-    // estimate. Now that the panel may exceed the estimate, a top-anchored one
-    // would grow DOWN over the trigger; bottom-anchoring makes it grow up.
-    const t = trackRectReads({ top: 4000, bottom: 4030 })
-    try {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      const app = mount(SvGridDropdown, {
-        target,
-        props: {
-          options: opts(...Array.from({ length: 12 }, (_, i) => `Opt ${i}`)),
-          value: null, onChange: () => {},
-        } as never,
-      })
-      cleanup = () => { unmount(app); target.remove() }
-      await settle()
-
-      const el = panelEl()
-      expect(el.style.bottom).not.toBe('')
-      expect(el.style.top).toBe('')
-    } finally {
-      t.restore()
-    }
-  })
-
-  it('swaps Loading for the options once they resolve', async () => {
-    const target = document.createElement('div')
-    document.body.appendChild(target)
-    const props = $state({ options: [] as Opt[], value: null, loading: true, onChange: () => {} })
-    const app = mount(SvGridDropdown, { target, props: props as never })
-    cleanup = () => { unmount(app); target.remove() }
-    await settle()
-    expect(emptyEl()?.textContent).toContain('Loading')
-
-    props.options = opts('Paris', 'Lyon')
-    props.loading = false
-    await settle()
-
-    expect(emptyEl()).toBeNull()
-    expect(optionEls()).toHaveLength(2)
-  })
-})
+/**
+ * The dropdown panel's geometry is derived from the option COUNT, and it used
+ * to be measured only when the panel opened.
+ *
+ * With an async `editorOptions` the list is empty at that moment, so the panel
+ * was anchored and sized for ZERO options - about 8px tall. The options then
+ * arrived and rendered outside that box, unstyled, with the grid rows visible
+ * behind them. Reported from demo 428 as a broken editor.
+ *
+ * jsdom has no layout, so these assert the contract that produces the right
+ * geometry: the panel re-measures the trigger whenever the visible option list
+ * changes while it is open.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGridDropdown from './SvGridDropdown.svelte'
+
+const tick = () => new Promise<void>((r) => setTimeout(r, 0))
+const settle = async () => { for (let i = 0; i < 4; i += 1) await tick() }
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+type Opt = { value: string; label: string }
+const opts = (...labels: string[]): Opt[] => labels.map((l) => ({ value: l, label: l }))
+
+/** Count trigger measurements, which is how the panel is anchored + sized. */
+function trackRectReads(rect?: Partial<DOMRect>) {
+  const reads: number[] = []
+  const orig = HTMLElement.prototype.getBoundingClientRect
+  HTMLElement.prototype.getBoundingClientRect = function () {
+    reads.push(1)
+    return {
+      top: 100, left: 0, width: 160, height: 30,
+      bottom: 130, right: 160, x: 0, y: 100, toJSON() {},
+      ...rect,
+    } as DOMRect
+  }
+  return { reads, restore: () => { HTMLElement.prototype.getBoundingClientRect = orig } }
+}
+
+const panelEl = () => document.querySelector('.sv-grid-dropdown-panel') as HTMLElement
+
+const optionEls = () => document.querySelectorAll('.sv-grid-dropdown-option')
+const emptyEl = () => document.querySelector('.sv-grid-dropdown-empty')
+
+describe('dropdown panel with a late-arriving option list', () => {
+  it('re-measures the trigger when options land after opening', async () => {
+    const t = trackRectReads()
+    try {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      // Opens with an empty list, exactly like an async source.
+      const props = $state({ options: [] as Opt[], value: null, onChange: () => {} })
+      const app = mount(SvGridDropdown, { target, props: props as never })
+      cleanup = () => { unmount(app); target.remove() }
+      await settle()
+
+      expect(optionEls()).toHaveLength(0)
+      const afterOpen = t.reads.length
+      expect(afterOpen).toBeGreaterThan(0)
+
+      // The request resolves.
+      props.options = opts('Paris', 'Lyon', 'Marseille', 'Toulouse', 'Bordeaux')
+      await settle()
+
+      expect(optionEls()).toHaveLength(5)
+      // Sized for an empty list and never re-measured is the bug; the panel has
+      // to consult the trigger again once it has real content.
+      expect(t.reads.length).toBeGreaterThan(afterOpen)
+    } finally {
+      t.restore()
+    }
+  })
+
+  it('re-measures when a search filter shrinks the list', async () => {
+    const t = trackRectReads()
+    try {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const props = $state({
+        options: opts('Paris', 'Lyon', 'Marseille'),
+        value: null, searchable: true, onChange: () => {},
+      })
+      const app = mount(SvGridDropdown, { target, props: props as never })
+      cleanup = () => { unmount(app); target.remove() }
+      await settle()
+      const before = t.reads.length
+
+      const search = document.querySelector('.sv-grid-dropdown-search') as HTMLInputElement
+      search.value = 'lyo'
+      search.dispatchEvent(new Event('input', { bubbles: true }))
+      await settle()
+
+      expect(optionEls()).toHaveLength(1)
+      expect(t.reads.length).toBeGreaterThan(before)
+    } finally {
+      t.restore()
+    }
+  })
+
+  it('shows Loading rather than "No options" while a list is in flight', async () => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const app = mount(SvGridDropdown, {
+      target,
+      props: { options: [], value: null, loading: true, onChange: () => {} } as never,
+    })
+    cleanup = () => { unmount(app); target.remove() }
+    await settle()
+    expect(emptyEl()?.textContent).toContain('Loading')
+    // Announced, so a screen reader hears the list arrive.
+    expect(emptyEl()?.getAttribute('role')).toBe('status')
+  })
+
+  it('still says "No options" when the list is genuinely empty', async () => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const app = mount(SvGridDropdown, {
+      target,
+      props: { options: [], value: null, loading: false, onChange: () => {} } as never,
+    })
+    cleanup = () => { unmount(app); target.remove() }
+    await settle()
+    expect(emptyEl()?.textContent).toContain('No options')
+  })
+
+  it('is not capped by the row-height estimate when the list fits', async () => {
+    // `anchoredRect` clamps its `maxHeight` to our estimate, which assumes a
+    // 32px row. Themes with a bigger font render taller rows, so capping the
+    // panel at that estimate cut off the last option. A short list must be
+    // limited only by the real room available.
+    const t = trackRectReads({ top: 100, bottom: 130 })
+    try {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGridDropdown, {
+        target,
+        props: { options: opts('FR', 'JP', 'US'), value: null, onChange: () => {} } as never,
+      })
+      cleanup = () => { unmount(app); target.remove() }
+      await settle()
+
+      const max = parseFloat(panelEl().style.maxHeight)
+      // The 3-row estimate is 3*32 + 8 = 104. Anything at or under that would
+      // clip; the real space below the trigger is far larger.
+      expect(max).toBeGreaterThan(104)
+    } finally {
+      t.restore()
+    }
+  })
+
+  it('anchors an upward panel by its bottom edge', async () => {
+    // Upward panels used to be positioned by `top`, derived from the same
+    // estimate. Now that the panel may exceed the estimate, a top-anchored one
+    // would grow DOWN over the trigger; bottom-anchoring makes it grow up.
+    const t = trackRectReads({ top: 4000, bottom: 4030 })
+    try {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGridDropdown, {
+        target,
+        props: {
+          options: opts(...Array.from({ length: 12 }, (_, i) => `Opt ${i}`)),
+          value: null, onChange: () => {},
+        } as never,
+      })
+      cleanup = () => { unmount(app); target.remove() }
+      await settle()
+
+      const el = panelEl()
+      expect(el.style.bottom).not.toBe('')
+      expect(el.style.top).toBe('')
+    } finally {
+      t.restore()
+    }
+  })
+
+  it('swaps Loading for the options once they resolve', async () => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const props = $state({ options: [] as Opt[], value: null, loading: true, onChange: () => {} })
+    const app = mount(SvGridDropdown, { target, props: props as never })
+    cleanup = () => { unmount(app); target.remove() }
+    await settle()
+    expect(emptyEl()?.textContent).toContain('Loading')
+
+    props.options = opts('Paris', 'Lyon')
+    props.loading = false
+    await settle()
+
+    expect(emptyEl()).toBeNull()
+    expect(optionEls()).toHaveLength(2)
+  })
+})

package/src/test-setup.ts

@@ -1,62 +1,62 @@
-// Vitest setup. jsdom doesn't ship ResizeObserver, IntersectionObserver,
-// or the layout APIs SvGrid touches inside its mount effects. Provide
-// minimal no-op stubs so component mounting completes without crashing.
-//
-// These assign to globals/prototypes the jsdom env doesn't fully type, so
-// the targets are cast to `any`. We deliberately avoid expect-error
-// suppression directives: when a stub happens to line up with the lib types,
-// such a directive becomes "unused" and svelte-check fails the build (an
-// unused expect-error directive is itself an error).
-
-if (typeof globalThis.ResizeObserver === 'undefined') {
-  ;(globalThis as any).ResizeObserver = class {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-  }
-}
-
-if (typeof globalThis.IntersectionObserver === 'undefined') {
-  ;(globalThis as any).IntersectionObserver = class {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-    takeRecords() {
-      return []
-    }
-  }
-}
-
-// jsdom's HTMLElement.scrollIntoView is a no-op; some grid code calls it
-// during the first effect. Make sure the method exists on every element.
-if (typeof Element !== 'undefined' && !Element.prototype.scrollIntoView) {
-  ;(Element.prototype as any).scrollIntoView = function () {}
-}
-
-// jsdom returns 0 for offset* and getBoundingClientRect; the grid only uses
-// these for visual layout (column widths, virtualization windowing), so the
-// zeros are harmless for behavioral tests.
-
-// jsdom lacks the Web Animations API that Svelte 5 transitions (e.g. the chart
-// drawer's slide-in) drive via element.animate(). Provide a no-op so mounting
-// transitioned components doesn't throw "element.animate is not a function".
-if (typeof Element !== 'undefined' && !Element.prototype.animate) {
-  ;(Element.prototype as any).animate = function () {
-    return {
-      cancel() {},
-      finish() {},
-      play() {},
-      pause() {},
-      reverse() {},
-      addEventListener() {},
-      removeEventListener() {},
-      finished: Promise.resolve(),
-      currentTime: 0,
-      playState: 'finished',
-      onfinish: null,
-      oncancel: null,
-    }
-  }
-}
-
-export {}
+// Vitest setup. jsdom doesn't ship ResizeObserver, IntersectionObserver,
+// or the layout APIs SvGrid touches inside its mount effects. Provide
+// minimal no-op stubs so component mounting completes without crashing.
+//
+// These assign to globals/prototypes the jsdom env doesn't fully type, so
+// the targets are cast to `any`. We deliberately avoid expect-error
+// suppression directives: when a stub happens to line up with the lib types,
+// such a directive becomes "unused" and svelte-check fails the build (an
+// unused expect-error directive is itself an error).
+
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  ;(globalThis as any).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+}
+
+if (typeof globalThis.IntersectionObserver === 'undefined') {
+  ;(globalThis as any).IntersectionObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    takeRecords() {
+      return []
+    }
+  }
+}
+
+// jsdom's HTMLElement.scrollIntoView is a no-op; some grid code calls it
+// during the first effect. Make sure the method exists on every element.
+if (typeof Element !== 'undefined' && !Element.prototype.scrollIntoView) {
+  ;(Element.prototype as any).scrollIntoView = function () {}
+}
+
+// jsdom returns 0 for offset* and getBoundingClientRect; the grid only uses
+// these for visual layout (column widths, virtualization windowing), so the
+// zeros are harmless for behavioral tests.
+
+// jsdom lacks the Web Animations API that Svelte 5 transitions (e.g. the chart
+// drawer's slide-in) drive via element.animate(). Provide a no-op so mounting
+// transitioned components doesn't throw "element.animate is not a function".
+if (typeof Element !== 'undefined' && !Element.prototype.animate) {
+  ;(Element.prototype as any).animate = function () {
+    return {
+      cancel() {},
+      finish() {},
+      play() {},
+      pause() {},
+      reverse() {},
+      addEventListener() {},
+      removeEventListener() {},
+      finished: Promise.resolve(),
+      currentTime: 0,
+      playState: 'finished',
+      onfinish: null,
+      oncancel: null,
+    }
+  }
+}
+
+export {}