compote-ui 0.79.1 → 0.80.0

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

@@ -0,0 +1,41 @@
+/** The slice of a TanStack column the filter editors read and write. */
+export type FilterableColumn = {
+    id: string;
+    getFilterValue(): unknown;
+    setFilterValue(value: unknown): void;
+};
+export type ColumnFilterEditingOptions = {
+    /** The table the edited columns belong to; read on every access so it may change. */
+    table: () => object;
+    /**
+     * Whether `columnId` still has an editor. An editor 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.
+     */
+    isActive?: (columnId: string) => boolean;
+};
+/** Drops every pending filter edit on `table` without committing, whichever host made it. */
+export declare function cancelPendingFilterEdits(table: object): void;
+/**
+ * One host's access to a table's pending filter edits (see PendingFilterEdits). The edits
+ * live with the table, not with the host or its editors, so an edit still commits after its
+ * editor unmounts with a closing popover.
+ *
+ * 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.
+ */
+export declare class ColumnFilterEditing {
+    #private;
+    constructor(options: ColumnFilterEditingOptions);
+    textValue(column: FilterableColumn): string;
+    editText(column: FilterableColumn, value: string): void;
+    rangeBound(column: FilterableColumn, which: 'min' | 'max'): number | null;
+    editRange(column: FilterableColumn, which: 'min' | 'max', value: number | null): void;
+    /** Drops the pending edits for one column without committing them. */
+    cancel(columnId: string): void;
+    /** Drops every pending edit on the table without committing — including other hosts'. */
+    cancelAll(): void;
+}

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

@@ -0,0 +1,88 @@
+import { DebouncedFilterEdits } from '../../utils/debounced-filter-edit.svelte';
+import { mergeRangeFilter, rangeBounds } from '../../utils/range-filter';
+import { getFilterRevisions } from './filter-revisions.svelte';
+/**
+ * The debounced edits pending on one table's filters. Shared by every component that edits
+ * them (the toolbar filter, each header filter), so the latest edit to a column wins no
+ * matter where it was made, and cancelling reaches edits made from any of them.
+ */
+class PendingFilterEdits {
+    text = new DebouncedFilterEdits();
+    range = new DebouncedFilterEdits();
+}
+const registry = new WeakMap();
+function pendingEdits(table) {
+    let edits = registry.get(table);
+    if (!edits) {
+        edits = new PendingFilterEdits();
+        registry.set(table, edits);
+    }
+    return edits;
+}
+/** Drops every pending filter edit on `table` without committing, whichever host made it. */
+export function cancelPendingFilterEdits(table) {
+    const edits = registry.get(table);
+    edits?.text.cancelAll();
+    edits?.range.cancelAll();
+}
+/**
+ * One host's access to a table's pending filter edits (see PendingFilterEdits). The edits
+ * live with the table, not with the host or its editors, so an edit still commits after its
+ * editor unmounts with a closing popover.
+ *
+ * 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.
+ */
+export class ColumnFilterEditing {
+    #table;
+    #isActive;
+    constructor(options) {
+        this.#table = options.table;
+        this.#isActive = options.isActive ?? (() => true);
+    }
+    get #edits() {
+        return pendingEdits(this.#table());
+    }
+    /**
+     * 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.
+     */
+    #base(column) {
+        const revisions = getFilterRevisions(this.#table());
+        return revisions ? revisions.get(column.id) : column.getFilterValue();
+    }
+    textValue(column) {
+        const value = column.getFilterValue();
+        return (this.#edits.text.get(column.id, this.#base(column)) ??
+            (typeof value === 'string' ? value : ''));
+    }
+    editText(column, value) {
+        if (!this.#isActive(column.id))
+            return;
+        this.#edits.text.edit(column.id, this.#base(column), () => value, () => this.#base(column), (text) => column.setFilterValue(text || undefined));
+    }
+    rangeBound(column, which) {
+        const pending = this.#edits.range.get(column.id, this.#base(column));
+        if (pending && which in pending)
+            return pending[which] ?? null;
+        return rangeBounds(column.getFilterValue())[which === 'min' ? 0 : 1] ?? null;
+    }
+    editRange(column, which, value) {
+        if (!this.#isActive(column.id))
+            return;
+        this.#edits.range.edit(column.id, this.#base(column), (pending) => ({ ...pending, [which]: value }), () => this.#base(column), (pending) => column.setFilterValue(mergeRangeFilter(column.getFilterValue(), pending)));
+    }
+    /** Drops the pending edits for one column without committing them. */
+    cancel(columnId) {
+        this.#edits.text.cancel(columnId);
+        this.#edits.range.cancel(columnId);
+    }
+    /** Drops every pending edit on the table without committing — including other hosts'. */
+    cancelAll() {
+        cancelPendingFilterEdits(this.#table());
+    }
+}

package/dist/components/data-table-v9/column-filter-kind.d.ts

@@ -0,0 +1,10 @@
+import type { DataTableColumnType } from './types';
+/** Which filter editor (and default filterFn) a column type uses. */
+export type ColumnFilterKind = 'text' | 'range' | 'boolean' | 'select' | 'date';
+/**
+ * The filter kind for a column type. The single mapping both the filter editors and the
+ * default filterFn follow, so a column never shows an editor its filterFn can't evaluate.
+ * `action` columns carry no value and get no filter. `time` stays a text filter until it has
+ * its own contract (a time-of-day range has to decide how to cross midnight).
+ */
+export declare function filterKindFor(type: DataTableColumnType | undefined): ColumnFilterKind | null;

package/dist/components/data-table-v9/column-filter-kind.js

@@ -0,0 +1,25 @@
+/**
+ * The filter kind for a column type. The single mapping both the filter editors and the
+ * default filterFn follow, so a column never shows an editor its filterFn can't evaluate.
+ * `action` columns carry no value and get no filter. `time` stays a text filter until it has
+ * its own contract (a time-of-day range has to decide how to cross midnight).
+ */
+export function filterKindFor(type) {
+    switch (type) {
+        case 'number':
+        case 'currency':
+        case 'percent':
+            return 'range';
+        case 'boolean':
+            return 'boolean';
+        case 'select':
+            return 'select';
+        case 'date':
+        case 'date-time':
+            return 'date';
+        case 'action':
+            return null;
+        default:
+            return 'text';
+    }
+}

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

@@ -1,9 +1,14 @@
-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 { filterKindFor } from './column-filter-kind';
+import { dateCellTimeZone, formatDateCell } from './date-cell';
+import { isEmptyDateRange, matchesDateRange, resolveDateRange } from '../../utils/date-filter';
+import { cancelPendingFilterEdits } from './column-filter-editing.svelte';
+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 +25,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 +54,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 +93,23 @@ export function createTable(options) {
         });
         onDestroy(() => subscription.unsubscribe());
     }
+    registerFilterRevisions(table, filterRevisions);
+    // Debounced filter edits outlive the editors that made them, but not the table.
+    onDestroy(() => cancelPendingFilterEdits(table));
+    // A reset drops pending filter edits too — including one on a column with no committed
+    // filter, whose revision the reset leaves alone, so the edit would otherwise commit
+    // afterwards and bring a filter back. TanStack assigns these as own methods of the table
+    // (`table.reset` also writes state directly, bypassing onColumnFiltersChange).
+    const resetColumnFilters = table.resetColumnFilters;
+    table.resetColumnFilters = (defaultState) => {
+        cancelPendingFilterEdits(table);
+        resetColumnFilters(defaultState);
+    };
+    const resetTable = table.reset;
+    table.reset = () => {
+        cancelPendingFilterEdits(table);
+        resetTable();
+    };
     return table;
 }
 function createColumnVisibility(columns) {
@@ -117,7 +148,7 @@ function createColumns(columns, localeCtx) {
             };
         }
         const columnId = getColumnId(column);
