@svgrid/grid 2.1.6 → 2.1.7

package/dist/index.js

@@ -150,8 +150,9 @@ export { isDisabledDay, isOutOfRange, isRestricted, isImportant, } from './datet
 export { default as FlexRender } from './FlexRender.svelte';
 export { renderComponent, renderSnippet } from './render-component';
 export { default as SvGridChart } from './SvGridChart.svelte';
-export { buildChart, rowsToChartSpec, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, } from './chart';
-export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, } from './chart-export';
+export { default as SvGridChartPanel } from './SvGridChartPanel.svelte';
+export { buildChart, formatChartValue, rowsToChartSpec, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, } from './chart';
+export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, chartSpecToCsv, downloadChartCsv, } from './chart-export';
 export { buildSparkline, toSparklineValues, } from './sparkline';
 export { spreadsheetLayout, spansToMerges, } from './spreadsheet';
 export { rowResize } from './row-resize';

package/dist/svgrid-wrapper.types.d.ts

@@ -1,5 +1,6 @@
 import type { CellFormatConfig, ColumnDef, RowData, SvGridOptions, TableFeatures } from './core';
 import type { GridExportOptions, GridClipboardOptions } from './export-format';
+import type { ChartSpec, ChartType } from './chart';
 export type SvGridFilterOperator = 'contains' | 'equals' | 'startsWith' | 'greaterThan' | 'lessThan' | 'between' | 'isBlank';
 /**
  * A serializable snapshot of everything that makes up the current "view":
@@ -34,6 +35,32 @@ export type SvGridViewState = {
     }>;
     /** Facet (Excel-style value checklist) selections, keyed by column id. */
     facetFilters: Record<string, string[]>;
+    /** Built-in chart panel state (present only when `charting` is on): the
+     *  ACTIVE chart, for back-compat + spread-and-tweak. */
+    chart?: {
+        open: boolean;
+        type: ChartType;
+        dimension: string | null;
+        series: string | null;
+        measure: string | null;
+        reduce: 'sum' | 'avg' | 'count';
+        stacked: boolean;
+    };
+    /** All charts in the tab strip (multi-chart), plus the active index. */
+    charts?: Array<{
+        title: string;
+        type: ChartType;
+        dimension: string | null;
+        series: string | null;
+        measure: string | null;
+        reduce: 'sum' | 'avg' | 'count';
+        stacked: boolean | null;
+        dataLabels: boolean | null;
+        logScale: boolean | null;
+        timeAxis: boolean | null;
+        valueFormat: 'number' | 'currency' | 'percent' | 'compact' | null;
+    }>;
+    chartActive?: number;
 };
 /**
  * A batch of row mutations for `api.applyTransaction`. `update` / `remove`
@@ -85,6 +112,37 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
      * `selectCells` accepts. Empty array when no range is active.
      */
     getSelected(): Array<[number, number, number, number]>;
+    /** Open the built-in chart panel. */
+    openChart(): void;
+    /** Close the built-in chart panel. */
+    closeChart(): void;
+    /** The live chart spec the panel is rendering, or `null`. */
+    getChartSpec(): ChartSpec | null;
+    /** Select cell rectangles + open the chart panel (scopes to the range). */
+    chartRange(ranges?: ReadonlyArray<readonly [number, number, number, number]>): void;
+    /**
+     * Configure the built-in chart panel's ACTIVE chart. Column references
+     * accept a column id OR field name. Opens the panel unless `open === false`.
+     */
+    configureChart(config: {
+        open?: boolean;
+        type?: ChartType;
+        dimension?: string | null;
+        series?: string | null;
+        measure?: string | null;
+        reduce?: 'sum' | 'avg' | 'count';
+        stacked?: boolean;
+        dataLabels?: boolean;
+        logScale?: boolean;
+        timeAxis?: boolean;
+        valueFormat?: 'number' | 'currency' | 'percent' | 'compact';
+    }): void;
+    /**
+     * Register a natural-language "chart this" handler. When set, the chart
+     * panel shows an AI button. `@svgrid/enterprise`'s `enableAiCharting(api)`
+     * fills this. Pass `null` to remove it.
+     */
+    setChartAiHandler(handler: ((prompt: string) => Promise<Record<string, unknown> | null>) | null): void;
     /** Add one row. `position` defaults to `'bottom'`. */
     addRow(row: TData, position?: 'top' | 'bottom' | number): void;
     addRows(rows: ReadonlyArray<TData>, position?: 'top' | 'bottom' | number): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "SvGrid - a headless-first, Svelte 5-native data grid engine and render component.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",

