@svgrid/grid 2.2.27 → 2.2.29

package/src/merge-objects.ts

@@ -1,48 +1,48 @@
-/**
- * Merges objects together while keeping their getters alive.
- * Taken from SolidJS:
- * https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115
- */
-export function mergeObjects<T>(source: T): T
-export function mergeObjects<T, U>(source: T, source1: U): T & U
-export function mergeObjects<T, U, V>(
-  source: T,
-  source1: U,
-  source2: V,
-): T & U & V
-export function mergeObjects<T, U, V, W>(
-  source: T,
-  source1: U,
-  source2: V,
-  source3: W,
-): T & U & V & W
-export function mergeObjects(...sources: any): any {
-  const target = {}
-
-  for (let source of sources) {
-    if (typeof source === 'function') source = source()
-
-    if (source) {
-      const descriptors = Object.getOwnPropertyDescriptors(source)
-
-      for (const key in descriptors) {
-        if (key in target) continue
-
-        Object.defineProperty(target, key, {
-          enumerable: true,
-          get() {
-            for (let i = sources.length - 1; i >= 0; i--) {
-              let scopedSource = sources[i]
-              if (typeof scopedSource === 'function') scopedSource = scopedSource()
-
-              const value = (scopedSource || {})[key]
-              if (value !== undefined) return value
-            }
-          },
-        })
-      }
-    }
-  }
-
-  return target
-}
+/**
+ * Merges objects together while keeping their getters alive.
+ * Taken from SolidJS:
+ * https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115
+ */
+export function mergeObjects<T>(source: T): T
+export function mergeObjects<T, U>(source: T, source1: U): T & U
+export function mergeObjects<T, U, V>(
+  source: T,
+  source1: U,
+  source2: V,
+): T & U & V
+export function mergeObjects<T, U, V, W>(
+  source: T,
+  source1: U,
+  source2: V,
+  source3: W,
+): T & U & V & W
+export function mergeObjects(...sources: any): any {
+  const target = {}
+
+  for (let source of sources) {
+    if (typeof source === 'function') source = source()
+
+    if (source) {
+      const descriptors = Object.getOwnPropertyDescriptors(source)
+
+      for (const key in descriptors) {
+        if (key in target) continue
+
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            for (let i = sources.length - 1; i >= 0; i--) {
+              let scopedSource = sources[i]
+              if (typeof scopedSource === 'function') scopedSource = scopedSource()
+
+              const value = (scopedSource || {})[key]
+              if (value !== undefined) return value
+            }
+          },
+        })
+      }
+    }
+  }
+
+  return target
+}

package/src/overlays.test.ts

