@svgrid/grid 1.2.34 → 2.0.1

package/src/popover.ts

@@ -16,9 +16,12 @@
  * any popover panel actually consumes.
  */
 export const PANEL_THEME_VARS = [
-  '--sg-accent', '--sg-bg', '--sg-fg', '--sg-border', '--sg-muted',
-  '--sg-header-bg', '--sg-row-hover-bg', '--sg-selection-bg',
-  '--sg-input-bg', '--sg-input-border', '--sg-selection-fg',
+  '--sg-accent', '--sg-on-accent', '--sg-bg', '--sg-fg', '--sg-muted', '--sg-border',
+  '--sg-header-bg', '--sg-header-fg', '--sg-row-hover-bg', '--sg-row-alt-bg',
+  '--sg-selection-bg', '--sg-selection-fg', '--sg-input-bg', '--sg-input-border',
+  '--sg-danger', '--sg-focus-ring', '--sg-radius', '--sg-font',
+  '--sg-invalid-bg', '--sg-invalid-border', '--sg-invalid-fg',
+  '--sg-rating-on', '--sg-rating-empty', '--sg-rating-hover',
 ] as const
 
 /**
@@ -40,6 +43,31 @@ export function portalToBody(node: HTMLElement, vars: ReadonlyArray<string> = PA
   }
 }
 
+/**
+ * Svelte action: play a short enter animation when a portalled panel mounts
+ * (dropdowns, popovers, dialogs). Slides from the trigger side + fades/scales in.
+ * A no-op under `prefers-reduced-motion` and in environments without the Web
+ * Animations API (jsdom), so tests and reduced-motion users are unaffected.
+ *
+ * `use:popIn={{ up: rect.openUpward }}` - pass `up` for panels that flipped above
+ * their trigger so the slide direction matches.
+ */
+export function popIn(node: HTMLElement, param: { up?: boolean; duration?: number; scale?: number } = {}) {
+  if (typeof node.animate !== 'function') return
+  const reduce = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
+  if (reduce) return
+  const dy = param.up ? 6 : -6
+  const s = param.scale ?? 0.97
+  node.animate(
+    [
+      { opacity: 0, transform: `translateY(${dy}px) scale(${s})` },
+      { opacity: 1, transform: 'translateY(0) scale(1)' },
+    ],
+    { duration: param.duration ?? 140, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' },
+  )
+  return {}
+}
+
 export type AnchoredRect = { top: number; left: number; width: number; openUpward: boolean }
 
 export type AnchorOptions = {

package/src/progress.test.ts

@@ -0,0 +1,55 @@
+/**
+ * Component tests for SvProgress + SvCircularProgress: progressbar ARIA,
+ * determinate fill width / ring offset, and indeterminate (no valuenow).
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvProgress from './SvProgress.svelte'
+import SvCircularProgress from './SvCircularProgress.svelte'
+
+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() } }
+}
+
+describe('SvProgress', () => {
+  it('exposes progressbar ARIA + fill width for a determinate value', () => {
+    const { target, destroy } = mountC(SvProgress, { value: 40, max: 200, showLabel: true })
+    try {
+      const bar = target.querySelector<HTMLElement>('[role="progressbar"]')!
+      expect(bar.getAttribute('aria-valuemin')).toBe('0')
+      expect(bar.getAttribute('aria-valuemax')).toBe('200')
+      expect(bar.getAttribute('aria-valuenow')).toBe('40')
+      expect(target.querySelector<HTMLElement>('.sv-prog__fill')!.style.width).toBe('20%')
+      expect(target.querySelector('.sv-prog__label')!.textContent).toBe('20%')
+    } finally { destroy() }
+  })
+
+  it('indeterminate drops valuenow and animates', () => {
+    const { target, destroy } = mountC(SvProgress, { indeterminate: true })
+    try {
+      const bar = target.querySelector<HTMLElement>('[role="progressbar"]')!
+      expect(bar.getAttribute('aria-valuenow')).toBeNull()
+      expect(target.querySelector('.sv-prog__fill.is-indeterminate')).not.toBeNull()
+    } finally { destroy() }
+  })
+})
+
+describe('SvCircularProgress', () => {
+  it('sets the ring dashoffset from the value', () => {
+    const { target, destroy } = mountC(SvCircularProgress, { value: 75, size: 48, thickness: 4, showLabel: true })
+    try {
+      const bar = target.querySelector<HTMLElement>('[role="progressbar"]')!
+      expect(bar.getAttribute('aria-valuenow')).toBe('75')
+      const arc = target.querySelector<SVGCircleElement>('.sv-circ__arc')!
+      const circ = 2 * Math.PI * ((48 - 4) / 2)
+      expect(Number(arc.getAttribute('stroke-dasharray'))).toBeCloseTo(circ, 3)
+      // 75% -> 25% of the circumference remains as offset.
+      expect(Number(arc.getAttribute('stroke-dashoffset'))).toBeCloseTo(circ * 0.25, 3)
+      expect(target.querySelector('.sv-circ__label')!.textContent).toBe('75%')
+    } finally { destroy() }
+  })
+})

package/src/recurrence.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, it } from 'vitest'
+import { matchesRecurrence, expandRecurrence, type RecurrenceRule } from './recurrence'
+
+// Fixed reference dates (local time). 2026-07-01 is a Wednesday.
+const D = (s: string) => new Date(`${s}T00:00:00`)
+
+describe('matchesRecurrence - weekly', () => {
+  const weekdays: RecurrenceRule = { freq: 'weekly', weekdays: [1, 2, 3, 4, 5] } // Mon..Fri
+  it('matches weekdays, not weekends', () => {
+    expect(matchesRecurrence(D('2026-07-06'), weekdays)).toBe(true) // Monday
+    expect(matchesRecurrence(D('2026-07-10'), weekdays)).toBe(true) // Friday
+    expect(matchesRecurrence(D('2026-07-11'), weekdays)).toBe(false) // Saturday
+    expect(matchesRecurrence(D('2026-07-12'), weekdays)).toBe(false) // Sunday
+  })
+
+  it('every other Monday with an interval + anchor', () => {
+    const r: RecurrenceRule = { freq: 'weekly', weekdays: [1], interval: 2, from: D('2026-07-06') }
+    expect(matchesRecurrence(D('2026-07-06'), r)).toBe(true) // anchor Monday
+    expect(matchesRecurrence(D('2026-07-13'), r)).toBe(false) // next Monday (odd week)
+    expect(matchesRecurrence(D('2026-07-20'), r)).toBe(true) // +2 weeks
+    expect(matchesRecurrence(D('2026-07-07'), r)).toBe(false) // Tuesday
+  })
+
+  it("falls back to the anchor's weekday when no weekdays given", () => {
+    const r: RecurrenceRule = { freq: 'weekly', from: D('2026-07-01') } // Wednesday
+    expect(matchesRecurrence(D('2026-07-08'), r)).toBe(true) // Wednesday
+    expect(matchesRecurrence(D('2026-07-09'), r)).toBe(false) // Thursday
+  })
+})
+
+describe('matchesRecurrence - monthly / yearly / daily', () => {
+  it('monthly on a day-of-month', () => {
+    const r: RecurrenceRule = { freq: 'monthly', day: 1 }
+    expect(matchesRecurrence(D('2026-07-01'), r)).toBe(true)
+    expect(matchesRecurrence(D('2026-08-01'), r)).toBe(true)
+    expect(matchesRecurrence(D('2026-08-02'), r)).toBe(false)
+  })
+
+  it('monthly with an interval + anchor (every 3 months, the 15th)', () => {
+    const r: RecurrenceRule = { freq: 'monthly', day: 15, interval: 3, from: D('2026-01-15') }
+    expect(matchesRecurrence(D('2026-01-15'), r)).toBe(true)
+    expect(matchesRecurrence(D('2026-02-15'), r)).toBe(false)
+    expect(matchesRecurrence(D('2026-04-15'), r)).toBe(true)
+  })
+
+  it('yearly on a month + day', () => {
+    const r: RecurrenceRule = { freq: 'yearly', month: 11, day: 25 } // Dec 25
+    expect(matchesRecurrence(D('2026-12-25'), r)).toBe(true)
+    expect(matchesRecurrence(D('2027-12-25'), r)).toBe(true)
+    expect(matchesRecurrence(D('2026-12-24'), r)).toBe(false)
+  })
+
+  it('daily every N days from an anchor', () => {
+    const r: RecurrenceRule = { freq: 'daily', interval: 3, from: D('2026-07-01') }
+    expect(matchesRecurrence(D('2026-07-01'), r)).toBe(true)
+    expect(matchesRecurrence(D('2026-07-02'), r)).toBe(false)
+    expect(matchesRecurrence(D('2026-07-04'), r)).toBe(true)
+  })
+})
+
+describe('matchesRecurrence - bounds + combining', () => {
+  it('respects from / until', () => {
+    const r: RecurrenceRule = { freq: 'daily', from: D('2026-07-05'), until: D('2026-07-08') }
+    expect(matchesRecurrence(D('2026-07-04'), r)).toBe(false) // before
+    expect(matchesRecurrence(D('2026-07-06'), r)).toBe(true) // inside
+    expect(matchesRecurrence(D('2026-07-09'), r)).toBe(false) // after until
+  })
+
+  it('matches if ANY rule in a list matches', () => {
+    const rules: RecurrenceRule[] = [
+      { freq: 'weekly', weekdays: [1] }, // Mondays
+      { freq: 'monthly', day: 1 }, // the 1st
+    ]
+    expect(matchesRecurrence(D('2026-07-06'), rules)).toBe(true) // Monday
+    expect(matchesRecurrence(D('2026-07-01'), rules)).toBe(true) // the 1st (a Wednesday)
+    expect(matchesRecurrence(D('2026-07-02'), rules)).toBe(false)
+  })
+
+  it('returns false for empty / nullish rules', () => {
+    expect(matchesRecurrence(D('2026-07-01'), null)).toBe(false)
+    expect(matchesRecurrence(D('2026-07-01'), [])).toBe(false)
+  })
+})
+
+describe('expandRecurrence', () => {
+  it('lists the matching dates in a range', () => {
+    const r: RecurrenceRule = { freq: 'weekly', weekdays: [1] } // Mondays
+    const dates = expandRecurrence(r, D('2026-07-01'), D('2026-07-31')).map((d) => d.getDate())
+    expect(dates).toEqual([6, 13, 20, 27])
+  })
+})

package/src/recurrence.ts

@@ -0,0 +1,111 @@
+/**
+ * recurrence - a small, pure repeat-pattern engine for SvCalendar (and anywhere
+ * you need "does this date match a recurring rule"). Supports daily / weekly /
+ * monthly / yearly frequencies with an interval, weekday lists, a day-of-month,
+ * an anchor (`from`) and an inclusive `until`. Framework-free + pure so it is
+ * unit-tested directly - no RRULE dependency.
+ *
+ * ```ts
+ * const standup = { freq: 'weekly', weekdays: [1, 2, 3, 4, 5] } // every weekday
+ * const payday  = { freq: 'monthly', day: 1 }                   // the 1st
+ * const sprint  = { freq: 'weekly', weekdays: [1], interval: 2, from: '2026-01-05' } // every other Monday
+ * matchesRecurrence(someDate, [standup, payday, sprint])
+ * ```
+ */
+import { startOfDay, startOfWeek, toDate, type DateLike } from './datetime/date-core'
+
+export type RecurrenceFreq = 'daily' | 'weekly' | 'monthly' | 'yearly'
+
+export type RecurrenceRule = {
+  freq: RecurrenceFreq
+  /** Repeat every N units of `freq`. Default 1. Uses `from` as the phase anchor. */
+  interval?: number
+  /** weekly: the weekdays it lands on (0 = Sunday .. 6 = Saturday). */
+  weekdays?: ReadonlyArray<number>
+  /** monthly / yearly: day of the month (1..31). */
+  day?: number
+  /** yearly: the month (0 = January .. 11 = December). */
+  month?: number
+  /** First occurrence + the phase for `interval`. */
+  from?: DateLike
+  /** Last day the pattern applies (inclusive). */
+  until?: DateLike | null
+}
+
+const MS_DAY = 86_400_000
+/** Whole-day index, rounded so DST transitions don't shift it. */
+const dayIndex = (d: Date) => Math.round(startOfDay(d).getTime() / MS_DAY)
+
+function matchesRule(date: Date, r: RecurrenceRule): boolean {
+  const d = startOfDay(date)
+  const fromD = r.from != null ? startOfDay(toDate(r.from) ?? d) : null
+  const untilD = r.until != null ? startOfDay(toDate(r.until) ?? d) : null
+  if (fromD && d < fromD) return false
+  if (untilD && d > untilD) return false
+  const interval = Math.max(1, Math.floor(r.interval ?? 1))
+
+  switch (r.freq) {
+    case 'daily':
+      if (!fromD) return true
+      return (dayIndex(d) - dayIndex(fromD)) % interval === 0
+
+    case 'weekly': {
+      // The weekdays it repeats on: an explicit list, else the anchor's weekday.
+      const weekdays = r.weekdays && r.weekdays.length ? r.weekdays : fromD ? [fromD.getDay()] : null
+      if (!weekdays) return false
+      if (!weekdays.includes(d.getDay())) return false
+      if (interval > 1 && fromD) {
+        const weeks = Math.round(
+          (startOfWeek(d, 0).getTime() - startOfWeek(fromD, 0).getTime()) / (MS_DAY * 7),
+        )
+        if (weeks % interval !== 0) return false
+      }
+      return true
+    }
+
+    case 'monthly': {
+      const dom = r.day ?? fromD?.getDate()
+      if (dom != null && d.getDate() !== dom) return false
+      if (!fromD) return dom != null
+      const months = (d.getFullYear() - fromD.getFullYear()) * 12 + (d.getMonth() - fromD.getMonth())
+      return months % interval === 0
+    }
+
+    case 'yearly': {
+      if (r.month != null && d.getMonth() !== r.month) return false
+      const dom = r.day ?? fromD?.getDate()
+      if (dom != null && d.getDate() !== dom) return false
+      if (!fromD) return r.month != null || dom != null
+      return (d.getFullYear() - fromD.getFullYear()) % interval === 0
+    }
+  }
+}
+
+/** Whether `date` matches any of the given recurrence rule(s). */
+export function matchesRecurrence(
+  date: Date,
+  rules: RecurrenceRule | ReadonlyArray<RecurrenceRule> | null | undefined,
+): boolean {
+  if (!rules) return false
+  const list = Array.isArray(rules) ? rules : [rules as RecurrenceRule]
+  return list.some((r) => matchesRule(date, r))
+}
+
+/** Every matching date within [start, end] (inclusive), in order - for building
+ *  event lists / agendas. Bounded to avoid runaway loops. */
+export function expandRecurrence(
+  rules: RecurrenceRule | ReadonlyArray<RecurrenceRule> | null | undefined,
+  start: Date,
+  end: Date,
+): Date[] {
+  if (!rules) return []
+  const out: Date[] = []
+  const last = startOfDay(end)
+  let cur = startOfDay(start)
+  let guard = 0
+  while (cur <= last && guard++ < 4000) {
+    if (matchesRecurrence(cur, rules)) out.push(cur)
+    cur = new Date(cur.getFullYear(), cur.getMonth(), cur.getDate() + 1)
+  }
+  return out
+}

package/src/server-data-source.ts

@@ -31,6 +31,9 @@ export type ServerFilterModel = {
   >
 }
 
+/** A value column to roll up per group. */
+export type ServerAggregation = { col: string; fn: 'sum' | 'avg' | 'min' | 'max' | 'count' }
+
 export type ServerRequest = {
   /** Zero-based index of the first row wanted (inclusive). */
   startRow: number
@@ -40,8 +43,103 @@ export type ServerRequest = {
   pageSize: number
   sortModel: ServerSortModel
   filterModel: ServerFilterModel
+  /**
+   * Server-side grouping / tree: the columns being grouped on, outer to inner.
+   * Omitted / empty for a flat request.
+   */
+  groupBy?: string[]
+  /**
+   * The path of group keys the grid is expanding, e.g. `['Germany', 'Berlin']`.
+   * Empty (`[]`) asks for the top level. When `groupKeys.length < groupBy.length`
+   * the server returns **group rows** (one per distinct key at this level,
+   * carrying the group key + aggregates); when they are equal it returns the
+   * **leaf rows** under that path.
+   */
+  groupKeys?: string[]
+  /** Value columns to aggregate per group. */
+  aggregations?: ServerAggregation[]
+}
+
+/**
+ * A group row in the server-side group/tree model - one distinct key at a
+ * level, with its rolled-up aggregates. The grid renders it with an expander;
+ * expanding it fetches its children through the same `getRows`.
+ */
+export type ServerGroupRow<TData> = {
+  kind: 'group'
+  /** Stable id (the group path). */
+  id: string
+  /** Group keys from the root to this node, e.g. `['Germany', 'Berlin']`. */
+  path: string[]
+  /** The column this group is on (the `groupBy` entry for this level). */
+  field: string
+  /** This group's key value. */
+  key: string
+  /** Zero-based depth (0 = top level). */
+  level: number
+  expanded: boolean
+  loading: boolean
+  /** Aggregate values keyed by column id, read from the group's response row. */
+  aggregates: Record<string, unknown>
+  /** The raw response row for this group (key + aggregates), for cell rendering. */
+  data: TData
+}
+
+export type ServerLeafRow<TData> = {
+  kind: 'leaf'
+  id: string
+  level: number
+  data: TData
 }
 
+/**
+ * A "load more" affordance emitted at the end of a group whose children are
+ * only partially loaded (intra-group paging). Trigger `loadMoreChildren(path)`
+ * to fetch the next block.
+ */
+export type ServerMoreRow = {
+  kind: 'more'
+  id: string
+  level: number
+  /** Path of the parent group whose children to load more of. */
+  path: string[]
+  /** How many children remain unloaded. */
+  remaining: number
+  loading: boolean
+}
+
+/**
+ * A subtotal / footer row emitted after an expanded group's children when
+ * `groupFooters` is on. Carries the group's aggregates a second time so a
+ * "Total" line sits under the detail.
+ */
+export type ServerFooterRow<TData> = {
+  kind: 'footer'
+  id: string
+  level: number
+  path: string[]
+  /** The group this footer totals (its key). */
+  key: string
+  aggregates: Record<string, unknown>
+  /** The group's response row (key + aggregates), so value columns show totals. */
+  data: TData
+}
+
+/** A placeholder row shown while a block of children is being fetched. */
+export type ServerSkeletonRow = {
+  kind: 'skeleton'
+  id: string
+  level: number
+}
+
+/** A row in the flattened server-side group/tree display list. */
+export type ServerDisplayRow<TData> =
+  | ServerGroupRow<TData>
+  | ServerLeafRow<TData>
+  | ServerMoreRow
+  | ServerFooterRow<TData>
+  | ServerSkeletonRow
+
 export type ServerResult<TData> = {
   rows: ReadonlyArray<TData>
   /** Total row count after filtering (for the pager). */
@@ -161,6 +259,10 @@ export function createServerDataSource<TData>(
         pageSize: state.pageSize,
         sortModel: state.sortModel,
         filterModel: state.filterModel,
+        // Flat mode: no grouping. Group mode lives in createServerGroupModel.
+        groupBy: [],
+        groupKeys: [],
+        aggregations: [],
       })
       if (disposed || id !== requestSeq) return // stale
       state.rows = result.rows