package/src/SvCarousel.svelte

@@ -12,6 +12,7 @@
    * ```
    */
   import type { Snippet } from 'svelte'
+  import { type EditorDir } from './editor-contract'
 
   type Props = {
     count: number
@@ -24,6 +25,8 @@
     arrows?: boolean
     dots?: boolean
     ariaLabel?: string
+    /** Text direction (rtl mirrors the prev/next arrows + slide direction). */
+    dir?: EditorDir
   }
 
   let {
@@ -35,8 +38,12 @@
     arrows = true,
     dots = true,
     ariaLabel = 'Carousel',
+    dir,
   }: Props = $props()
 
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+  const rtl = $derived(resolvedDir === 'rtl')
+
   function go(i: number) {
     if (count === 0) return
     current = loop ? (i + count) % count : Math.max(0, Math.min(i, count - 1))
@@ -44,10 +51,13 @@
   const next = () => go(current + 1)
   const prev = () => go(current - 1)
 
-  // Autoplay, paused while hovered/focused.
+  // Autoplay, paused while hovered/focused, or stopped via the persistent
+  // play/pause toggle (WCAG 2.2.2: auto-advancing content needs a way to stop
+  // it that doesn't depend on hover/focus).
   let paused = $state(false)
+  let userPaused = $state(false)
   $effect(() => {
-    if (!autoplay || paused || count < 2) return
+    if (!autoplay || paused || userPaused || count < 2) return
     const t = setInterval(next, autoplay)
     return () => clearInterval(t)
   })
@@ -82,9 +92,9 @@
 >
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div class="sv-carousel__viewport" onpointerdown={down} onpointermove={move} onpointerup={up} onpointercancel={up}>
-    <div class="sv-carousel__track" class:is-dragging={dragging} style:transform={`translateX(calc(${-current * 100}% + ${dx}px))`}>
+    <div class="sv-carousel__track" class:is-dragging={dragging} style:transform={`translateX(calc(${(rtl ? current : -current) * 100}% + ${dx}px))`}>
       {#each Array(count) as _, i (i)}
-        <div class="sv-carousel__slide" role="group" aria-roledescription="slide" aria-label={`${i + 1} of ${count}`} aria-hidden={i !== current}>
+        <div class="sv-carousel__slide" role="group" aria-roledescription="slide" aria-label={`${i + 1} of ${count}`} aria-hidden={i !== current} inert={i !== current}>
           {@render slide?.(i)}
         </div>
       {/each}
@@ -92,8 +102,8 @@
   </div>
 
   {#if arrows && count > 1}
-    <button type="button" class="sv-carousel__arrow is-prev" aria-label="Previous slide" onclick={prev} disabled={!loop && current === 0}>‹</button>
-    <button type="button" class="sv-carousel__arrow is-next" aria-label="Next slide" onclick={next} disabled={!loop && current === count - 1}>›</button>
+    <button type="button" class="sv-carousel__arrow is-prev" aria-label={rtl ? 'Next slide' : 'Previous slide'} onclick={rtl ? next : prev} disabled={rtl ? (!loop && current === count - 1) : (!loop && current === 0)}>{rtl ? '›' : '‹'}</button>
+    <button type="button" class="sv-carousel__arrow is-next" aria-label={rtl ? 'Previous slide' : 'Next slide'} onclick={rtl ? prev : next} disabled={rtl ? (!loop && current === 0) : (!loop && current === count - 1)}>{rtl ? '‹' : '›'}</button>
   {/if}
 
   {#if dots && count > 1}
@@ -103,6 +113,16 @@
       {/each}
     </div>
   {/if}
+
+  {#if autoplay > 0}
+    <button
+      type="button"
+      class="sv-carousel__playpause"
+      aria-label={userPaused ? 'Play autoplay' : 'Pause autoplay'}
+      aria-pressed={userPaused}
+      onclick={() => (userPaused = !userPaused)}
+    >{userPaused ? '▶' : '⏸'}</button>
+  {/if}
 </div>
 
 <style>
@@ -131,4 +151,13 @@
     background: color-mix(in srgb, var(--sg-fg, #0f172a) 30%, var(--sg-bg, #fff)); transition: background 0.15s, width 0.15s;
   }
   .sv-carousel__dot.is-active { width: 20px; border-radius: 4px; background: var(--sg-accent, #2563eb); }
+
+  .sv-carousel__playpause {
+    position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2;
+    width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
+    background: color-mix(in srgb, var(--sg-bg, #fff) 82%, transparent); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); cursor: pointer; font-size: 12px; line-height: 1;
+    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.3);
+  }
+  .sv-carousel__playpause:hover { background: var(--sg-bg, #fff); }
 </style>

package/src/SvColorInput.svelte

@@ -84,7 +84,6 @@
     const layer = createDismissableLayer({
       element: () => [triggerEl, panelEl],
       onDismiss: () => col.popover.close(),
-      closeOnEscape: false,
     })
     layer.activate()
     return () => {

package/src/SvContextMenu.svelte

@@ -18,6 +18,7 @@
   import type { Snippet } from 'svelte'
   import { portalToBody, popIn } from './popover'
   import { createDismissableLayer } from './a11y/dismissable'
+  import { createFocusTrap } from './a11y/focus-trap'
   import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
 
   type Props = {
@@ -33,6 +34,7 @@
   let open = $state(false)
   let pos = $state({ x: 0, y: 0 })
   let panelEl = $state<HTMLDivElement | null>(null)
+  let zoneEl = $state<HTMLDivElement | null>(null)
 
   const MENU_W = 200
   function openAt(clientX: number, clientY: number) {
@@ -50,9 +52,24 @@
     openAt(e.clientX, e.clientY)
   }
 
+  // Keyboard equivalent of a right-click: the ContextMenu key, or Shift+F10.
+  // Anchors at the focused zone's own position instead of the (nonexistent)
+  // pointer coordinates.
+  function onZoneKeydown(e: KeyboardEvent) {
+    if (disabled) return
+    const isMenuKey = e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)
+    if (!isMenuKey) return
+    e.preventDefault()
+    const rect = zoneEl?.getBoundingClientRect()
+    openAt(rect ? rect.left : 0, rect ? rect.bottom : 0)
+  }
+
   $effect(() => {
-    if (!open) return
-    queueMicrotask(() => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus())
+    if (!open || !panelEl) return
+    const trap = createFocusTrap(panelEl, {
+      initialFocus: () => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])') ?? null,
+    })
+    trap.activate()
     const layer = createDismissableLayer({
       element: () => panelEl,
       onDismiss: () => (open = false),
@@ -61,12 +78,12 @@
     // Reposition-close on scroll (a moved anchor would leave the menu stranded).
     const onScroll = () => (open = false)
     window.addEventListener('scroll', onScroll, true)
-    return () => { layer.release(); window.removeEventListener('scroll', onScroll, true) }
+    return () => { layer.release(); trap.release(); window.removeEventListener('scroll', onScroll, true) }
   })
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="sv-ctx__zone" oncontextmenu={onContextMenu}>
+<!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
+<div class="sv-ctx__zone" bind:this={zoneEl} tabindex={disabled ? -1 : 0} oncontextmenu={onContextMenu} onkeydown={onZoneKeydown}>
   {@render children?.()}
 </div>
 
@@ -86,7 +103,10 @@
 {/if}
 
 <style>
-  .sv-ctx__zone { display: contents; }
+  /* display:contents generates no box and per spec cannot receive focus - it
+     must be a real box for the keyboard-open path (tabindex) to work at all. */
+  .sv-ctx__zone { display: block; }
+  .sv-ctx__zone:focus-visible { outline: 2px solid var(--sg-accent, #6366f1); outline-offset: 1px; }
   :global(.sv-ctx) {
     z-index: 2147483646; min-width: 200px;
     background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);

package/src/SvDrawer.svelte

@@ -171,12 +171,14 @@
     box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.5);
     overflow: hidden;
   }
-  /* Left / right: full height, fixed width, slide along X. */
+  /* Left / right: full height, fixed width, slide along X. `side` is a stated
+     physical edge (like SvToaster's position prop), not a text-flow-relative
+     "start/end" - so it stays physical left/right regardless of page dir. */
   :global(.sv-drawer--right), :global(.sv-drawer--left) {
     top: 0; bottom: 0; width: var(--sv-drawer-size); max-width: 100vw;
   }
-  :global(.sv-drawer--right) { inset-inline-end: 0; border-inline-start: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-right 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
-  :global(.sv-drawer--left) { inset-inline-start: 0; border-inline-end: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-left 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
+  :global(.sv-drawer--right) { right: 0; border-left: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-right 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
+  :global(.sv-drawer--left) { left: 0; border-right: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-left 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
   /* Top / bottom: full width, fixed height, slide along Y. */
   :global(.sv-drawer--top), :global(.sv-drawer--bottom) {
     left: 0; right: 0; height: var(--sv-drawer-size); max-height: 100vh;