Filter Result Transition

1"use client";
2 
3import * as React from "react";
4import { motion, AnimatePresence, LayoutGroup } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7import { useReducedMotion, useAnimatedNumber, formatNumber } from "@/lib/motiq";
8 
9/* -------------------------------------------------------------------------- */
10/* Types                                                                       */
11/* -------------------------------------------------------------------------- */
12 
13export type FilterLayout = "cards" | "list" | "grid";
14export type FilterResultState = "idle" | "loading" | "error";
15 
16/**
17 * One active filter/facet the host applied. `id` is the stable removal key; the
18 * host removes it in `onRemoveFilter`. `group` labels the facet (e.g. "Status")
19 * so the chip and its accessible name stay unambiguous.
20 */
21export interface ActiveFilter {
22  /** Stable id passed back to `onRemoveFilter` (required). */
23  id: string;
24  /** Visible chip text (e.g. "Design"). */
25  label: string;
26  /** Optional facet name shown before the value (e.g. "Category"). */
27  group?: string;
28}
29 
30/** Context handed to `renderItem` for each row. */
31export interface RenderItemContext {
32  /** Position in the current (post-filter) result set. */
33  index: number;
34  /** Active layout, in case the card adapts. */
35  layout: FilterLayout;
36  /** Whether this item matches `focusedItemId`. */
37  focused: boolean;
38}
39 
40/** Context handed to `onFocusFallback` when the focused item disappears. */
41export interface FocusFallbackContext<T> {
42  /** The id that was focused and is now gone. */
43  previousId: string;
44  /** The stable results-region anchor (already `tabIndex=-1`). */
45  anchor: HTMLElement | null;
46  /** The surviving items after the change, for "focus the first result" logic. */
47  items: T[];
48}
49 
50export interface FilterResultTransitionProps<T> {
51  /** The already-filtered/sorted items to show — the host owns filtering. */
52  items: T[];
53  /** Stable identity per item — the key to continuity + focus preservation. */
54  getItemId: (item: T) => string;
55  /** Render one result. Keep interactive controls inside the card, not nested. */
56  renderItem: (item: T, ctx: RenderItemContext) => React.ReactNode;
57 
58  /** Card arrangement. `grid` reflows responsively; `list`/`cards` stack. */
59  layout?: FilterLayout;
60 
61  /** Full override for the count line; receives the *morphing* integer. */
62  resultLabel?: (count: number) => React.ReactNode;
63  /** Plain-text count for the polite announcement (no nodes). */
64// … truncated