@@ -1,90 +1,90 @@
-/**
- * Component tests for the overlay trio: SvModal (dialog semantics, Escape /
- * backdrop close), SvPopover (click open + outside close) and SvTooltip
- * (focus-triggered, aria-describedby wiring).
- */
-import { describe, expect, it, vi, afterEach } from 'vitest'
-import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
-import SvModal from './SvModal.svelte'
-import SvPopover from './SvPopover.svelte'
-import SvTooltip from './SvTooltip.svelte'
-
-const body = createRawSnippet(() => ({ render: () => `<p class="body">hello</p>` }))
-const anchorBtn = createRawSnippet(() => ({ render: () => `<button class="anchor">open</button>` }))
-
-function mountC(Comp: any, props: Record<string, unknown>) {
-  const target = document.createElement('div')
-  document.body.appendChild(target)
-  const app = mount(Comp, { target, props: props as any })
-  flushSync()
-  return { target, destroy: () => { unmount(app); target.remove() } }
-}
-afterEach(() => {
-  document.querySelectorAll('.sv-modal__backdrop, .sv-pop__panel, .sv-tip').forEach((n) => n.remove())
-})
-
-describe('SvModal', () => {
-  it('renders a labelled modal dialog when open', () => {
-    const { destroy } = mountC(SvModal, { open: true, title: 'Edit', children: body })
-    try {
-      const dialog = document.querySelector<HTMLElement>('.sv-modal')!
-      expect(dialog.getAttribute('role')).toBe('dialog')
-      expect(dialog.getAttribute('aria-modal')).toBe('true')
-      const titleId = dialog.getAttribute('aria-labelledby')!
-      expect(document.getElementById(titleId)!.textContent).toBe('Edit')
-      expect(document.querySelector('.sv-modal .body')!.textContent).toBe('hello')
-    } finally { destroy() }
-  })
-
-  it('Escape and the close button both fire onClose', () => {
-    let closed = 0
-    const { destroy } = mountC(SvModal, { open: true, title: 'X', onClose: () => (closed++), children: body })
-    try {
-      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
-      flushSync()
-      expect(closed).toBe(1)
-    } finally { destroy() }
-  })
-})
-
-describe('SvPopover', () => {
-  it('opens the panel on anchor click and closes on outside pointerdown', () => {
-    const { target, destroy } = mountC(SvPopover, { anchor: anchorBtn, children: body })
-    try {
-      expect(document.querySelector('.sv-pop__panel')).toBeNull()
-      target.querySelector<HTMLElement>('.anchor')!.click()
-      flushSync()
-      const panel = document.querySelector<HTMLElement>('.sv-pop__panel')!
-      expect(panel).not.toBeNull()
-      expect(panel.getAttribute('role')).toBe('dialog')
-      // Outside click closes.
-      document.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-      flushSync()
-      expect(document.querySelector('.sv-pop__panel')).toBeNull()
-    } finally { destroy() }
-  })
-})
-
-describe('SvTooltip', () => {
-  it('shows after the delay on focus and wires aria-describedby', () => {
-    vi.useFakeTimers()
-    try {
-      const child = createRawSnippet(() => ({ render: () => `<button class="t">i</button>` }))
-      const { target, destroy } = mountC(SvTooltip, { text: 'Tip text', delay: 200, children: child })
-      const anchor = target.querySelector<HTMLElement>('.sv-tip__anchor')!
-      anchor.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
-      vi.advanceTimersByTime(210)
-      flushSync()
-      const tip = document.querySelector<HTMLElement>('.sv-tip')!
-      expect(tip).not.toBeNull()
-      expect(tip.getAttribute('role')).toBe('tooltip')
-      expect(anchor.getAttribute('aria-describedby')).toBe(tip.id)
-      // The wrapper span is never itself focusable, so AT users only ever land
-      // on the real interactive child below - it must carry the description
-      // too, or it's never announced on focus (see SvTooltip.svelte effect).
-      const focusEl = target.querySelector<HTMLElement>('.t')!
-      expect(focusEl.getAttribute('aria-describedby')).toBe(tip.id)
-      destroy()
-    } finally { vi.useRealTimers() }
-  })
-})
+/**
+ * Component tests for the overlay trio: SvModal (dialog semantics, Escape /
+ * backdrop close), SvPopover (click open + outside close) and SvTooltip
+ * (focus-triggered, aria-describedby wiring).
+ */
+import { describe, expect, it, vi, afterEach } from 'vitest'
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
+import SvModal from './SvModal.svelte'
+import SvPopover from './SvPopover.svelte'
+import SvTooltip from './SvTooltip.svelte'
+
+const body = createRawSnippet(() => ({ render: () => `<p class="body">hello</p>` }))
+const anchorBtn = createRawSnippet(() => ({ render: () => `<button class="anchor">open</button>` }))
+
+function mountC(Comp: any, props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(Comp, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+afterEach(() => {
+  document.querySelectorAll('.sv-modal__backdrop, .sv-pop__panel, .sv-tip').forEach((n) => n.remove())
+})
+
+describe('SvModal', () => {
+  it('renders a labelled modal dialog when open', () => {
+    const { destroy } = mountC(SvModal, { open: true, title: 'Edit', children: body })
+    try {
+      const dialog = document.querySelector<HTMLElement>('.sv-modal')!
+      expect(dialog.getAttribute('role')).toBe('dialog')
+      expect(dialog.getAttribute('aria-modal')).toBe('true')
+      const titleId = dialog.getAttribute('aria-labelledby')!
+      expect(document.getElementById(titleId)!.textContent).toBe('Edit')
+      expect(document.querySelector('.sv-modal .body')!.textContent).toBe('hello')
+    } finally { destroy() }
+  })
+
+  it('Escape and the close button both fire onClose', () => {
+    let closed = 0
+    const { destroy } = mountC(SvModal, { open: true, title: 'X', onClose: () => (closed++), children: body })
+    try {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      flushSync()
+      expect(closed).toBe(1)
+    } finally { destroy() }
+  })
+})
+
+describe('SvPopover', () => {
+  it('opens the panel on anchor click and closes on outside pointerdown', () => {
+    const { target, destroy } = mountC(SvPopover, { anchor: anchorBtn, children: body })
+    try {
+      expect(document.querySelector('.sv-pop__panel')).toBeNull()
+      target.querySelector<HTMLElement>('.anchor')!.click()
+      flushSync()
+      const panel = document.querySelector<HTMLElement>('.sv-pop__panel')!
+      expect(panel).not.toBeNull()
+      expect(panel.getAttribute('role')).toBe('dialog')
+      // Outside click closes.
+      document.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+      flushSync()
+      expect(document.querySelector('.sv-pop__panel')).toBeNull()
+    } finally { destroy() }
+  })
+})
+
+describe('SvTooltip', () => {
+  it('shows after the delay on focus and wires aria-describedby', () => {
+    vi.useFakeTimers()
+    try {
+      const child = createRawSnippet(() => ({ render: () => `<button class="t">i</button>` }))
+      const { target, destroy } = mountC(SvTooltip, { text: 'Tip text', delay: 200, children: child })
+      const anchor = target.querySelector<HTMLElement>('.sv-tip__anchor')!
+      anchor.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
+      vi.advanceTimersByTime(210)
+      flushSync()
+      const tip = document.querySelector<HTMLElement>('.sv-tip')!
+      expect(tip).not.toBeNull()
+      expect(tip.getAttribute('role')).toBe('tooltip')
+      expect(anchor.getAttribute('aria-describedby')).toBe(tip.id)
+      // The wrapper span is never itself focusable, so AT users only ever land
+      // on the real interactive child below - it must carry the description
+      // too, or it's never announced on focus (see SvTooltip.svelte effect).
+      const focusEl = target.querySelector<HTMLElement>('.t')!
+      expect(focusEl.getAttribute('aria-describedby')).toBe(tip.id)
+      destroy()
+    } finally { vi.useRealTimers() }
+  })
+})

package/src/render-component.ts

@@ -1,28 +1,28 @@
-import type { Component, ComponentProps, Snippet } from 'svelte'
-
-export class RenderComponentConfig<TComponent extends Component> {
-  constructor(
-    public component: TComponent,
-    public props?: ComponentProps<TComponent> | Record<string, never>,
-  ) {}
-}
-
-export class RenderSnippetConfig<TProps> {
-  constructor(
-    public snippet: Snippet<[TProps]>,
-    public params?: TProps,
-  ) {}
-}
-
-export const renderComponent = <
-  TComponent extends Component<any>,
-  TProps extends ComponentProps<TComponent>,
->(
-  component: TComponent,
-  props?: TProps,
-) => new RenderComponentConfig(component, props)
-
-export const renderSnippet = <TProps>(
-  snippet: Snippet<[TProps]>,
-  params?: TProps,
-) => new RenderSnippetConfig(snippet, params)
+import type { Component, ComponentProps, Snippet } from 'svelte'
+
+export class RenderComponentConfig<TComponent extends Component> {
+  constructor(
+    public component: TComponent,
+    public props?: ComponentProps<TComponent> | Record<string, never>,
+  ) {}
+}
+
+export class RenderSnippetConfig<TProps> {
+  constructor(
+    public snippet: Snippet<[TProps]>,
+    public params?: TProps,
+  ) {}
+}
+
+export const renderComponent = <
+  TComponent extends Component<any>,
+  TProps extends ComponentProps<TComponent>,
+>(
+  component: TComponent,
+  props?: TProps,
+) => new RenderComponentConfig(component, props)
+
+export const renderSnippet = <TProps>(
+  snippet: Snippet<[TProps]>,
+  params?: TProps,
+) => new RenderSnippetConfig(snippet, params)

package/src/row-resize.test.ts

@@ -392,3 +392,103 @@ describe('rowResize - update + destroy', () => {
     action.destroy()
   })
 })
