@12-apps/ui 1.0.0 → 1.3.1

package/src/components/data-display/DataViews/ManageViewsDialog.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { ConfirmButton } from "../../feedback/ConfirmAction";
+import { Dialog, DialogContent } from "../../feedback/Dialog";
+import { Button } from "../../form/Button";
+import { Box } from "../../../mui/Box";
+import { Stack } from "../../../mui/Stack";
+import { Text } from "../../typography/Text";
+
+import type { SavedViewSummary } from "./data-views-types";
+
+interface ManageViewsDialogProps {
+  open: boolean;
+  onClose: () => void;
+  views: SavedViewSummary[];
+  onEdit: (view: SavedViewSummary) => void;
+  onDelete: (view: SavedViewSummary) => void;
+  testIdPrefix?: string;
+}
+
+function tags(view: SavedViewSummary): string[] {
+  const list: string[] = [];
+  if (view.isDefault) list.push("Padrão");
+  if (view.pinned) list.push("Fixada");
+  if (view.shared) list.push("Compartilhada");
+  if (!view.isOwner) list.push("De outro usuário");
+  return list;
+}
+
+/**
+ * "Gerenciar visões" dialog (FUT-89): lists every view the user can see with its
+ * flags, and owner-only edit/delete. Non-owned shared views are listed read-only.
+ */
+/** One saved view: its name/description/tags, and the owner-only actions. */
+function ManageViewRow({
+  view,
+  onEdit,
+  onDelete,
+  testIdPrefix,
+}: {
+  view: SavedViewSummary;
+  onEdit: (view: SavedViewSummary) => void;
+  onDelete: (view: SavedViewSummary) => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Stack
+      direction="row"
+      spacing={1}
+      sx={{ alignItems: "center", justifyContent: "space-between" }}
+      data-testid={`${testIdPrefix}-manage-row-${view.id}`}
+    >
+      <Box sx={{ minWidth: 0 }}>
+        <Text variant="body" size="sm" as="span" weight="semibold">
+          {view.name}
+        </Text>
+        {view.description && (
+          <Text variant="caption" as="p" color="secondary">
+            {view.description}
+          </Text>
+        )}
+        {tags(view).length > 0 && (
+          <Text variant="caption" as="p" color="secondary">
+            {tags(view).join(" · ")}
+          </Text>
+        )}
+      </Box>
+      {view.isOwner && (
+        <Stack direction="row" spacing={1} sx={{ flex: "0 0 auto" }}>
+          <Button
+            variant="text"
+            size="sm"
+            onClick={() => onEdit(view)}
+            dataTestId={`${testIdPrefix}-manage-edit-${view.id}`}
+          >
+            Editar
+          </Button>
+          {/* Confirm-gated (FUT-546): a saved view is a filter set somebody
+              built by hand, and there is no undo behind this. */}
+          <ConfirmButton
+            variant="text"
+            size="sm"
+            color="danger"
+            onClick={() => onDelete(view)}
+            confirm={{
+              title: 'Excluir a visão salva?',
+              entityName: view.name,
+              description:
+                'Os filtros e colunas guardados nela são perdidos. Não é possível restaurar.',
+              confirmText: 'Excluir',
+            }}
+            dataTestId={`${testIdPrefix}-manage-delete-${view.id}`}
+          >
+            Excluir
+          </ConfirmButton>
+        </Stack>
+      )}
+    </Stack>
+  );
+}
+
+export function ManageViewsDialog({
+  open,
+  onClose,
+  views,
+  onEdit,
+  onDelete,
+  testIdPrefix = "views",
+}: ManageViewsDialogProps): React.JSX.Element {
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title="Gerenciar visões"
+      size="md"
+      showCloseButton
+      dataTestId={`${testIdPrefix}-manage-dialog`}
+    >
+      <DialogContent>
+        <Stack spacing={1.5} data-testid={`${testIdPrefix}-manage-list`}>
+          {views.length === 0 ? (
+            <Text variant="body" as="p">
+              Nenhuma visão salva.
+            </Text>
+          ) : (
+            views.map((view) => (
+              <ManageViewRow
+                key={view.id}
+                view={view}
+                onEdit={onEdit}
+                onDelete={onDelete}
+                testIdPrefix={testIdPrefix}
+              />
+            ))
+          )}
+        </Stack>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/data-display/DataViews/SaveViewModal.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import { useState } from "react";
+
+import { Dialog, DialogContent } from "../../feedback/Dialog";
+import { Button } from "../../form/Button";
+import { Input } from "../../form/Input";
+import { Switch } from "../../form/Switch";
+import { Box } from "../../../mui/Box";
+import { Stack } from "../../../mui/Stack";
+import { Text } from "../../typography/Text";
+
+import { describeViewState } from "./data-views-preview";
+import type {
+  DataViewColumn,
+  DataViewState,
+  FilterFieldConfig,
+  SavedViewSummary,
+} from "./data-views-types";
+
+/** The values the modal collects (the current view state is captured by the parent). */
+export interface SaveViewPayload {
+  name: string;
+  description: string;
+  shared: boolean;
+  pinned: boolean;
+  isDefault: boolean;
+}
+
+interface SaveViewModalProps<T extends Record<string, unknown>> {
+  open: boolean;
+  onClose: () => void;
+  /** The state being saved (drives the preview). */
+  currentState: DataViewState;
+  fields: FilterFieldConfig<T>[];
+  columns: DataViewColumn<T>[];
+  /** When set, the modal edits this view (seeds the form + becomes "Salvar alterações"). */
+  editing?: SavedViewSummary | null;
+  onSave: (payload: SaveViewPayload) => Promise<void> | void;
+  testIdPrefix?: string;
+}
+
+function PreviewList({ title, items, testId }: { title: string; items: string[]; testId: string }): React.JSX.Element {
+  return (
+    <Box data-testid={testId}>
+      <Text variant="caption" as="span" weight="semibold">
+        {title}
+      </Text>
+      {items.length === 0 ? (
+        <Text variant="caption" as="p" color="secondary">
+          —
+        </Text>
+      ) : (
+        <Stack component="ul" spacing={0.25} sx={{ m: 0, pl: 2 }}>
+          {items.map((item) => (
+            <Text key={item} variant="caption" as="li">
+              {item}
+            </Text>
+          ))}
+        </Stack>
+      )}
+    </Box>
+  );
+}
+
+interface FlagsSwitchesProps {
+  pinned: boolean;
+  shared: boolean;
+  isDefault: boolean;
+  setPinned: (value: boolean) => void;
+  setShared: (value: boolean) => void;
+  setIsDefault: (value: boolean) => void;
+  testIdPrefix: string;
+}
+
+function FlagsSwitches({
+  pinned,
+  shared,
+  isDefault,
+  setPinned,
+  setShared,
+  setIsDefault,
+  testIdPrefix,
+}: FlagsSwitchesProps): React.JSX.Element {
+  return (
+    <Stack spacing={0.5}>
+      <Switch
+        size="sm"
+        label="Fixar na barra lateral"
+        checked={pinned}
+        onChange={(_event, value) => setPinned(value)}
+        dataTestId={`${testIdPrefix}-save-pinned`}
+      />
+      <Switch
+        size="sm"
+        label="Compartilhar com a equipe"
+        checked={shared}
+        onChange={(_event, value) => setShared(value)}
+        dataTestId={`${testIdPrefix}-save-shared`}
+      />
+      <Switch
+        size="sm"
+        label="Definir como padrão"
+        checked={isDefault}
+        onChange={(_event, value) => setIsDefault(value)}
+        dataTestId={`${testIdPrefix}-save-default`}
+      />
+    </Stack>
+  );
+}
+
+interface PreviewBoxProps {
+  preview: { filters: string[]; columns: string[]; sort: string[] };
+  testIdPrefix: string;
+}
+
+function PreviewBox({ preview, testIdPrefix }: PreviewBoxProps): React.JSX.Element {
+  return (
+    <Box sx={{ p: 1.5, borderRadius: 1, border: (theme) => `1px solid ${theme.palette.divider}` }}>
+      <Text variant="caption" as="p" weight="semibold">
+        Prévia
+      </Text>
+      <Stack spacing={1} sx={{ mt: 0.5 }}>
+        <PreviewList title="Filtros" items={preview.filters} testId={`${testIdPrefix}-preview-filters`} />
+        <PreviewList title="Colunas" items={preview.columns} testId={`${testIdPrefix}-preview-columns`} />
+        <PreviewList title="Ordenação" items={preview.sort} testId={`${testIdPrefix}-preview-sort`} />
+      </Stack>
+    </Box>
+  );
+}
+
+interface SaveViewFormState {
+  name: string;
+  description: string;
+  pinned: boolean;
+  shared: boolean;
+  isDefault: boolean;
+  canSave: boolean;
+  error: string | null;
+  setName: (value: string) => void;
+  setDescription: (value: string) => void;
+  setPinned: (value: boolean) => void;
+  setShared: (value: boolean) => void;
+  setIsDefault: (value: boolean) => void;
+  submit: () => Promise<void>;
+}
+
+/** The initial form values, seeded from an edited view (or blank for create). */
+function seedForm(editing: SavedViewSummary | null | undefined): SaveViewPayload {
+  if (!editing) {
+    return { name: "", description: "", pinned: false, shared: false, isDefault: false };
+  }
+  return {
+    name: editing.name,
+    description: editing.description ?? "",
+    pinned: editing.pinned,
+    shared: editing.shared,
+    isDefault: editing.isDefault,
+  };
+}
+
+/** Local form state + submit for {@link SaveViewModal}, seeded from an edited view. */
+function useSaveViewForm(
+  editing: SavedViewSummary | null | undefined,
+  onSave: (payload: SaveViewPayload) => Promise<void> | void,
+): SaveViewFormState {
+  const initial = seedForm(editing);
+  const [name, setName] = useState(initial.name);
+  const [description, setDescription] = useState(initial.description);
+  const [pinned, setPinned] = useState(initial.pinned);
+  const [shared, setShared] = useState(initial.shared);
+  const [isDefault, setIsDefault] = useState(initial.isDefault);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const canSave = name.trim().length > 0 && !saving;
+
+  async function submit(): Promise<void> {
+    setSaving(true);
+    setError(null);
+    // A rejected save (e.g. duplicate name) is caught here so the modal stays
+    // open and shows the reason; the finally always re-enables the button.
+    try {
+      await onSave({ name: name.trim(), description: description.trim(), shared, pinned, isDefault });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Não foi possível salvar a visão.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return {
+    name,
+    description,
+    pinned,
+    shared,
+    isDefault,
+    canSave,
+    error,
+    setName,
+    setDescription,
+    setPinned,
+    setShared,
+    setIsDefault,
+    submit,
+  };
+}
+
+/**
+ * The "Salvar visão" modal (FUT-89): captures a name + description and the pin /
+ * share / default flags, and previews the filters, visible columns, and sort the
+ * view will store. Used for both create and edit.
+ */
+export function SaveViewModal<T extends Record<string, unknown>>({
+  open,
+  onClose,
+  currentState,
+  fields,
+  columns,
+  editing,
+  onSave,
+  testIdPrefix = "view",
+}: SaveViewModalProps<T>): React.JSX.Element {
+  const form = useSaveViewForm(editing, onSave);
+  const preview = describeViewState(currentState, fields, columns);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={editing ? "Editar visão" : "Salvar visão"}
+      size="sm"
+      showCloseButton
+      dataTestId={`${testIdPrefix}-save-modal`}
+    >
+      <DialogContent>
+        <Stack spacing={2} data-testid={`${testIdPrefix}-save-form`}>
+          <Input
+            size="sm"
+            fullWidth
+            label="Nome"
+            value={form.name}
+            onChange={(event) => form.setName(event.target.value)}
+            data-testid={`${testIdPrefix}-save-name`}
+          />
+          <Input
+            size="sm"
+            fullWidth
+            label="Descrição (opcional)"
+            value={form.description}
+            onChange={(event) => form.setDescription(event.target.value)}
+            data-testid={`${testIdPrefix}-save-description`}
+          />
+
+          <FlagsSwitches
+            pinned={form.pinned}
+            shared={form.shared}
+            isDefault={form.isDefault}
+            setPinned={form.setPinned}
+            setShared={form.setShared}
+            setIsDefault={form.setIsDefault}
+            testIdPrefix={testIdPrefix}
+          />
+
+          <PreviewBox preview={preview} testIdPrefix={testIdPrefix} />
+
+          {form.error && (
+            <Text variant="caption" color="danger" as="p" data-testid={`${testIdPrefix}-save-error`}>
+              {form.error}
+            </Text>
+          )}
+
+          <Stack direction="row" spacing={2}>
+            <Button
+              onClick={() => void form.submit()}
+              disabled={!form.canSave}
+              dataTestId={`${testIdPrefix}-save-submit`}
+            >
+              {editing ? "Salvar alterações" : "Salvar visão"}
+            </Button>
+            <Button variant="text" onClick={onClose} dataTestId={`${testIdPrefix}-save-cancel`}>
+              Cancelar
+            </Button>
+          </Stack>
+        </Stack>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/data-display/DataViews/__tests__/DataViewsGrid.test.tsx

@@ -0,0 +1,271 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { ThemeProvider, createTheme } from "../../../../mui/styles";
+
+import { DataViewsGrid } from "../DataViewsGrid";
+import type { DataViewColumn, FilterFieldConfig } from "../data-views-types";
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  status: string;
+}
+
+const rows: Row[] = [
+  { id: "1", name: "Ana", status: "ACTIVE" },
+  { id: "2", name: "Bruno", status: "INACTIVE" },
+  { id: "3", name: "Carla", status: "ACTIVE" },
+];
+
+const columns: DataViewColumn<Row>[] = [
+  { id: "name", header: "Nome", accessor: "name", searchable: true },
+  { id: "status", header: "Status", accessor: "status", searchable: true },
+  { id: "actions", header: "", type: "actions", hideable: false, cell: () => null },
+];
+
+const fields: FilterFieldConfig<Row>[] = [
+  {
+    id: "status",
+    label: "Status",
+    options: [
+      { value: "ACTIVE", label: "Ativo" },
+      { value: "INACTIVE", label: "Inativo" },
+    ],
+  },
+];
+
+function renderGrid(props: Partial<React.ComponentProps<typeof DataViewsGrid<Row>>> = {}) {
+  return render(
+    <ThemeProvider theme={createTheme()}>
+      <DataViewsGrid<Row>
+        rows={rows}
+        columns={columns}
+        fields={fields}
+        getRowId={(row) => row.id}
+        dataTestId="people"
+        testIdPrefix="people"
+        {...props}
+      />
+    </ThemeProvider>,
+  );
+}
+
+const counter = (): string => screen.getByTestId("people-counter").textContent ?? "";
+
+/** The panel keeps its fields mounted (visibility-hidden when closed), so they
+ *  stay interactable in tests. Query the input directly — `getByRole` would skip
+ *  the hidden panel. */
+function statusCheckbox(value: string): HTMLInputElement {
+  const input = screen.getByTestId(`people-filter-status-${value}`).querySelector("input");
+  if (!input) throw new Error(`checkbox input for ${value} not found`);
+  return input;
+}
+
+describe("DataViewsGrid", () => {
+  beforeEach(() => window.localStorage.clear());
+
+  it("renders every row and a matched/total counter", () => {
+    renderGrid();
+    expect(screen.getByText("Ana")).toBeInTheDocument();
+    expect(screen.getByText("Bruno")).toBeInTheDocument();
+    expect(counter()).toContain("3 de 3");
+  });
+
+  it("narrows via the keyword search (commit on blur) and updates the counter", async () => {
+    renderGrid();
+    const search = screen.getByTestId("people-search-all");
+    fireEvent.change(search, { target: { value: "car" } });
+    fireEvent.blur(search);
+    await waitFor(() => expect(screen.queryByText("Ana")).not.toBeInTheDocument());
+    expect(screen.getByText("Carla")).toBeInTheDocument();
+    expect(counter()).toContain("1 de 3");
+  });
+
+  it("applies a checkbox filter field and updates the counter", async () => {
+    renderGrid();
+    fireEvent.click(statusCheckbox("INACTIVE"));
+    await waitFor(() => expect(screen.queryByText("Ana")).not.toBeInTheDocument());
+    expect(screen.getByText("Bruno")).toBeInTheDocument();
+    expect(counter()).toContain("1 de 3");
+  });
+
+  it("reports state changes and re-applies a supplied view state", async () => {
+    const onStateChange = vi.fn();
+    const { rerender } = renderGrid({ onStateChange });
+    expect(onStateChange).toHaveBeenCalled();
+
+    rerender(
+      <ThemeProvider theme={createTheme()}>
+        <DataViewsGrid<Row>
+          rows={rows}
+          columns={columns}
+          fields={fields}
+          getRowId={(row) => row.id}
+          dataTestId="people"
+          testIdPrefix="people"
+          onStateChange={onStateChange}
+          appliedState={{ search: "", pills: { status: ["ACTIVE"] }, sortBy: [], visibleColumns: ["name", "status", "actions"] }}
+        />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => expect(screen.queryByText("Bruno")).not.toBeInTheDocument());
+    expect(counter()).toContain("2 de 3");
+  });
+
+  it("syncState re-applies the URL controls on change while preserving hidden columns", async () => {
+    // A stable appliedState hides the `status` column; only `syncState` changes
+    // between renders (as a URL back/forward would), so the appliedState effect
+    // never re-fires and we isolate the syncState merge.
+    const applied = { search: "", pills: {}, sortBy: [], visibleColumns: ["name", "actions"] };
+    const { rerender } = renderGrid({
+      appliedState: applied,
+      syncState: { search: "", pills: {}, ranges: {}, sortBy: [] },
+    });
+    // `name` header present (evidence the grid rendered) but `status` is hidden.
+    expect(screen.getByRole("columnheader", { name: "Nome" })).toBeInTheDocument();
+    await waitFor(() =>
+      expect(screen.queryByRole("columnheader", { name: "Status" })).not.toBeInTheDocument(),
+    );
+    expect(counter()).toContain("3 de 3");
+
+    // A new syncState reference applies a status filter (e.g. browser back/forward).
+    rerender(
+      <ThemeProvider theme={createTheme()}>
+        <DataViewsGrid<Row>
+          rows={rows}
+          columns={columns}
+          fields={fields}
+          getRowId={(row) => row.id}
+          dataTestId="people"
+          testIdPrefix="people"
+          appliedState={applied}
+          syncState={{ search: "", pills: { status: ["ACTIVE"] }, ranges: {}, sortBy: [] }}
+        />
+      </ThemeProvider>,
+    );
+
+    // The filter re-applied (Bruno is INACTIVE)...
+    await waitFor(() => expect(screen.queryByText("Bruno")).not.toBeInTheDocument());
+    expect(counter()).toContain("2 de 3");
+    // ...and the user's hidden `status` column was NOT resurrected by the re-sync.
+    await waitFor(() =>
+      expect(screen.queryByRole("columnheader", { name: "Status" })).not.toBeInTheDocument(),
+    );
+  });
+
+  it("the funnel toggle opens/closes the filter panel", async () => {
+    renderGrid();
+    const funnel = screen.getByTestId("people-filters-toggle");
+    expect(funnel).toHaveAttribute("aria-expanded", "false");
+    fireEvent.click(funnel);
+    await waitFor(() => expect(funnel).toHaveAttribute("aria-expanded", "true"));
+    // Counter stays visible in the toolbar regardless of panel state.
+    expect(screen.getByTestId("people-counter")).toBeInTheDocument();
+    fireEvent.click(funnel);
+    await waitFor(() => expect(funnel).toHaveAttribute("aria-expanded", "false"));
+  });
+
+  it("selects all rows, shows the count, and renders the bulk action", async () => {
+    const onBulk = vi.fn();
+    renderGrid({
+      bulkActions: (selected, clear) => (
+        <button
+          type="button"
+          data-testid="people-bulk"
+          onClick={() => {
+            onBulk(selected.length);
+            clear();
+          }}
+        >
+          Bulk {selected.length}
+        </button>
+      ),
+    });
+    // No selection: no count indicator, no bulk action.
+    await waitFor(() => expect(screen.queryByTestId("selected-count-indicator")).not.toBeInTheDocument());
+
+    fireEvent.click(screen.getByTestId("people-select-all"));
+    await waitFor(() =>
+      expect(screen.getByTestId("selected-count-indicator")).toHaveTextContent("3 items selected"),
+    );
+    const bulk = screen.getByTestId("people-bulk");
+    fireEvent.click(bulk);
+    expect(onBulk).toHaveBeenCalledWith(3);
+    // Bulk action clears the selection.
+    await waitFor(() => expect(screen.queryByTestId("selected-count-indicator")).not.toBeInTheDocument());
+  });
+
+  it("drives the row kebab AND the bulk menu from one rowActions list", async () => {
+    const onArchive = vi.fn();
+    const onEdit = vi.fn();
+    renderGrid({
+      // No actions column here so the grid appends its auto kebab from rowActions.
+      columns: [
+        { id: "name", header: "Nome", accessor: "name", searchable: true },
+        { id: "status", header: "Status", accessor: "status" },
+      ],
+      rowActions: [
+        // `bulk: false` → appears in the kebab but NOT the bulk menu.
+        { id: "edit", label: "Editar", bulk: false, onSelect: (r) => onEdit(r.length) },
+        { id: "archive", label: "Arquivar", color: "error", onSelect: (r) => onArchive(r.length) },
+      ],
+    });
+
+    // Per-row kebab: both actions present; Editar acts on the single row.
+    fireEvent.click(screen.getByTestId("people-actions-1"));
+    expect(screen.getByText("Editar")).toBeInTheDocument();
+    expect(screen.getByText("Arquivar")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Editar"));
+    expect(onEdit).toHaveBeenCalledWith(1);
+
+    // Select all → the bulk "Ações" menu shows only the bulk-eligible action.
+    fireEvent.click(screen.getByTestId("people-select-all"));
+    await waitFor(() => expect(screen.getByTestId("people-bulk-actions")).toBeInTheDocument());
+    fireEvent.click(screen.getByTestId("people-bulk-actions"));
+    await waitFor(() => expect(screen.getByText("Arquivar")).toBeInTheDocument());
+    // "Editar" is single-item only, so it must NOT appear in the bulk menu.
+    await waitFor(() => expect(screen.queryByText("Editar")).not.toBeInTheDocument());
+    fireEvent.click(screen.getByText("Arquivar"));
+    expect(onArchive).toHaveBeenCalledWith(3);
+  });
+
+  it("re-emits visible rows on a same-id content change, but not on a content-equal rerender", async () => {
+    // Local seed (not the shared module `rows`) so this test owns its data.
+    const seed: Row[] = [
+      { id: "1", name: "Ana", status: "ACTIVE" },
+      { id: "2", name: "Bruno", status: "INACTIVE" },
+    ];
+    const onVisibleRowsChange = vi.fn<(rows: Row[]) => void>();
+    const { rerender } = renderGrid({ onVisibleRowsChange, rows: seed });
+    await waitFor(() => expect(onVisibleRowsChange).toHaveBeenCalled());
+    const afterInitial = onVisibleRowsChange.mock.calls.length;
+
+    const rerenderWith = (next: Row[]): void =>
+      rerender(
+        <ThemeProvider theme={createTheme()}>
+          <DataViewsGrid<Row>
+            rows={next}
+            columns={columns}
+            fields={fields}
+            getRowId={(row) => row.id}
+            dataTestId="people"
+            testIdPrefix="people"
+            onVisibleRowsChange={onVisibleRowsChange}
+          />
+        </ThemeProvider>,
+      );
+
+    // Fresh array + row refs, identical values → no re-emit (guards the loop).
+    rerenderWith(seed.map((row) => ({ ...row })));
+    expect(onVisibleRowsChange.mock.calls.length).toBe(afterInitial);
+
+    // Same ids, changed values → must re-emit so the export isn't stale.
+    rerenderWith(seed.map((row) => (row.id === "1" ? { ...row, name: "Ana Editada" } : { ...row })));
+    await waitFor(() =>
+      expect(onVisibleRowsChange.mock.calls.length).toBeGreaterThan(afterInitial),
+    );
+    const emitted = onVisibleRowsChange.mock.calls.at(-1)?.[0] ?? [];
+    expect(emitted.find((row) => row.id === "1")?.name).toBe("Ana Editada");
+  });
+});