compote-ui 0.79.0 → 0.79.2

package/dist/components/data-table-v9/create-table.svelte.js

@@ -1,9 +1,10 @@
-import { createTable as createSvelteTable } from '@tanstack/svelte-table';
+import { createTable as createSvelteTable, functionalUpdate } from '@tanstack/svelte-table';
 import { useLocaleContext } from '@ark-ui/svelte/locale';
 import { onDestroy } from 'svelte';
 import { renderComponent, renderSnippet } from '@tanstack/svelte-table';
 import { dataTableFeatures } from './features';
 import { TYPE_NUMBER_FORMAT_DEFAULTS } from './data-table-utils';
+import { changedFilterIds, FilterRevisions, registerFilterRevisions } from './filter-revisions.svelte';
 import { formatSelectValue, matchesSelectFilter, selectCellValues } from '../../utils/select-filter';
 const oneOfFilterFn = (row, columnId, filterValue) => {
     return matchesSelectFilter(row.getValue(columnId), filterValue);
@@ -20,6 +21,7 @@ export function createTable(options) {
     // memoization isn't invalidated on every access. Pass `columns` through a
     // getter (like `data`) to make adding/removing/reordering columns reactive.
     const columnDefs = $derived(createColumns(options.columns, localeCtx));
+    const filterRevisions = new FilterRevisions();
     const table = createSvelteTable({
         features: dataTableFeatures,
         get data() {
@@ -48,6 +50,14 @@ export function createTable(options) {
                 .flatRows[0]?.getAllCellsByColumnId()[column.id]?.getValue();
             return value == null || typeof value === 'string' || typeof value === 'number';
         }),
+        // Same write as TanStack's default handler, plus a per-column revision bump so
+        // ColumnFilter can tell a filter changed even when it ends on its old value.
+        onColumnFiltersChange: ((updater) => {
+            const atom = table.baseAtoms.columnFilters;
+            const prev = atom.get();
+            atom.set((old) => functionalUpdate(updater, old));
+            filterRevisions.bump(changedFilterIds(prev, atom.get()));
+        }),
         debugTable: options.debugTable,
         initialState: {
             columnVisibility: initialColumnVisibility,
@@ -79,6 +89,7 @@ export function createTable(options) {
         });
         onDestroy(() => subscription.unsubscribe());
     }
+    registerFilterRevisions(table, filterRevisions);
     return table;
 }
 function createColumnVisibility(columns) {

package/dist/components/data-table-v9/filter-revisions.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ColumnFiltersState } from '@tanstack/svelte-table';
+/**
+ * A per-column counter that goes up on every change to that column's filter value. Unlike
+ * the value itself it never returns to an earlier state, so a filter cleared and then set
+ * back to the same value still reads as changed (the ABA case a value comparison misses).
+ */
+export declare class FilterRevisions {
+    #private;
+    get(columnId: string): number;
+    bump(columnIds: string[]): void;
+}
+/** Ids of the columns whose filter value differs (by reference) between two filter states. */
+export declare function changedFilterIds(prev: ColumnFiltersState, next: ColumnFiltersState): string[];
+/** Links a table to its filter revisions (done by `createTable`). */
+export declare function registerFilterRevisions(table: object, revisions: FilterRevisions): void;
+/** The filter revisions of a table made by `createTable`; undefined for any other table. */
+export declare function getFilterRevisions(table: object): FilterRevisions | undefined;

package/dist/components/data-table-v9/filter-revisions.svelte.js

@@ -0,0 +1,42 @@
+/**
+ * A per-column counter that goes up on every change to that column's filter value. Unlike
+ * the value itself it never returns to an earlier state, so a filter cleared and then set
+ * back to the same value still reads as changed (the ABA case a value comparison misses).
+ */
+export class FilterRevisions {
+    // Raw record replaced on change: reads in templates/deriveds stay reactive.
+    #revisions = $state.raw({});
+    get(columnId) {
+        return this.#revisions[columnId] ?? 0;
+    }
+    bump(columnIds) {
+        if (columnIds.length === 0)
+            return;
+        const next = { ...this.#revisions };
+        for (const id of columnIds)
+            next[id] = (next[id] ?? 0) + 1;
+        this.#revisions = next;
+    }
+}
+/** Ids of the columns whose filter value differs (by reference) between two filter states. */
+export function changedFilterIds(prev, next) {
+    if (prev === next)
+        return [];
+    const before = Object.create(null);
+    const after = Object.create(null);
+    for (const filter of prev)
+        before[filter.id] = filter.value;
+    for (const filter of next)
+        after[filter.id] = filter.value;
+    const ids = Object.keys({ ...before, ...after });
+    return ids.filter((id) => !Object.is(before[id], after[id]));
+}
+const registry = new WeakMap();
+/** Links a table to its filter revisions (done by `createTable`). */
+export function registerFilterRevisions(table, revisions) {
+    registry.set(table, revisions);
+}
+/** The filter revisions of a table made by `createTable`; undefined for any other table. */
+export function getFilterRevisions(table) {
+    return registry.get(table);
+}

package/dist/components/data-table-v9/toolbar/data-table-column-filter.svelte

@@ -18,6 +18,9 @@
 		type SelectFilterOption,
 		type SelectFilterValue
 	} from '../../../utils/select-filter';
+	import { mergeRangeFilter, rangeBounds, type PendingRange } from '../../../utils/range-filter';
+	import { DebouncedFilterEdits } from '../../../utils/debounced-filter-edit.svelte';
+	import { getFilterRevisions } from '../filter-revisions.svelte';
 
 	type Props = {
 		table: DataTableInstance<T>;
@@ -30,11 +33,23 @@
 	// Popover and tooltip share one trigger element, so both must agree on its id.
 	const triggerId = $props.id();
 
-	let localText: Record<string, string> = $state({});
-	let localNumMin: Record<string, number> = $state({});
-	let localNumMax: Record<string, number> = $state({});
+	// Debounced edits not committed yet. A control shows its pending edit if there is one,
+	// otherwise the column's live filter value — so a filter changed from outside (the app
+	// calling setFilterValue / setColumnFilters / resetColumnFilters) never leaves a stale
+	// value in the inputs, an edit pending during that change is dropped rather than
+	// re-applied, and committing one range bound never restores the other's old value.
+	const textEdits = new DebouncedFilterEdits<string>();
+	const rangeEdits = new DebouncedFilterEdits<PendingRange>();
+
+	// What an edit is based on: the column's filter revision, which only ever goes up, so a
+	// filter cleared and set back to its old value still makes the edit stale. Tables not
+	// made by compote's createTable have no revisions; fall back to the filter value.
+	const filterRevisions = $derived(getFilterRevisions(table));
+	function editBase(column: Column<DataTableFeatures, T, unknown>): unknown {
+		return filterRevisions ? filterRevisions.get(column.id) : column.getFilterValue();
+	}
+
 	let localSelectSearch: Record<string, string> = $state({});
-	const timers: Record<string, ReturnType<typeof setTimeout>> = {};
 
 	const columnFilters = $derived.by(() => table.atoms.columnFilters.get());
 	const columnVisibility = $derived.by(() => table.atoms.columnVisibility.get());
@@ -73,7 +88,8 @@
 	});
 
 	onDestroy(() => {
-		Object.values(timers).forEach(clearTimeout);
+		textEdits.cancelAll();
+		rangeEdits.cancelAll();
 	});
 
 	function getColumnType(column: Column<DataTableFeatures, T, unknown>): string | undefined {
@@ -93,22 +109,15 @@
 
 	function removeFilter(column: Column<DataTableFeatures, T, unknown>) {
 		manualFilterIds = manualFilterIds.filter((id) => id !== column.id);
+		textEdits.cancel(column.id);
+		rangeEdits.cancel(column.id);
 		column.setFilterValue(undefined);
-		delete localText[column.id];
-		delete localNumMin[column.id];
-		delete localNumMax[column.id];
 		delete localSelectSearch[column.id];
-		clearTimeout(timers[column.id]);
-		clearTimeout(timers[`${column.id}_min`]);
-		clearTimeout(timers[`${column.id}_max`]);
 	}
 
 	function clearFilters() {
-		Object.values(timers).forEach(clearTimeout);
-		for (const key of Object.keys(timers)) delete timers[key];
-		localText = {};
-		localNumMin = {};
-		localNumMax = {};
+		textEdits.cancelAll();
+		rangeEdits.cancelAll();
 		localSelectSearch = {};
 		manualFilterIds = [];
 		showColumnPicker = false;
@@ -116,12 +125,39 @@
 		table.resetColumnFilters();
 	}
 
+	function getTextValue(column: Column<DataTableFeatures, T, unknown>): string {
+		const value = column.getFilterValue();
+		return textEdits.get(column.id, editBase(column)) ?? (typeof value === 'string' ? value : '');
+	}
+
+	/**
+	 * Whether `column` still has a filter card. A card torn down by an outside change can
+	 * still emit — Ark's NumberInput commits the typed number on the blur its unmount
+	 * triggers — and that must not write back a filter the app just cleared.
+	 */
+	function isCardActive(column: Column<DataTableFeatures, T, unknown>): boolean {
+		return activeFilterIds.includes(column.id);
+	}
+
 	function handleTextInput(column: Column<DataTableFeatures, T, unknown>, value: string) {
-		localText[column.id] = value;
-		clearTimeout(timers[column.id]);
-		timers[column.id] = setTimeout(() => {
-			column.setFilterValue(value || undefined);
-		}, 300);
+		if (!isCardActive(column)) return;
+		textEdits.edit(
+			column.id,
+			editBase(column),
+			() => value,
+			() => editBase(column),
+			(text) => column.setFilterValue(text || undefined)
+		);
+	}
+
+	function getRangeBound(
+		column: Column<DataTableFeatures, T, unknown>,
+		which: 'min' | 'max'
+	): number | null {
+		const value = column.getFilterValue();
+		const pending = rangeEdits.get(column.id, editBase(column));
+		if (pending && which in pending) return pending[which] ?? null;
+		return rangeBounds(value)[which === 'min' ? 0 : 1] ?? null;
 	}
 
 	function handleNumericInput(
@@ -129,19 +165,14 @@
 		which: 'min' | 'max',
 		value: number | null
 	) {
-		if (value === null) {
-			if (which === 'min') delete localNumMin[column.id];
-			else delete localNumMax[column.id];
-		} else {
-			if (which === 'min') localNumMin[column.id] = value;
-			else localNumMax[column.id] = value;
-		}
-		clearTimeout(timers[`${column.id}_${which}`]);
-		timers[`${column.id}_${which}`] = setTimeout(() => {
-			const min = localNumMin[column.id];
-			const max = localNumMax[column.id];
-			column.setFilterValue(min === undefined && max === undefined ? undefined : [min, max]);
-		}, 300);
+		if (!isCardActive(column)) return;
+		rangeEdits.edit(
+			column.id,
+			editBase(column),
+			(pending) => ({ ...pending, [which]: value }),
+			() => editBase(column),
+			(pending) => column.setFilterValue(mergeRangeFilter(column.getFilterValue(), pending))
+		);
 	}
 
 	function getSelectValues(column: Column<DataTableFeatures, T, unknown>): SelectFilterValue[] {
@@ -246,32 +277,26 @@
 												<NumberInput
 													layout="horizontal"
 													label="From"
-													value={localNumMin[column.id] ?? null}
+													bind:value={
+														() => getRangeBound(column, 'min'),
+														(bound) => handleNumericInput(column, 'min', bound ?? null)
+													}
 													min={facetMin}
 													max={facetMax}
 													formatOptions={colFormatOptions}
-													onValueChange={({ valueAsNumber }) =>
-														handleNumericInput(
-															column,
-															'min',
-															isNaN(valueAsNumber) ? null : valueAsNumber
-														)}
 												/>
 											</div>
 											<div class="min-w-0 flex-1">
 												<NumberInput
 													layout="horizontal"
 													label="To"
-													value={localNumMax[column.id] ?? null}
+													bind:value={
+														() => getRangeBound(column, 'max'),
+														(bound) => handleNumericInput(column, 'max', bound ?? null)
+													}
 													min={facetMin}
 													max={facetMax}
 													formatOptions={colFormatOptions}
-													onValueChange={({ valueAsNumber }) =>
-														handleNumericInput(
-															column,
-															'max',
-															isNaN(valueAsNumber) ? null : valueAsNumber
-														)}
 												/>
 											</div>
 										</div>
@@ -372,9 +397,10 @@
 										<Field.Root hideMessageLine>
 											<Field.Input
 												placeholder="Search..."
-												value={localText[column.id] ?? ''}
-												oninput={(e: Event) =>
-													handleTextInput(column, (e.currentTarget as HTMLInputElement).value)}
+												bind:value={
+													() => getTextValue(column),
+													(text) => handleTextInput(column, String(text ?? ''))
+												}
 											/>
 										</Field.Root>
 									{/if}

package/dist/components/number-input/number-input.svelte

@@ -4,6 +4,7 @@
 	import type { NumberInputProps } from './types';
 	import { PhCaretDown, PhCaretUp } from '../../icons';
 	import { useLocaleContext } from '@ark-ui/svelte/locale';
+	import { toNumberInputValue } from '../../utils/number-input-value';
 
 	let {
 		value = $bindable(),
@@ -28,12 +29,7 @@
 	{...restProps}
 	allowMouseWheel
 	locale={locale().locale}
-	value={value != null
-		? new Intl.NumberFormat(locale().locale, {
-				useGrouping: false,
-				maximumFractionDigits: 20
-			}).format(value)
-		: undefined}
+	value={toNumberInputValue(value, locale().locale, restProps.defaultValue !== undefined)}
 	readOnly={readonly}
 	onValueChange={(valueChangeDetails) => {
 		onValueChange?.(valueChangeDetails);

package/dist/utils/debounced-filter-edit.svelte.d.ts

@@ -0,0 +1,16 @@
+export declare class DebouncedFilterEdits<T> {
+    #private;
+    constructor(delay?: number);
+    /** The pending edit for `id`, or undefined when there is none or it went stale. */
+    get(id: string, current: unknown): T | undefined;
+    /**
+     * Records an edit against the filter's `current` value: `update` receives the live
+     * pending edit (undefined when there is none or it went stale) and returns the new one.
+     * After the delay, `commit` runs with it — unless `read()` shows the filter changed.
+     */
+    edit(id: string, current: unknown, update: (pending: T | undefined) => T, read: () => unknown, commit: (value: T) => void): void;
+    /** Drops the pending edit for `id` without committing it. */
+    cancel(id: string): void;
+    /** Drops every pending edit without committing. */
+    cancelAll(): void;
+}

package/dist/utils/debounced-filter-edit.svelte.js

@@ -0,0 +1,56 @@
+export class DebouncedFilterEdits {
+    // Raw, not deep: `base` must stay the exact filter value it is compared against — a deep
+    // $state would proxy an array base (a range) and `Object.is` would never match it again.
+    #pending = $state.raw({});
+    // Timer handles are bookkeeping, never rendered — a reactive map would only add overhead.
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    #timers = new Map();
+    #delay;
+    constructor(delay = 300) {
+        this.#delay = delay;
+    }
+    /** The pending edit for `id`, or undefined when there is none or it went stale. */
+    get(id, current) {
+        const pending = this.#pending[id];
+        return pending && Object.is(pending.base, current) ? pending.value : undefined;
+    }
+    /**
+     * Records an edit against the filter's `current` value: `update` receives the live
+     * pending edit (undefined when there is none or it went stale) and returns the new one.
+     * After the delay, `commit` runs with it — unless `read()` shows the filter changed.
+     */
+    edit(id, current, update, read, commit) {
+        this.#pending = {
+            ...this.#pending,
+            [id]: { value: update(this.get(id, current)), base: current }
+        };
+        clearTimeout(this.#timers.get(id));
+        this.#timers.set(id, setTimeout(() => {
+            this.#timers.delete(id);
+            const pending = this.#pending[id];
+            this.#remove(id);
+            if (pending && Object.is(read(), pending.base))
+                commit(pending.value);
+        }, this.#delay));
+    }
+    /** Drops the pending edit for `id` without committing it. */
+    cancel(id) {
+        clearTimeout(this.#timers.get(id));
+        this.#timers.delete(id);
+        this.#remove(id);
+    }
+    /** Drops every pending edit without committing. */
+    cancelAll() {
+        for (const timer of this.#timers.values())
+            clearTimeout(timer);
+        this.#timers.clear();
+        this.#pending = {};
+    }
+    #remove(id) {
+        if (!(id in this.#pending))
+            return;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars -- dropped from the record
+        const { [id]: _removed, ...rest } = this.#pending;
+        this.#pending = rest;
+    }
+}

package/dist/utils/number-input-value.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The string value NumberInput hands to Ark's NumberInput.Root.
+ *
+ * An empty value (`null`, `undefined` or NaN) becomes `''`, a controlled empty value. Passing
+ * `undefined` instead would switch Ark to its internal state, which keeps showing the last
+ * number — so clearing a bound from outside (e.g. a filter going from [10, 100] to
+ * [undefined, 100]) would leave the 10 on screen. The one exception: an `undefined` value
+ * with a `defaultValue` set stays `undefined`, so uncontrolled use keeps working.
+ */
+export declare function toNumberInputValue(value: number | null | undefined, locale: string, hasDefaultValue?: boolean): string | undefined;

package/dist/utils/number-input-value.js

@@ -0,0 +1,15 @@
+/**
+ * The string value NumberInput hands to Ark's NumberInput.Root.
+ *
+ * An empty value (`null`, `undefined` or NaN) becomes `''`, a controlled empty value. Passing
+ * `undefined` instead would switch Ark to its internal state, which keeps showing the last
+ * number — so clearing a bound from outside (e.g. a filter going from [10, 100] to
+ * [undefined, 100]) would leave the 10 on screen. The one exception: an `undefined` value
+ * with a `defaultValue` set stays `undefined`, so uncontrolled use keeps working.
+ */
+export function toNumberInputValue(value, locale, hasDefaultValue = false) {
+    if (value == null || Number.isNaN(value)) {
+        return value === undefined && hasDefaultValue ? undefined : '';
+    }
+    return new Intl.NumberFormat(locale, { useGrouping: false, maximumFractionDigits: 20 }).format(value);
+}

package/dist/utils/range-filter.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Value handling for numeric range filters (`inNumberRange`): the filter value is a
+ * `[min, max]` tuple where either bound may be `undefined`.
+ */
+export type RangeFilterValue = [number | undefined, number | undefined];
+/** Bounds edited in the UI but not committed yet; `null` means the bound was cleared. */
+export type PendingRange = {
+    min?: number | null;
+    max?: number | null;
+};
+/** The `[min, max]` bounds of a range filter value, or both undefined when there is none. */
+export declare function rangeBounds(filterValue: unknown): RangeFilterValue;
+/**
+ * The filter value after committing `pending` edits onto the current filter value. A bound
+ * that wasn't edited keeps its current (live) value, so a stale bound can't come back after
+ * the filter was changed elsewhere. Returns `undefined` when both bounds are empty, which
+ * removes the filter.
+ */
+export declare function mergeRangeFilter(current: unknown, pending: PendingRange): RangeFilterValue | undefined;

package/dist/utils/range-filter.js

@@ -0,0 +1,23 @@
+/**
+ * Value handling for numeric range filters (`inNumberRange`): the filter value is a
+ * `[min, max]` tuple where either bound may be `undefined`.
+ */
+/** The `[min, max]` bounds of a range filter value, or both undefined when there is none. */
+export function rangeBounds(filterValue) {
+    if (!Array.isArray(filterValue))
+        return [undefined, undefined];
+    const [min, max] = filterValue;
+    return [typeof min === 'number' ? min : undefined, typeof max === 'number' ? max : undefined];
+}
+/**
+ * The filter value after committing `pending` edits onto the current filter value. A bound
+ * that wasn't edited keeps its current (live) value, so a stale bound can't come back after
+ * the filter was changed elsewhere. Returns `undefined` when both bounds are empty, which
+ * removes the filter.
+ */
+export function mergeRangeFilter(current, pending) {
+    const [currentMin, currentMax] = rangeBounds(current);
+    const min = 'min' in pending ? (pending.min ?? undefined) : currentMin;
+    const max = 'max' in pending ? (pending.max ?? undefined) : currentMax;
+    return min === undefined && max === undefined ? undefined : [min, max];
+}

package/dist/utils/select-filter.d.ts

@@ -30,5 +30,8 @@ export type SelectFilterOption = {
  * option (labelled `emptyLabel`) last.
  */
 export declare function selectFilterOptions(facets: Map<unknown, number>, emptyLabel?: string): SelectFilterOption[];
-/** Cell text for a select value: array items joined with `, `; undefined when empty. */
+/**
+ * Cell text for a select value: the same distinct items the Funnel lists, joined with `, `;
+ * undefined when empty.
+ */
 export declare function formatSelectValue(value: unknown): string | number | boolean | undefined;

package/dist/utils/select-filter.js

@@ -68,11 +68,14 @@ export function selectFilterOptions(facets, emptyLabel = '(empty)') {
     }
     return options;
 }
-/** Cell text for a select value: array items joined with `, `; undefined when empty. */
+/**
+ * Cell text for a select value: the same distinct items the Funnel lists, joined with `, `;
+ * undefined when empty.
+ */
 export function formatSelectValue(value) {
     if (Array.isArray(value)) {
-        const items = value.filter((item) => !isEmpty(item));
-        return items.length ? items.join(', ') : undefined;
+        const items = selectCellValues(value);
+        return items[0] === EMPTY_SELECT_VALUE ? undefined : items.join(', ');
     }
     return isEmpty(value) ? undefined : value;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.79.0",
+	"version": "0.79.2",
 	"license": "MIT",
 	"repository": {
 		"type": "git",

package/skills/component-usage/SKILL.md

@@ -8,7 +8,7 @@ description: >
 metadata:
   type: core
   library: compote-ui
-  library_version: '0.74.2'
+  library_version: '0.79.2'
 sources:
   - src/lib/index.ts
   - src/lib/utils/collections.ts

package/skills/component-usage/references/forms-and-inputs.md

@@ -172,6 +172,9 @@ If selection must be restricted to a fixed set (pick-only, no free text), use `C
 Props: `value?: number | null` (bindable), `label?`, `readonly?`, `layout?: 'vertical' | 'horizontal'`,
 plus Ark UI NumberInput props (`min`, `max`, `step`, `formatOptions`, `locale`).
 
+`value` is controlled: setting it to `null` from outside clears the input. Use `defaultValue`
+(a string) only for uncontrolled use, without passing `value`.
+
 ## PasswordInput
 
 Password field with a built-in show/hide toggle. The underlying `<input>` is a real DOM input —

package/skills/data-table/SKILL.md

@@ -8,7 +8,7 @@ description: >
 metadata:
   type: composition
   library: compote-ui
-  library_version: '0.79.0'
+  library_version: '0.79.2'
 requires:
   - component-usage
   - theming

package/skills/data-table/references/table-state-and-reactivity.md

@@ -28,6 +28,21 @@ const sorting = $derived(table.store.state.sorting);
 const filters = $derived(table.store.state.columnFilters);
 ```
 
+Change filters from app code with the table API — `column.setFilterValue(...)`,
+`table.setColumnFilters(...)`, `table.resetColumnFilters()`. `DataTable.ColumnFilter` shows the
+live filter value in its inputs (it only holds edits still inside the 300ms debounce), so an
+external change clears or updates the inputs, and editing one range bound keeps the other
+bound's current value. An edit still inside the debounce is dropped when its column's filter
+changes from outside — even if the filter ends on its old value again (e.g. reset, then saved
+filters restored), since `createTable` keeps a per-column filter revision that only goes up. A
+reset that finds the filter already empty changes nothing (TanStack keeps the state reference),
+so an edit typed into that empty filter still commits.
+
+```ts
+// e.g. drop every filter on columns that belong to the previous category
+table.setColumnFilters((filters) => filters.filter((f) => !f.id.startsWith('attr_')));
+```
+
 Persist column visibility with the observer callback:
 
 ```ts