@marimo-team/islands 0.25.3-dev5 → 0.25.3-dev51

package/src/components/data-table/__tests__/export-actions.test.tsx

@@ -54,6 +54,7 @@ function renderExportActions(
   props: Partial<ExportActionProps> = {},
   sizeLimit: { limitBytes: number; unavailableMessage: string } | null = null,
   mode: AppMode = "edit",
+  strictMode = false,
 ) {
   const store = createStore();
   store.set(downloadSizeLimitAtom, sizeLimit);
@@ -66,7 +67,7 @@ function renderExportActions(
       </TooltipProvider>
     </Provider>
   );
-  const result = render(view(props));
+  const result = render(view(props), { reactStrictMode: strictMode });
   return {
     ...result,
     rerenderExportActions: (nextProps: Partial<ExportActionProps>) =>
@@ -284,7 +285,7 @@ describe("ExportActions dialog", () => {
     await waitFor(() => {
       expect(downloadByURL).toHaveBeenCalled();
     });
-    expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    expect(getExportMetadata).toHaveBeenCalledTimes(3);
     expect(
       screen.queryByText("GeoParquet export requires pyarrow."),
     ).not.toBeInTheDocument();
@@ -310,10 +311,10 @@ describe("ExportActions dialog", () => {
       mocks.handleInstallPackages.mock.calls[0][1]();
     });
     await waitFor(() => {
-      expect(getExportMetadata).toHaveBeenCalledTimes(2);
+      expect(getExportMetadata).toHaveBeenCalledTimes(3);
     });
     expect(
-      screen.getByRole("button", { name: "Install pyarrow" }),
+      await screen.findByRole("button", { name: "Install pyarrow" }),
     ).toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "Download GeoParquet" }),
@@ -530,6 +531,328 @@ describe("ExportActions dialog", () => {
     expect(downloadByURL).not.toHaveBeenCalled();
   });
 
+  async function startGeoParquetInstall(strictMode = false) {
+    const getExportMetadata = vi.fn().mockResolvedValue(geometryMetadata);
+    downloadAs.mockResolvedValueOnce({
+      url: "",
+      filename: "",
+      error: "GeoParquet export requires pyarrow.",
+      missing_packages: ["pyarrow"],
+    });
+    const { rerenderExportActions, unmount } = renderExportActions(
+      { getExportMetadata, metadataSource: "first" },
+      null,
+      "edit",
+      strictMode,
+    );
+    const dialog = await openDialog();
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Download GeoParquet" }),
+    );
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Install pyarrow" }),
+    );
+    return { dialog, getExportMetadata, rerenderExportActions, unmount };
+  }
+
+  it("does not retry with a geometry choice after the final geometry disappears", async () => {
+    const { getExportMetadata } = await startGeoParquetInstall();
+    getExportMetadata.mockResolvedValue({
+      geometry_columns: [],
+      primary_geometry_column: null,
+      default_geometry_column: null,
+      formats: {},
+    });
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+    expect(
+      await screen.findByText(
+        "The selected geometry is no longer available. Choose another geometry to export.",
+      ),
+    ).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Download Parquet" }));
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalledTimes(1));
+    expect(downloadAs).toHaveBeenLastCalledWith({ format: "parquet" });
+  });
+
+  it("does not export when installation finishes after the widget unmounts", async () => {
+    const { getExportMetadata, unmount } = await startGeoParquetInstall();
+    unmount();
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    expect(getExportMetadata).toHaveBeenCalledTimes(1);
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("does not export when post-install metadata resolves after unmount", async () => {
+    const { getExportMetadata, unmount } = await startGeoParquetInstall();
+    let resolveCheck: (value: ExportMetadata) => void = () => undefined;
+    getExportMetadata.mockImplementationOnce(
+      () =>
+        new Promise<ExportMetadata>((resolve) => {
+          resolveCheck = resolve;
+        }),
+    );
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+    expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    unmount();
+
+    await act(async () => resolveCheck(geometryMetadata));
+
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("does not deliver a retried export that resolves after unmount", async () => {
+    const { unmount } = await startGeoParquetInstall();
+    let resolveDownload: (value: {
+      url: string;
+      filename: string;
+    }) => void = () => undefined;
+    downloadAs.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveDownload = resolve;
+        }),
+    );
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+    expect(downloadAs).toHaveBeenCalledTimes(2);
+    unmount();
+
+    await act(async () =>
+      resolveDownload({
+        url: "https://example.test/export",
+        filename: "table",
+      }),
+    );
+
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("retries after installation under StrictMode effect replay", async () => {
+    await startGeoParquetInstall(true);
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalledTimes(1));
+    expect(downloadAs).toHaveBeenLastCalledWith({
+      format: "parquet",
+      geometry_column: "location",
+    });
+  });
+
+  it("does not export when installation finishes after the dialog closes", async () => {
+    const { dialog, getExportMetadata } = await startGeoParquetInstall();
+    fireEvent.click(within(dialog).getByRole("button", { name: "Close" }));
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    expect(getExportMetadata).toHaveBeenCalledTimes(1);
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("does not export when installation finishes after the source changes", async () => {
+    const { getExportMetadata, rerenderExportActions } =
+      await startGeoParquetInstall();
+    rerenderExportActions({ getExportMetadata, metadataSource: "second" });
+    await waitFor(() => {
+      expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    });
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("does not export a non-geographic retry after the dialog closes", async () => {
+    downloadAs.mockResolvedValueOnce({
+      url: "",
+      filename: "",
+      error: "Parquet export requires pyarrow.",
+      missing_packages: ["pyarrow"],
+    });
+    renderExportActions();
+    const dialog = await openDialog();
+    fireEvent.click(screen.getByRole("button", { name: "Download Parquet" }));
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Install pyarrow" }),
+    );
+    fireEvent.click(within(dialog).getByRole("button", { name: "Close" }));
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("retries after installation when an earlier export succeeded", async () => {
+    const getExportMetadata = vi.fn().mockResolvedValue({
+      ...geometryMetadata,
+      formats: {
+        parquet: {
+          available: false,
+          reason: "GeoParquet export requires pyarrow.",
+          missing_packages: ["pyarrow"],
+        },
+      },
+    });
+    renderExportActions({ getExportMetadata });
+    await openDialog();
+    fireEvent.click(screen.getByRole("button", { name: "Download CSV" }));
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalledTimes(1));
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Install pyarrow" }),
+    );
+    getExportMetadata.mockResolvedValue(geometryMetadata);
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalledTimes(2));
+    expect(downloadAs).toHaveBeenLastCalledWith({
+      format: "parquet",
+      geometry_column: "location",
+    });
+  });
+
+  it("waits for the post-install metadata check before exporting", async () => {
+    let resolveCheck: (value: ExportMetadata) => void = () => undefined;
+    const getExportMetadata = vi.fn().mockResolvedValue({
+      ...geometryMetadata,
+      formats: {
+        parquet: {
+          available: false,
+          reason: "GeoParquet export requires pyarrow.",
+          missing_packages: ["pyarrow"],
+        },
+      },
+    });
+    renderExportActions({ getExportMetadata });
+    await openDialog();
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Install pyarrow" }),
+    );
+    getExportMetadata.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveCheck = resolve;
+        }),
+    );
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+    expect(downloadAs).not.toHaveBeenCalled();
+
+    getExportMetadata.mockResolvedValue(geometryMetadata);
+    await act(async () => resolveCheck(geometryMetadata));
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalled());
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+  });
+
+  it("uses the new source eligibility after a settled package failure", async () => {
+    const getExportMetadata = vi.fn().mockResolvedValue(geometryMetadata);
+    downloadAs.mockResolvedValueOnce({
+      url: "",
+      filename: "",
+      error: "GeoParquet export requires pyarrow.",
+      missing_packages: ["pyarrow"],
+    });
+    const { rerenderExportActions } = renderExportActions({
+      getExportMetadata,
+      metadataSource: "first",
+    });
+    await openDialog();
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Download GeoParquet" }),
+    );
+    await screen.findByRole("button", { name: "Install pyarrow" });
+
+    rerenderExportActions({ getExportMetadata, metadataSource: "second" });
+
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Download GeoParquet" }),
+      ).toBeEnabled(),
+    );
+    expect(
+      screen.queryByRole("button", { name: "Install pyarrow" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("ignores metadata for an earlier source that resolves late", async () => {
+    let resolveFirst: (value: ExportMetadata) => void = () => undefined;
+    const first = vi.fn(
+      () =>
+        new Promise<ExportMetadata>((resolve) => {
+          resolveFirst = resolve;
+        }),
+    );
+    const second = vi.fn().mockResolvedValue({
+      ...geometryMetadata,
+      geometry_columns: [
+        { name: "region", encoding: "objects", crs: "EPSG:3857" },
+      ],
+      primary_geometry_column: "region",
+      default_geometry_column: "region",
+    });
+    const { rerenderExportActions } = renderExportActions({
+      getExportMetadata: first,
+      metadataSource: "first",
+    });
+    await openDialog();
+    rerenderExportActions({
+      getExportMetadata: second,
+      metadataSource: "second",
+    });
+    await waitFor(() =>
+      expect(screen.getByTestId("export-summary-parquet")).toHaveTextContent(
+        "region",
+      ),
+    );
+
+    await act(async () => resolveFirst(geometryMetadata));
+
+    expect(screen.getByTestId("export-summary-parquet")).toHaveTextContent(
+      "region",
+    );
+  });
+
+  it("does not use earlier metadata when the new source request fails", async () => {
+    const getExportMetadata = vi.fn().mockResolvedValue(geometryMetadata);
+    const { rerenderExportActions } = renderExportActions({
+      getExportMetadata,
+      metadataSource: "first",
+    });
+    await openDialog();
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Download GeoParquet" }),
+      ).toBeEnabled(),
+    );
+    getExportMetadata.mockRejectedValueOnce(new Error("Connection lost"));
+
+    rerenderExportActions({ getExportMetadata, metadataSource: "second" });
+
+    expect(
+      await screen.findByText(
+        "Could not load geometry options: Connection lost",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Download Parquet" }),
+    ).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Download CSV" })).toBeEnabled();
+  });
+
   it("shows formats in the approved order with an options toggle where supported", async () => {
     renderExportActions();
     const dialog = await openDialog();
@@ -591,6 +914,94 @@ describe("ExportActions dialog", () => {
     expect(within(dialog).queryByRole("group")).not.toBeInTheDocument();
   });
 
+  it("describes format options with their description and current settings", async () => {
+    renderExportActions({
+      getExportMetadata: vi.fn().mockResolvedValue(geometryMetadata),
+    });
+    await openDialog();
+    await screen.findByRole("button", { name: "GeoParquet options" });
+
+    for (const [label, description] of [
+      ["CSV", "Comma-separated values Comma · UTF-8"],
+      ["TSV", "Best for Excel and Google Sheets UTF-8"],
+      ["JSON", "Raw JSON data Escapes non-ASCII"],
+      ["GeoParquet", "Parquet with geometry and CRS metadata location"],
+      ["GeoJSON", "Geometry in longitude and latitude location"],
+    ]) {
+      expect(
+        screen.getByRole("button", { name: `${label} options` }),
+      ).toHaveAccessibleDescription(description);
+    }
+
+    const csvOptions = screen.getByRole("button", { name: "CSV options" });
+    fireEvent.click(csvOptions);
+    fireEvent.change(screen.getByRole("combobox", { name: "Delimiter" }), {
+      target: { value: ";" },
+    });
+    expect(csvOptions).toHaveAccessibleDescription(
+      "Comma-separated values Semicolon · UTF-8",
+    );
+    fireEvent.click(csvOptions);
+    expect(csvOptions).toHaveAccessibleDescription(
+      "Comma-separated values Semicolon · UTF-8",
+    );
+  });
+
+  it.each([
+    ["CSV", "Comma-separated values"],
+    ["TSV", "Best for Excel and Google Sheets"],
+    ["JSON", "Raw JSON data"],
+    ["GeoParquet", "Parquet with geometry and CRS metadata"],
+    ["GeoJSON", "Geometry in longitude and latitude"],
+  ])(
+    "toggles %s options from the row label and description",
+    async (label, description) => {
+      renderExportActions({
+        getExportMetadata: vi.fn().mockResolvedValue(geometryMetadata),
+      });
+      await openDialog();
+      const toggle = await screen.findByRole("button", {
+        name: `${label} options`,
+      });
+
+      fireEvent.click(screen.getByText(label));
+      expect(toggle).toHaveAttribute("aria-expanded", "true");
+      expect(
+        screen.getByRole("group", { name: `${label} options` }),
+      ).toBeInTheDocument();
+
+      fireEvent.click(screen.getByText(description));
+      expect(toggle).toHaveAttribute("aria-expanded", "false");
+      expect(
+        screen.queryByRole("group", { name: `${label} options` }),
+      ).not.toBeInTheDocument();
+    },
+  );
+
+  it("keeps download and copy independent of row expansion", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue({
+        ok: true,
+        text: vi.fn().mockResolvedValue("name,value\n"),
+      }),
+    );
+    renderExportActions();
+    await openDialog();
+    const toggle = screen.getByRole("button", { name: "CSV options" });
+
+    fireEvent.click(screen.getByRole("button", { name: "Download CSV" }));
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalled());
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(screen.getByText("CSV"));
+    fireEvent.click(screen.getByRole("button", { name: "Copy CSV" }));
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+    await waitFor(() => {
+      expect(copyToClipboard).toHaveBeenCalledWith("name,value\n");
+    });
+  });
+
   it("sends only changed CSV options with a download", async () => {
     renderExportActions();
     await openDialog();
@@ -1412,7 +1823,7 @@ describe("ExportActions GeoJSON", () => {
     );
     await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
     await waitFor(() => expect(downloadByURL).toHaveBeenCalled());
-    expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    expect(getExportMetadata).toHaveBeenCalledTimes(3);
     expect(downloadAs).toHaveBeenLastCalledWith({
       format: "geojson",
       geometry_column: "boundary",
@@ -1685,7 +2096,7 @@ describe("ExportActions GeoJSON clipboard", () => {
       format: "geojson",
       geometry_column: "boundary",
     });
-    expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    expect(getExportMetadata).toHaveBeenCalledTimes(3);
     expect(downloadByURL).not.toHaveBeenCalled();
   });
 

package/src/components/data-table/column-visibility-dropdown.tsx

@@ -6,7 +6,7 @@
 
 import type { Table } from "@tanstack/react-table";
 import { Columns3Icon, EyeIcon, EyeOffIcon, ScanEyeIcon } from "lucide-react";
-import React, { useMemo } from "react";
+import React from "react";
 import { ColumnName } from "@/components/datasources/components";
 import { Button } from "@/components/ui/button";
 import {
@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/popover";
 import { type BulkAction, useSelectList } from "@/components/ui/select-core";
 import type { DataType } from "@/core/kernel/messages";
+import { Arrays } from "@/utils/arrays";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { smartMatchFilter } from "@/utils/smartMatch";
@@ -67,9 +68,8 @@ export const ColumnVisibilityDropdown = <TData,>({
   const hideableIds = userColumns
     .filter((column) => column.getCanHide())
     .map((column) => column.id);
-  const visibleHideableCount = hideableIds.filter(
-    (id) => !hiddenIds.includes(id),
-  ).length;
+  const visibleHideableColumnIds = Arrays.difference(hideableIds, hiddenIds);
+  const visibleHideableCount = visibleHideableColumnIds.length;
 
   const applyHidden = (next: string[] | string | null) => {
     const hidden = new Set(Array.isArray(next) ? next : []);
@@ -106,15 +106,10 @@ export const ColumnVisibilityDropdown = <TData,>({
           .filter((option) => !option.disabled)
           .map((option) => option.value)
       : [];
-  const showOnlyColumnState = useMemo(
-    () => ({
-      visibleHideableColumnIds: hideableIds.filter(
-        (id) => !hiddenIds.includes(id),
-      ),
-      hideableColumnIdSet: new Set(hideableIds),
-    }),
-    [hideableIds, hiddenIds],
-  );
+  const showOnlyColumnState = {
+    visibleHideableColumnIds,
+    hideableColumnIdSet: new Set(hideableIds),
+  };
   const hasSearchBulkActions =
     showOnlyMatchIds.length > 0 || matchingActions.length > 0;
 

package/src/components/data-table/columns.tsx

@@ -135,6 +135,7 @@ export function generateColumns<T>({
 }): ColumnDef<T>[] {
   // Row-headers are typically index columns
   const rowHeadersSet = new Set(rowHeaders.map(([columnName]) => columnName));
+  const wrappedColumnsSet = new Set(wrappedColumns);
 
   const typesByColumn = Maps.keyBy(fieldTypes, (entry) => entry[0]);
 
@@ -287,7 +288,7 @@ export function generateColumns<T>({
       }
 
       const justify = getJustify(key);
-      const wrapped = wrappedColumns?.includes(key);
+      const wrapped = wrappedColumnsSet.has(key);
       const isCellSelected = cell?.getIsSelected?.() || false;
       const canSelectCell =
         (selection === "single-cell" || selection === "multi-cell") &&

package/src/components/data-table/context-menu.tsx

@@ -12,7 +12,7 @@ import { Logger } from "@/utils/Logger";
 import type { Cell } from "@tanstack/react-table";
 import { useAtomValue } from "jotai";
 import { CopyIcon, FilterIcon, SquareStack } from "lucide-react";
-import type { RefObject } from "react";
+import { type RefObject, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import {
   ContextMenu,
@@ -123,8 +123,21 @@ export const DataTableContextMenu = <TData,>({
   tableRef: RefObject<HTMLTableSectionElement | null>;
   copyAllCells: () => void;
 }) => {
+  const [activeCell, setActiveCell] = useState<Cell<TData, unknown> | null>(
+    null,
+  );
+  const highlightedCell = useRef<Element | null>(null);
   const handleContextMenuChange = useEvent((open: boolean) => {
+    highlightedCell.current?.classList.remove("bg-(--green-4)");
+    highlightedCell.current = null;
+    if (!open) {
+      // Forget the cell so a later right-click outside any cell can't reuse it
+      contextMenuRef.current = null;
+      return;
+    }
+
     const cell = contextMenuRef.current;
+    setActiveCell(cell);
     if (!cell) {
       return;
     }
@@ -138,42 +151,45 @@ export const DataTableContextMenu = <TData,>({
       return;
     }
 
-    if (open) {
-      cellElement.classList.add("bg-(--green-4)");
-    } else {
-      cellElement.classList.remove("bg-(--green-4)");
-    }
+    cellElement.classList.add("bg-(--green-4)");
+    highlightedCell.current = cellElement;
   });
 
   return (
-    <ContextMenu onOpenChange={handleContextMenuChange}>
-      <ContextMenuTrigger asChild={true}>{tableBody}</ContextMenuTrigger>
+    // Open via the trigger so a right-click while already open retargets the
+    // menu; Radix only reports open changes, so use it for closing.
+    <ContextMenu
+      onOpenChange={(open) => {
+        if (!open) {
+          handleContextMenuChange(false);
+        }
+      }}
+    >
+      <ContextMenuTrigger
+        asChild={true}
+        onContextMenu={() => handleContextMenuChange(true)}
+      >
+        {tableBody}
+      </ContextMenuTrigger>
       <ContextMenuPortal>
-        <CellContextMenu
-          cellRef={contextMenuRef}
-          copySelectedCells={copyAllCells}
-        />
+        {activeCell && (
+          <CellContextMenu cell={activeCell} copySelectedCells={copyAllCells} />
+        )}
       </ContextMenuPortal>
     </ContextMenu>
   );
 };
 
 export const CellContextMenu = <TData,>({
-  cellRef,
+  cell,
   copySelectedCells,
 }: {
-  cellRef: RefObject<Cell<TData, unknown> | null>;
+  cell: Cell<TData, unknown>;
   copySelectedCells: () => void;
 }) => {
   const selectedCells = useAtomValue(selectedCellsAtom);
   const multipleSelectedCells = selectedCells.size > 1;
 
-  const cell = cellRef.current;
-  if (!cell) {
-    Logger.error("No cell found in context menu");
-    return;
-  }
-
   const table = cell.getContext().table;
   const displayedValue = cell.getValue();
   const rawValue =

package/src/components/data-table/date-popover.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React from "react";
+import React, { useMemo } from "react";
 import { useDateFormatter, useLocale } from "react-aria";
 import { Tooltip } from "@/components/ui/tooltip";
 
@@ -45,6 +45,7 @@ export const DatePopover: React.FC<DatePopoverProps> = ({
 
 const TimezoneDisplay = ({ date }: { date: Date }) => {
   const { locale } = useLocale();
+  // The system timezone can change without the locale changing.
   const localTimezone = new Intl.DateTimeFormat(locale).resolvedOptions()
     .timeZone;
   const hasSubSeconds = date.getUTCMilliseconds() !== 0;
@@ -116,9 +117,10 @@ const RelativeTime = ({ date }: { date: Date }) => {
   const { locale } = useLocale();
 
   // Initialize relative time formatter with current locale and "auto" numeric style
-  const relativeTimeFormatter = new Intl.RelativeTimeFormat(locale, {
-    numeric: "auto",
-  });
+  const relativeTimeFormatter = useMemo(
+    () => new Intl.RelativeTimeFormat(locale, { numeric: "auto" }),
+    [locale],
+  );
 
   const currentTime = new Date();
   // Get difference in seconds between now and the input date