-        const derivedFilterFn = column.filterFn ?? getFilterFnForType(column.type);
+        const derivedFilterFn = column.filterFn ?? getFilterFnForType(column);
         const columnDef = {
             id: columnId,
             header: column.header,
@@ -180,27 +211,26 @@ export function getColumnId(column) {
         return column.accessorKey;
     throw new Error('DataTableColumn with accessorFn requires an id.');
 }
-const TYPE_DATE_FORMAT_DEFAULTS = {
-    date: { day: '2-digit', month: '2-digit', year: 'numeric' },
-    time: { hour: '2-digit', minute: '2-digit' },
-    'date-time': {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit'
-    }
-};
-function getFilterFnForType(type) {
-    switch (type) {
-        case 'number':
-        case 'currency':
-        case 'percent':
+/**
+ * A calendar-day range filter for a date column, judged in the zone the column is shown in
+ * (read on every pass, so it follows a changed local zone like the cells do).
+ */
+function dateRangeFilterFn(formatOptions) {
+    const filterFn = (row, columnId, range) => matchesDateRange(row.getValue(columnId), range, dateCellTimeZone(formatOptions));
+    filterFn.resolveFilterValue = resolveDateRange;
+    filterFn.autoRemove = isEmptyDateRange;
+    return filterFn;
+}
+function getFilterFnForType(column) {
+    switch (filterKindFor(column.type)) {
+        case 'range':
             return 'inNumberRange';
         case 'boolean':
             return 'equals';
         case 'select':
             return oneOfFilterFn;
+        case 'date':
+            return dateRangeFilterFn(column.formatOptions);
         default:
             return undefined;
     }
@@ -220,14 +250,7 @@ function applyTypeFormat(column, value, localeCtx) {
         }).format(numericValue);
     }
     if (column.type === 'date' || column.type === 'time' || column.type === 'date-time') {
-        const dateValue = value instanceof Date ? value : new Date(value);
-        if (isNaN(dateValue.getTime()))
-            return undefined;
-        const locale = column.formatLocale ?? localeCtx().locale;
-        return new Intl.DateTimeFormat(locale, {
-            ...TYPE_DATE_FORMAT_DEFAULTS[column.type],
-            ...column.formatOptions
-        }).format(dateValue);
+        return formatDateCell(value, column.type, column.formatLocale ?? localeCtx().locale, column.formatOptions);
     }
     if (column.type === 'boolean')
         return value ? 'Yes' : 'No';