@marimo-team/frontend 0.16.0 → 0.16.2

package/src/plugins/impl/DataTablePlugin.tsx

@@ -36,6 +36,10 @@ import {
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
 import { RowViewerPanel } from "@/components/data-table/row-viewer-panel/row-viewer";
+import {
+  type DownloadAsArgs,
+  DownloadAsSchema,
+} from "@/components/data-table/schemas";
 import {
   type BinValues,
   type ColumnHeaderStats,
@@ -182,6 +186,7 @@ interface Data<T> {
   freezeColumnsRight?: string[];
   textJustifyColumns?: Record<string, "left" | "center" | "right">;
   wrappedColumns?: string[];
+  headerTooltip?: Record<string, string>;
   totalColumns: number;
   maxColumns: number | "all";
   hasStableRowId: boolean;
@@ -190,7 +195,7 @@ interface Data<T> {
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 type DataTableFunctions = {
-  download_as: (req: { format: "csv" | "json" | "parquet" }) => Promise<string>;
+  download_as: DownloadAsArgs;
   get_column_summaries: <T>(
     opts: ColumnSummariesArgs,
   ) => Promise<ColumnSummaries<T>>;
@@ -249,11 +254,13 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
         .record(z.enum(["left", "center", "right"]))
         .optional(),
       wrappedColumns: z.array(z.string()).optional(),
+      headerTooltip: z.record(z.string()).optional(),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       totalColumns: z.number(),
       maxColumns: z.union([z.number(), z.literal("all")]).default("all"),
       hasStableRowId: z.boolean().default(false),
       cellStyles: z.record(z.record(z.object({}).passthrough())).optional(),
+      hoverTemplate: z.string().optional(),
       // Whether to load the data lazily.
       lazy: z.boolean().default(false),
       // If lazy, this will preload the first page of data
@@ -262,9 +269,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
     }),
   )
   .withFunctions<DataTableFunctions>({
-    download_as: rpc
-      .input(z.object({ format: z.enum(["csv", "json", "parquet"]) }))
-      .output(z.string()),
+    download_as: DownloadAsSchema,
     get_column_summaries: rpc
       .input(z.object({ precompute: z.boolean() }))
       .output(
@@ -385,6 +390,7 @@ interface DataTableProps<T> extends Data<T>, DataTableFunctions {
   // Filters
   enableFilters?: boolean;
   cellStyles?: CellStyleState | null;
+  hoverTemplate?: string | null;
   toggleDisplayHeader?: () => void;
   host: HTMLElement;
   cellId?: CellId | null;
@@ -704,9 +710,11 @@ const DataTableComponent = ({
   freezeColumnsRight,
   textJustifyColumns,
   wrappedColumns,
+  headerTooltip,
   totalColumns,
   get_row_ids,
   cellStyles,
+  hoverTemplate,
   toggleDisplayHeader,
   calculate_top_k_rows,
   preview_column,
@@ -776,6 +784,7 @@ const DataTableComponent = ({
         fieldTypes: memoizedClampedFieldTypes,
         textJustifyColumns: memoizedTextJustifyColumns,
         wrappedColumns: memoizedWrappedColumns,
+        headerTooltip: headerTooltip,
         // Only show data types if they are explicitly set
         showDataTypes: showDataTypes,
         calculateTopKRows: calculate_top_k_rows,
@@ -788,6 +797,7 @@ const DataTableComponent = ({
       memoizedClampedFieldTypes,
       memoizedTextJustifyColumns,
       memoizedWrappedColumns,
+      headerTooltip,
       calculate_top_k_rows,
     ],
   );
@@ -904,6 +914,7 @@ const DataTableComponent = ({
             rowSelection={rowSelection}
             cellSelection={cellSelection}
             cellStyling={cellStyles}
+            hoverTemplate={hoverTemplate}
             downloadAs={showDownload ? downloadAs : undefined}
             enableSearch={enableSearch}
             searchQuery={searchQuery}

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -2,6 +2,7 @@
 
 import { isEqual } from "lodash-es";
 import { type JSX, useEffect, useId, useState } from "react";
+import { useLocale } from "react-aria";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
 import { prettyScientificNumber } from "@/utils/numbers";
@@ -82,6 +83,7 @@ const RangeSliderComponent = ({
   valueMap,
 }: RangeSliderProps): JSX.Element => {
   const id = useId();
+  const { locale } = useLocale();
 
   // Hold internal value
   const [internalValue, setInternalValue] = useState(value);
@@ -150,9 +152,9 @@ const RangeSliderComponent = ({
         />
         {showValue && (
           <div className="text-xs text-muted-foreground min-w-[16px]">
-            {`${prettyScientificNumber(
-              valueMap(internalValue[0]),
-            )}, ${prettyScientificNumber(valueMap(internalValue[1]))}`}
+            {`${prettyScientificNumber(valueMap(internalValue[0]), {
+              locale,
+            })}, ${prettyScientificNumber(valueMap(internalValue[1]), { locale })}`}
           </div>
         )}
       </div>

package/src/plugins/impl/SliderPlugin.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { type JSX, useEffect, useId, useState } from "react";
+import { useLocale } from "react-aria";
 import { z } from "zod";
 import { NumberField } from "@/components/ui/number-field";
 import { cn } from "@/utils/cn";
@@ -85,6 +86,7 @@ const SliderComponent = ({
   disabled,
 }: SliderProps): JSX.Element => {
   const id = useId();
+  const { locale } = useLocale();
 
   // Hold internal value
   const [internalValue, setInternalValue] = useState(value);
@@ -138,7 +140,7 @@ const SliderComponent = ({
         />
         {showValue && (
           <div className="text-xs text-muted-foreground min-w-[16px]">
-            {prettyScientificNumber(valueMap(internalValue))}
+            {prettyScientificNumber(valueMap(internalValue), { locale })}
           </div>
         )}
         {includeInput && (

package/src/plugins/impl/anywidget/model.ts

@@ -17,8 +17,10 @@ export type EventHandler = (...args: any[]) => void;
 
 class ModelManager {
   private models = new Map<string, Deferred<Model<any>>>();
-
-  constructor(private timeout = 10_000) {}
+  private timeout: number;
+  constructor(timeout = 10_000) {
+    this.timeout = timeout;
+  }
 
   get(key: string): Promise<Model<any>> {
     let deferred = this.models.get(key);
@@ -64,16 +66,25 @@ export class Model<T extends Record<string, any>> implements AnyModel<T> {
   private ANY_CHANGE_EVENT = "change";
   private dirtyFields;
   public static _modelManager: ModelManager = MODEL_MANAGER;
+  private data: T;
+  private onChange: (value: Partial<T>) => void;
+  private sendToWidget: (req: {
+    content?: any;
+    buffers?: ArrayBuffer[] | ArrayBufferView[];
+  }) => Promise<null | undefined>;
 
   constructor(
-    private data: T,
-    private onChange: (value: Partial<T>) => void,
-    private sendToWidget: (req: {
+    data: T,
+    onChange: (value: Partial<T>) => void,
+    sendToWidget: (req: {
       content?: any;
       buffers?: ArrayBuffer[] | ArrayBufferView[];
     }) => Promise<null | undefined>,
     initialDirtyFields: Set<keyof T>,
   ) {
+    this.data = data;
+    this.onChange = onChange;
+    this.sendToWidget = sendToWidget;
     this.dirtyFields = new Set(initialDirtyFields);
   }
 

package/src/plugins/impl/data-editor/types.ts

@@ -10,11 +10,13 @@ export interface PositionalEdit {
   value: unknown;
 }
 
-export enum BulkEdit {
-  Insert = "insert",
-  Remove = "remove",
-  Rename = "rename",
-}
+export const BulkEdit = {
+  Insert: "insert",
+  Remove: "remove",
+  Rename: "rename",
+} as const;
+
+type BulkEdit = (typeof BulkEdit)[keyof typeof BulkEdit];
 
 export interface RowEdit {
   rowIdx: number;

package/src/plugins/impl/data-explorer/components/column-summary.tsx

@@ -3,6 +3,7 @@
 import type { Schema } from "compassql/build/src/schema";
 import { BarChartBigIcon } from "lucide-react";
 import React, { useState } from "react";
+import { useDateFormatter, useNumberFormatter } from "react-aria";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -131,7 +132,9 @@ export const ColumnSummary: React.FC<Props> = ({ schema }) => {
           {STAT_KEYS.map((key) => (
             <div key={key} className="flex flex-row gap-2 min-w-[100px]">
               <span className="font-semibold">{key}</span>
-              <span>{formatStat(stats?.[key])}</span>
+              <span>
+                <FormatStat value={stats?.[key]} />
+              </span>
             </div>
           ))}
         </div>
@@ -151,24 +154,28 @@ const STAT_KEYS = [
   "stdev",
 ];
 
-function formatStat(value: unknown) {
+const FormatStat = ({ value }: { value: unknown }) => {
+  // Decimal .2
+  const numberFormatter = useNumberFormatter({
+    maximumFractionDigits: 2,
+  });
+
+  // Just day, month, year
+  const dateFormatter = useDateFormatter({
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+
   if (typeof value === "number") {
-    // Decimal .2
-    return new Intl.NumberFormat("en-US", {
-      maximumFractionDigits: 2,
-    }).format(value);
+    return numberFormatter.format(value);
   }
   if (typeof value === "string") {
     return value;
   }
   if (typeof value === "object" && value instanceof Date) {
-    // Just day, month, year
-    return new Intl.DateTimeFormat("en-US", {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    }).format(value);
+    return dateFormatter.format(value);
   }
 
   return String(value);
-}
+};

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -4,6 +4,10 @@ import { isEqual } from "lodash-es";
 import { Code2Icon, DatabaseIcon, FunctionSquareIcon } from "lucide-react";
 import { type JSX, memo, useEffect, useRef, useState } from "react";
 import { z } from "zod";
+import {
+  type DownloadAsArgs,
+  DownloadAsSchema,
+} from "@/components/data-table/schemas";
 import type { FieldTypesWithExternalType } from "@/components/data-table/types";
 import { ReadonlyCode } from "@/components/editor/code/readonly-python-code";
 import { Spinner } from "@/components/icons/spinner";
@@ -38,6 +42,7 @@ interface Data {
   label?: string | null;
   columns: ColumnDataTypes;
   pageSize: number;
+  showDownload: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -67,6 +72,7 @@ type PluginFunctions = {
     data: TableData<T>;
     total_rows: number;
   }>;
+  download_as: DownloadAsArgs;
 };
 
 // Value is selection, but it is not currently exposed to the user
@@ -77,13 +83,14 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
     z.object({
       label: z.string().nullish(),
       pageSize: z.number().default(5),
+      showDownload: z.boolean().default(true),
       columns: z
         .array(z.tuple([z.string().or(z.number()), z.string(), z.string()]))
         .transform((value) => {
           const map = new Map<ColumnId, string>();
-          value.forEach(([key, dataType]) =>
-            map.set(key as ColumnId, dataType as DataType),
-          );
+          value.forEach(([key, dataType]) => {
+            map.set(key as ColumnId, dataType as DataType);
+          });
           return map;
         }),
     }),
@@ -124,6 +131,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
           total_rows: z.number(),
         }),
       ),
+    download_as: DownloadAsSchema,
   })
   .renderer((props) => (
     <TableProviders>
@@ -141,6 +149,8 @@ interface DataTableProps extends Data, PluginFunctions {
   value: S;
   setValue: (value: S) => void;
   host: HTMLElement;
+  showDownload: boolean;
+  download_as: DownloadAsArgs;
 }
 
 const EMPTY: Transformations = {
@@ -151,11 +161,13 @@ export const DataFrameComponent = memo(
   ({
     columns,
     pageSize,
+    showDownload,
     value,
     setValue,
     get_dataframe,
     get_column_values,
     search,
+    download_as,
     host,
   }: DataTableProps): JSX.Element => {
     const { data, error, isPending } = useAsyncData(
@@ -270,8 +282,8 @@ export const DataFrameComponent = memo(
           pagination={true}
           fieldTypes={field_types}
           rowHeaders={row_headers || Arrays.EMPTY}
-          showDownload={false}
-          download_as={Functions.THROW}
+          showDownload={showDownload}
+          download_as={download_as}
           enableSearch={false}
           showFilters={false}
           search={search}

package/src/plugins/impl/panel/utils.ts

@@ -57,11 +57,13 @@ export class EventBuffer<T> {
   private buffer: T[] = [];
   private isBlocked = false;
   private timeout: number | null = null;
+  private processEvents: () => void;
+  private blockDuration: number;
 
-  constructor(
-    private processEvents: () => void,
-    private blockDuration = 200,
-  ) {}
+  constructor(processEvents: () => void, blockDuration = 200) {
+    this.processEvents = processEvents;
+    this.blockDuration = blockDuration;
+  }
 
   add(event: T) {
     this.buffer.push(event);

package/src/plugins/layout/OutlinePlugin.tsx

@@ -0,0 +1,69 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { Provider, useAtomValue } from "jotai";
+import type { JSX } from "react";
+import { z } from "zod";
+import { notebookOutline } from "@/core/cells/cells";
+import { store } from "@/core/state/jotai";
+import { OutlineList } from "../../components/editor/chrome/panels/outline/floating-outline";
+import {
+  findOutlineElements,
+  useActiveOutline,
+} from "../../components/editor/chrome/panels/outline/useActiveOutline";
+import type {
+  IStatelessPlugin,
+  IStatelessPluginProps,
+} from "../stateless-plugin";
+
+interface Data {
+  label?: string;
+}
+
+const OutlineContent: React.FC<{ label?: string }> = ({ label }) => {
+  const { items } = useAtomValue(notebookOutline);
+  const headerElements = findOutlineElements(items);
+  const { activeHeaderId, activeOccurrences } =
+    useActiveOutline(headerElements);
+
+  if (items.length === 0) {
+    return (
+      <div className="text-muted-foreground text-sm p-4 border border-dashed border-border rounded-lg">
+        No outline found. Add markdown headings to your notebook to create an
+        outline.
+      </div>
+    );
+  }
+
+  return (
+    <div className="border border-border rounded-lg">
+      {label && (
+        <div className="px-4 py-2 border-b border-border font-medium text-sm">
+          {label}
+        </div>
+      )}
+      <OutlineList
+        className="max-h-[400px]"
+        items={items}
+        activeHeaderId={activeHeaderId}
+        activeOccurrences={activeOccurrences}
+      />
+    </div>
+  );
+};
+
+export class OutlinePlugin implements IStatelessPlugin<Data> {
+  tagName = "marimo-outline";
+
+  validator = z.object({
+    label: z.string().optional(),
+  });
+
+  render(props: IStatelessPluginProps<Data>): JSX.Element {
+    const { label } = props.data;
+
+    return (
+      <Provider store={store}>
+        <OutlineContent label={label} />
+      </Provider>
+    );
+  }
+}

package/src/plugins/layout/StatPlugin.tsx

@@ -2,6 +2,7 @@
 
 import { TriangleIcon } from "lucide-react";
 import type { JSX } from "react";
+import { useLocale } from "react-aria";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
 import { prettyNumber } from "@/utils/numbers";
@@ -41,6 +42,8 @@ export const StatComponent: React.FC<Data> = ({
   bordered,
   direction,
 }) => {
+  const { locale } = useLocale();
+
   const renderPrettyValue = () => {
     if (value == null) {
       return <i>No value</i>;
@@ -51,7 +54,7 @@ export const StatComponent: React.FC<Data> = ({
     }
 
     if (typeof value === "number") {
-      return prettyNumber(value);
+      return prettyNumber(value, locale);
     }
 
     if (typeof value === "boolean") {

package/src/plugins/plugins.ts

@@ -45,6 +45,7 @@ import { JsonOutputPlugin } from "./layout/JsonOutputPlugin";
 import { LazyPlugin } from "./layout/LazyPlugin";
 import { MimeRendererPlugin } from "./layout/MimeRenderPlugin";
 import { MermaidPlugin } from "./layout/mermaid/MermaidPlugin";
+import { OutlinePlugin } from "./layout/OutlinePlugin";
 import { ProgressPlugin } from "./layout/ProgressPlugin";
 import { RoutesPlugin } from "./layout/RoutesPlugin";
 import { StatPlugin } from "./layout/StatPlugin";
@@ -99,6 +100,7 @@ const LAYOUT_PLUGINS: Array<IStatelessPlugin<unknown>> = [
   new MimeRendererPlugin(),
   new MermaidPlugin(),
   new NavigationMenuPlugin(),
+  new OutlinePlugin(),
   new ProgressPlugin(),
   new RoutesPlugin(),
   new StatPlugin(),

package/src/stories/dataframe.stories.tsx

@@ -40,6 +40,8 @@ export const DataFrame: StoryObj = {
         get_dataframe={() => Promise.reject(new Error("not implemented"))}
         search={Functions.THROW}
         host={document.body}
+        showDownload={false}
+        download_as={async () => ""}
       />
     );
   },

package/src/utils/__tests__/dates.test.ts

@@ -8,6 +8,8 @@ import {
   timeAgo,
 } from "../dates";
 
+const locale = "en-US";
+
 describe("dates", () => {
   // Save original timezone
   let originalTimezone: string | undefined;
@@ -25,36 +27,38 @@ describe("dates", () => {
 
   describe("prettyDate", () => {
     it("returns empty string for null or undefined", () => {
-      expect(prettyDate(null, "date")).toBe("");
-      expect(prettyDate(undefined, "date")).toBe("");
+      expect(prettyDate(null, "date", locale)).toBe("");
+      expect(prettyDate(undefined, "date", locale)).toBe("");
     });
 
     it("formats date correctly", () => {
       const date = new Date("2023-05-15T12:00:00Z");
       // Using a regex to match the pattern since exact format may vary by locale
-      expect(prettyDate(date.toISOString(), "date")).toMatch(/May 15, 2023/);
+      expect(prettyDate(date.toISOString(), "date", locale)).toMatch(
+        /May 15, 2023/,
+      );
     });
 
     it("formats datetime correctly", () => {
       const date = new Date("2023-05-15T12:00:00Z");
-      expect(prettyDate(date.toISOString(), "datetime")).toMatch(
+      expect(prettyDate(date.toISOString(), "datetime", locale)).toMatch(
         /May 15, 2023/,
       );
     });
 
     it("handles errors gracefully", () => {
-      expect(prettyDate("invalid-date", "date")).toBe("Invalid Date");
+      expect(prettyDate("invalid-date", "date", locale)).toBe("Invalid Date");
     });
 
     it("handles numeric timestamp input", () => {
       const timestamp = 1_684_152_000_000; // 2023-05-15T12:00:00Z in milliseconds
-      expect(prettyDate(timestamp, "date")).toMatch(/May 15, 2023/);
+      expect(prettyDate(timestamp, "date", locale)).toMatch(/May 15, 2023/);
     });
 
     it("preserves timezone for datetime type", () => {
       // This date is in winter time to avoid daylight saving time issues
       const date = new Date("2023-01-15T15:30:00Z");
-      expect(prettyDate(date.toISOString(), "datetime")).toMatch(
+      expect(prettyDate(date.toISOString(), "datetime", locale)).toMatch(
         /Jan 15, 2023/,
       );
     });
@@ -62,7 +66,9 @@ describe("dates", () => {
     it("drops timezone for date type by using UTC", () => {
       // Create a date that would be different days in different timezones
       const date = new Date("2023-05-15T23:30:00Z"); // Late in the day UTC
-      expect(prettyDate(date.toISOString(), "date")).toMatch(/May 15, 2023/);
+      expect(prettyDate(date.toISOString(), "date", locale)).toMatch(
+        /May 15, 2023/,
+      );
     });
 
     describe("with different locales", () => {
@@ -86,7 +92,9 @@ describe("dates", () => {
         };
 
         const date = new Date("2023-05-15T12:00:00Z");
-        expect(prettyDate(date.toISOString(), "date")).toBe("15 mai 2023");
+        expect(prettyDate(date.toISOString(), "date", locale)).toBe(
+          "15 mai 2023",
+        );
       });
     });
   });
@@ -94,34 +102,42 @@ describe("dates", () => {
   describe("exactDateTime", () => {
     it("formats date without milliseconds", () => {
       const date = new Date("2023-05-15T12:00:00.000Z");
-      expect(exactDateTime(date, undefined)).toBe("2023-05-15 12:00:00");
+      expect(exactDateTime(date, undefined, locale)).toBe(
+        "2023-05-15 12:00:00",
+      );
     });
 
     it("formats date with milliseconds", () => {
       const date = new Date("2023-05-15T12:00:00.123Z");
-      expect(exactDateTime(date, undefined)).toBe("2023-05-15 12:00:00.123");
+      expect(exactDateTime(date, undefined, locale)).toBe(
+        "2023-05-15 12:00:00.123",
+      );
     });
 
     it("formats date in UTC when renderInUTC is true", () => {
       const date = new Date("2023-05-15T12:00:00.000Z");
-      expect(exactDateTime(date, "UTC")).toBe("2023-05-15 12:00:00 UTC");
+      expect(exactDateTime(date, "UTC", locale)).toBe(
+        "2023-05-15 12:00:00 UTC",
+      );
     });
 
     it("formats date with milliseconds in UTC when renderInUTC is true", () => {
       const date = new Date("2023-05-15T12:00:00.123Z");
-      expect(exactDateTime(date, "UTC")).toBe("2023-05-15 12:00:00.123 UTC");
+      expect(exactDateTime(date, "UTC", locale)).toBe(
+        "2023-05-15 12:00:00.123 UTC",
+      );
     });
 
     it("formats date in America/New_York timezone", () => {
       const date = new Date("2023-05-15T12:00:00.000Z");
-      expect(exactDateTime(date, "America/New_York")).toBe(
+      expect(exactDateTime(date, "America/New_York", locale)).toBe(
         "2023-05-15 08:00:00 EDT",
       );
     });
 
     it("formats date with milliseconds in America/New_York timezone", () => {
       const date = new Date("2023-05-15T12:00:00.123Z");
-      expect(exactDateTime(date, "America/New_York")).toBe(
+      expect(exactDateTime(date, "America/New_York", locale)).toBe(
         "2023-05-15 08:00:00.123 EDT",
       );
     });
@@ -129,42 +145,47 @@ describe("dates", () => {
 
   describe("timeAgo", () => {
     it("returns empty string for null, undefined, or 0", () => {
-      expect(timeAgo(null)).toBe("");
-      expect(timeAgo(undefined)).toBe("");
-      expect(timeAgo(0)).toBe("");
+      expect(timeAgo(null, locale)).toBe("");
+      expect(timeAgo(undefined, locale)).toBe("");
+      expect(timeAgo(0, locale)).toBe("");
     });
 
     it("formats today's date correctly", () => {
       const today = new Date();
-      const result = timeAgo(today.toISOString());
+      const result = timeAgo(today.toISOString(), locale);
       expect(result).toMatch(/Today at/);
     });
 
     it("formats yesterday's date correctly", () => {
       const yesterday = new Date();
       yesterday.setDate(yesterday.getDate() - 1);
-      const result = timeAgo(yesterday.toISOString());
+      const result = timeAgo(yesterday.toISOString(), locale);
       expect(result).toMatch(/Yesterday at/);
     });
 
     it("formats older dates correctly", () => {
       const oldDate = new Date("2020-01-01T12:00:00Z");
-      const result = timeAgo(oldDate.toISOString());
+      const result = timeAgo(oldDate.toISOString(), locale);
       expect(result).toMatch(/Jan 1, 2020 at/);
     });
 
     it("handles errors gracefully", () => {
-      expect(timeAgo("invalid-date")).toBe("Invalid Date at Invalid Date");
+      expect(timeAgo("invalid-date", locale)).toBe(
+        "Invalid Date at Invalid Date",
+      );
     });
   });
 
   describe("getShortTimeZone", () => {
     it("returns the short timezone", () => {
-      expect(getShortTimeZone("America/New_York")).toBeOneOf(["EDT", "EST"]);
+      expect(getShortTimeZone("America/New_York", locale)).toBeOneOf([
+        "EDT",
+        "EST",
+      ]);
     });
 
     it("handles errors gracefully", () => {
-      expect(getShortTimeZone("MarimoLand")).toBe("MarimoLand");
+      expect(getShortTimeZone("MarimoLand", locale)).toBe("MarimoLand");
     });
   });