+
+// ---------------------------------------------------------------------------
+// Keyboard resize (#79)
+// ---------------------------------------------------------------------------
+
+describe('rowResize - keyboard', () => {
+  function key(k: string, init: Partial<KeyboardEvent> = {}): KeyboardEvent {
+    return new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true, ...init })
+  }
+
+  it('makes the strip focusable', () => {
+    const { host, rows } = buildGrid([{}])
+    track(host)
+    const action = rowResize(host, { onResize: vi.fn() })
+    expect(stripOf(rows[0]!)!.tabIndex).toBe(0)
+    action.destroy()
+  })
+
+  it('ArrowDown grows the row by 10px and reports the new height', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0]!, 32)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
+    expect(rows[0]!.style.height).toBe('42px')
+    expect(onResize).toHaveBeenCalledWith(0, 42)
+    action.destroy()
+  })
+
+  it('ArrowUp shrinks the row and Shift gives a 1px step', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0]!, 60)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    const strip = stripOf(rows[0]!)!
+    strip.dispatchEvent(key('ArrowUp'))
+    expect(onResize).toHaveBeenLastCalledWith(0, 50)
+    strip.dispatchEvent(key('ArrowUp', { shiftKey: true }))
+    expect(onResize).toHaveBeenLastCalledWith(0, 59)
+    action.destroy()
+  })
+
+  it('clamps to the configured min and max', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0]!, 42)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize, min: 40, max: 44 })
+    const strip = stripOf(rows[0]!)!
+    strip.dispatchEvent(key('ArrowUp'))
+    expect(onResize).toHaveBeenLastCalledWith(0, 40)
+    strip.dispatchEvent(key('ArrowDown'))
+    expect(onResize).toHaveBeenLastCalledWith(0, 44)
+    action.destroy()
+  })
+
+  it('ignores keys other than the arrows and consumes the ones it handles', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0]!, 32)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    const strip = stripOf(rows[0]!)!
+    const other = key('Enter')
+    strip.dispatchEvent(other)
+    expect(onResize).not.toHaveBeenCalled()
+    expect(other.defaultPrevented).toBe(false)
+    const handled = key('ArrowDown')
+    strip.dispatchEvent(handled)
+    expect(handled.defaultPrevented).toBe(true)
+    action.destroy()
+  })
+
+  it('does nothing while disabled, and stops after destroy', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0]!, 32)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize, disabled: true })
+    // Disabled removes the strips entirely, so drive a hand-made one.
+    const strip = document.createElement('div')
+    strip.className = STRIP_CLASS
+    gutterOf(rows[0]!).appendChild(strip)
+    strip.dispatchEvent(key('ArrowDown'))
+    expect(onResize).not.toHaveBeenCalled()
+
+    action.update({ onResize })
+    stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
+    expect(onResize).toHaveBeenCalledTimes(1)
+
+    action.destroy()
+    const orphan = document.createElement('div')
+    orphan.className = STRIP_CLASS
+    gutterOf(rows[0]!).appendChild(orphan)
+    orphan.dispatchEvent(key('ArrowDown'))
+    expect(onResize).toHaveBeenCalledTimes(1)
+  })
+})

