@marimo-team/frontend 0.25.2-dev97 → 0.25.2

package/src/components/data-table/column-formatting/feature.ts

@@ -97,6 +97,7 @@ export const getFormatters = memoizeLastValue((locale: string) => {
 
   const dateFormatter = new Intl.DateTimeFormat(locale, {
     dateStyle: "short", // 3/4/2024
+    timeZone: "UTC",
   });
 
   const dateTimeFormatter = new Intl.DateTimeFormat(locale, {
@@ -123,6 +124,24 @@ export const getFormatters = memoizeLastValue((locale: string) => {
   };
 });
 
+const TIMEZONE_SUFFIX = /(?:Z|[+-]\d{2}:?\d{2})$/i;
+
+/**
+ * The date formatters render in UTC. A naive datetime string carries no
+ * offset, and `new Date` would read it as local time, so pin it to UTC
+ * to keep the wall-clock fields the backend sent.
+ */
+function parseDateAsUTC(value: unknown): Date {
+  if (typeof value !== "string") {
+    return new Date(value as number | Date);
+  }
+  const trimmed = value.trim();
+  if (TIMEZONE_SUFFIX.test(trimmed) || !trimmed.includes(":")) {
+    return new Date(trimmed);
+  }
+  return new Date(`${trimmed.replace(" ", "T")}Z`);
+}
+
 // Apply formatting to a value given a format and data type
 export const applyFormat = (
   value: unknown,
@@ -152,7 +171,7 @@ export const applyFormat = (
       return value;
     case "datetime":
     case "date": {
-      const date = new Date(value as string);
+      const date = parseDateAsUTC(value);
       switch (format) {
         case "Date":
           return dateFormatter.format(date);

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

@@ -6,14 +6,14 @@ import { Popover as PopoverPrimitive } from "radix-ui";
 const PopoverClose = PopoverPrimitive.Close;
 
 import type { Column, ColumnDef } from "@tanstack/react-table";
-import { formatDate, isValid } from "date-fns";
+import { isValid } from "date-fns";
 import { useRef } from "react";
 import { useLocale, useNumberFormatter } from "react-aria";
 import { WithLocale } from "@/core/i18n/with-locale";
 import type { DataType } from "@/core/kernel/messages";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
-import { type DateFormat, exactDateTime, getDateFormat } from "@/utils/dates";
+import { exactDateTime } from "@/utils/dates";
 import { Events } from "@/utils/events";
 import { Logger } from "@/utils/Logger";
 import { Maps } from "@/utils/maps";
@@ -583,21 +583,19 @@ function renderDate({
   value,
   dataType,
   dtype,
-  format,
+  displayValue,
   locale,
 }: {
   value: Date;
   dataType?: DataType;
   dtype?: string;
-  format?: DateFormat | null;
+  displayValue?: string;
   locale: string;
 }): React.ReactNode {
   const type = dataType === "date" ? "date" : "datetime";
   const timezone = extractTimezone(dtype);
 
-  const exactValue = format
-    ? formatDate(value, format)
-    : exactDateTime(value, timezone, locale);
+  const exactValue = displayValue ?? exactDateTime(value, timezone, locale);
 
   return (
     <DatePopover date={value} type={type}>
@@ -640,7 +638,8 @@ export function renderCellValue<TData, TValue>({
 
   if (dataType === "datetime" && typeof value === "string") {
     try {
-      if (!isValid(value)) {
+      const date = new Date(value);
+      if (!format || !isValid(date)) {
         return (
           <div onClick={selectCell} className={cellStyles}>
             {value}
@@ -648,14 +647,15 @@ export function renderCellValue<TData, TValue>({
         );
       }
 
-      const date = new Date(value);
-      const format = getDateFormat(value);
+      const displayValue = String(column.applyColumnFormatting(value));
       return (
-        <WithLocale>
-          {(locale) =>
-            renderDate({ value: date, dataType, dtype, format, locale })
-          }
-        </WithLocale>
+        <div onClick={selectCell} className={cellStyles}>
+          <WithLocale>
+            {(locale) =>
+              renderDate({ value: date, dataType, dtype, displayValue, locale })
+            }
+          </WithLocale>
+        </div>
       );
     } catch (error) {
       Logger.error("Error parsing datetime, fallback to string", error);
@@ -672,10 +672,17 @@ export function renderCellValue<TData, TValue>({
     }
 
     // e.g. 2010-10-07 17:15:00
+    const displayValue = format
+      ? String(column.applyColumnFormatting(value))
+      : undefined;
     return (
-      <WithLocale>
-        {(locale) => renderDate({ value, dataType, dtype, locale })}
-      </WithLocale>
+      <div onClick={selectCell} className={cellStyles}>
+        <WithLocale>
+          {(locale) =>
+            renderDate({ value, dataType, dtype, displayValue, locale })
+          }
+        </WithLocale>
+      </div>
     );
   }
 

package/src/components/editor/controls/__tests__/notebook-menu-dropdown.test.tsx

@@ -10,6 +10,7 @@ import {
 import { Provider } from "jotai";
 import type React from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { requestId } from "@/__tests__/branded";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { ModalProvider } from "@/components/modal/ImperativeModal";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -129,7 +130,7 @@ describe("NotebookMenuDropdown", () => {
     }));
     invalidateDataSourceDiscovery();
     vi.spyOn(DiscoverDataSources, "request").mockResolvedValue({
-      request_id: "request-id",
+      request_id: requestId("request-id"),
       sources: [],
     });
   });
@@ -142,7 +143,7 @@ describe("NotebookMenuDropdown", () => {
 
   it("shows detected databases in the add connection submenu", async () => {
     vi.mocked(DiscoverDataSources.request).mockResolvedValue({
-      request_id: "request-id",
+      request_id: requestId("request-id"),
       sources: [POSTGRES_SOURCE],
     });
 
@@ -172,7 +173,7 @@ describe("NotebookMenuDropdown", () => {
 
   it("shows detected storage in the add remote storage submenu", async () => {
     vi.mocked(DiscoverDataSources.request).mockResolvedValue({
-      request_id: "request-id",
+      request_id: requestId("request-id"),
       sources: [S3_SOURCE],
     });
 

package/src/components/editor/output/console/ConsoleOutput.tsx

@@ -360,10 +360,12 @@ const StdInput = (props: {
           }
 
           if (e.key === "Enter" && !e.shiftKey) {
-            if (value && !isPassword) {
-              addToHistory(value);
+            // Submit the visible input even if its change has not committed yet.
+            const submittedValue = e.currentTarget.value;
+            if (submittedValue && !isPassword) {
+              addToHistory(submittedValue);
             }
-            onSubmit(value);
+            onSubmit(submittedValue);
             setValue("");
             e.preventDefault();
             e.stopPropagation();

package/src/components/editor/output/console/__tests__/ConsoleOutput.test.tsx

@@ -179,6 +179,24 @@ describe("ConsoleOutput pdb history", () => {
     expect(nextInput).toHaveValue("");
   });
 
+  it("submits the visible input when its change has not reached React state", () => {
+    const onSubmitDebugger = vi.fn();
+    renderWithProvider(
+      <ConsoleOutput
+        {...defaultProps}
+        consoleOutputs={[stdinPrompt("Name: ")]}
+        onSubmitDebugger={onSubmitDebugger}
+      />,
+    );
+
+    const input = screen.getByTestId<HTMLInputElement>("console-input");
+    // Browser autofill or input events can precede the controlled-state update.
+    input.value = "marimo";
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(onSubmitDebugger).toHaveBeenCalledWith("marimo", 0);
+  });
+
   it("should submit an empty string when Enter is pressed with no input", () => {
     // Many CLIs prompt "Press Enter to continue" and expect "" back.
     const onSubmitDebugger = vi.fn();

package/src/components/storage/__tests__/storage-file-viewer.test.tsx

@@ -2,6 +2,7 @@
 
 import { render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { requestId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DownloadStorage } from "@/core/storage/request-registry";
 import { StorageFileViewer } from "../storage-file-viewer";
@@ -41,7 +42,7 @@ describe("StorageFileViewer", () => {
 
   it("renders TOML from generic storage metadata as read-only TOML", async () => {
     const request = vi.spyOn(DownloadStorage, "request").mockResolvedValue({
-      request_id: "request-id",
+      request_id: requestId("request-id"),
       url: "https://example.com/pyproject.toml?signature=secret",
     });
     vi.stubGlobal(

package/src/core/cells/__tests__/document-roundtrip.test.ts

@@ -178,6 +178,22 @@ function documentSnapshot(state: NotebookState) {
 }
 
 describe("document round-trip", () => {
+  it("applies a server transaction that deletes every cell", () => {
+    setup("a", "b");
+    applyTransactionChanges(
+      [
+        ...replica.cellIds.inOrderIds.map((cellId) => ({
+          type: "delete-cell" as const,
+          cellId,
+        })),
+        { type: "reorder-cells", cellIds: [] },
+      ],
+      replicaActions,
+      () => replica.cellIds.inOrderIds,
+    );
+    expect(documentSnapshot(replica)).toEqual([]);
+  });
+
   it("initial setup converges", () => {
     setup("a", "b", "c");
     expect(documentSnapshot(primary)).toEqual(documentSnapshot(replica));