package/src/row-resize.ts

@@ -81,6 +81,37 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
     document.body.style.cursor = ''
   }
 
+  /**
+   * Keyboard resize (#79). The strip is `role="separator"` acting as a
+   * splitter, so it has to be reachable by Tab and respond to arrow keys.
+   * Up/Down shrink/grow the row, Shift gives a fine 1px step - the same
+   * contract the column resize handle uses (Left/Right, Shift = 1px).
+   */
+  function onKeyDown(e: KeyboardEvent) {
+    if (current.disabled) return
+    const t = e.target as HTMLElement | null
+    if (!t?.classList.contains(STRIP_CLASS)) return
+    const step = e.shiftKey ? 1 : 10
+    let delta = 0
+    if (e.key === 'ArrowUp') delta = -step
+    else if (e.key === 'ArrowDown') delta = step
+    else return
+    const tr = t.closest<HTMLTableRowElement>('tr.sv-grid-row')
+    if (!tr) return
+    const rowIndex = rowIndexOf(tr)
+    if (!Number.isFinite(rowIndex)) return
+    e.preventDefault()
+    e.stopPropagation()
+    const min = current.min ?? 20
+    const max = current.max ?? 320
+    const next = Math.round(
+      Math.max(min, Math.min(max, tr.getBoundingClientRect().height + delta)),
+    )
+    tr.style.height = `${next}px`
+    current.onResizeMove?.(rowIndex, next)
+    current.onResize(rowIndex, next)
+  }
+
   function onPointerDown(e: PointerEvent) {
     if (current.disabled) return
     const t = e.target as HTMLElement | null
@@ -134,6 +165,9 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
       strip.setAttribute('role', 'separator')
       strip.setAttribute('aria-orientation', 'horizontal')
       strip.setAttribute('aria-label', 'Resize row')
+      // A separator used as an interactive splitter has to be focusable so
+      // keyboard-only users can reach it and drive `onKeyDown` (#79).
+      strip.tabIndex = 0
       // Inline the geometry + pointer-events so the strip works even
       // before SvGrid.css is parsed; the hover tint still comes from
       // the stylesheet. We keep the strip fully inside the gutter
@@ -152,6 +186,7 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
   }
 
   node.addEventListener('pointerdown', onPointerDown, { capture: true })
+  node.addEventListener('keydown', onKeyDown, { capture: true })
   const observer = new MutationObserver(() => decorate())
   observer.observe(node, { childList: true, subtree: true })
   decorate()
@@ -165,6 +200,7 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
     },
     destroy() {
       node.removeEventListener('pointerdown', onPointerDown, { capture: true })
+      node.removeEventListener('keydown', onKeyDown, { capture: true })
       window.removeEventListener('pointermove', onPointerMove)
       window.removeEventListener('pointerup', onPointerUp)
       observer.disconnect()