@marimo-team/frontend 0.25.2-dev138 → 0.25.2-dev139

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-C369kLAD.js"></script>
+    <script type="module" crossorigin src="./assets/index-s-M1OXjs.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-B0Z9INg1.js">
     <link rel="modulepreload" crossorigin href="./assets/react-DVplv7_D.js">
     <link rel="modulepreload" crossorigin href="./assets/compiler-runtime-BrajqUja.js">
@@ -105,7 +105,7 @@
     <link rel="modulepreload" crossorigin href="./assets/tooltip-C9TuY18o.js">
     <link rel="modulepreload" crossorigin href="./assets/paths-bkIFVj8h.js">
     <link rel="modulepreload" crossorigin href="./assets/useLifecycle-Mq4gc5kS.js">
-    <link rel="modulepreload" crossorigin href="./assets/toDate-DaZHg4Of.js">
+    <link rel="modulepreload" crossorigin href="./assets/toDate-DOj9Q6uC.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-B_PMVg8T.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-dialog-BaPGzeOK.js">
     <link rel="modulepreload" crossorigin href="./assets/arrays-BqUx5USx.js">
@@ -139,7 +139,7 @@
     <link rel="modulepreload" crossorigin href="./assets/useTheme-COhSHkCj.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-C7aJJz0Y.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es--06brOip.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-BWyR7TCJ.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-BRkCaSsh.js">
     <link rel="modulepreload" crossorigin href="./assets/coerce-CpE6kUdX.js">
     <link rel="modulepreload" crossorigin href="./assets/get-DjNf4SIX.js">
     <link rel="modulepreload" crossorigin href="./assets/_hasPath-BmRQipI0.js">
@@ -152,47 +152,47 @@
     <link rel="modulepreload" crossorigin href="./assets/copy-D8O_CYCG.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-D9Dr-k4J.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-YOKDWASO-BIpRENEC.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-bBVFObv0.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-BG3sp2rs.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-Djr5m5ac.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-BIiRXh_3.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DIY1IVXx.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-B5VPTO14.js">
-    <link rel="modulepreload" crossorigin href="./assets/blob-QvTM0DdL.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-B2vUhREg.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-BbOqmHy3.js">
+    <link rel="modulepreload" crossorigin href="./assets/blob-D5nfNHOo.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-pdKBv96t.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-iX1eufdl.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-DCrsa1nH.js">
     <link rel="modulepreload" crossorigin href="./assets/api-BeC_VSGv.js">
     <link rel="modulepreload" crossorigin href="./assets/share-BZW3tzEX.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CbeVJ6OD.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-DMZ8VJcq.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-_Qai_QyX.js">
     <link rel="modulepreload" crossorigin href="./assets/pair-CaQyK6En.js">
-    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-F1payLgE.js">
+    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-Gl5nCA8C.js">
     <link rel="modulepreload" crossorigin href="./assets/config-BOKzA3tF.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-eAtVhbNZ.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-C1rnl-0o.js">
     <link rel="modulepreload" crossorigin href="./assets/html-to-image-DK9Zl1lU.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-B5cBmz55.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-DCJXy66H.js">
     <link rel="modulepreload" crossorigin href="./assets/switch-CTaiAjrz.js">
     <link rel="modulepreload" crossorigin href="./assets/tabs-BuQlZFbt.js">
     <link rel="modulepreload" crossorigin href="./assets/table-DG7Ap4H4.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-CxVozGAC.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-Qw1f8Jhy.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-PNciswRG.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-GM5E_bUs.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-63DyBLHQ.js">
     <link rel="modulepreload" crossorigin href="./assets/external-link-UrX9KO36.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-DyNE-o8o.js">
     <link rel="modulepreload" crossorigin href="./assets/message-circle-C3rKm8_a.js">
     <link rel="modulepreload" crossorigin href="./assets/hat-glasses-C8RhSVii.js">
     <link rel="modulepreload" crossorigin href="./assets/package-GSoSTiIK.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-C_fKqG0e.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-Cq6x_5ML.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-DTaqCu_d.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-C1RQhToR.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-CIHoy1VE.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-4jDnOIVr.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-XsPO8hNi.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-LSth_8hT.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-D60XkCny.js">
     <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-DA-62E-Y.js">
-    <link rel="modulepreload" crossorigin href="./assets/en-US-BxZyFbza.js">
-    <link rel="modulepreload" crossorigin href="./assets/isValid-BFmJHgM5.js">
-    <link rel="modulepreload" crossorigin href="./assets/dates-C7NNASps.js">
+    <link rel="modulepreload" crossorigin href="./assets/en-US-Buu61juQ.js">
+    <link rel="modulepreload" crossorigin href="./assets/isValid-q_Ad80ug.js">
+    <link rel="modulepreload" crossorigin href="./assets/dates-BbFQ2oE4.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-CNPGWpMu.js">
     <link rel="modulepreload" crossorigin href="./assets/precisionRound-Bq_nmf5u.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-D5bOh7g6.js">
@@ -207,7 +207,7 @@
     <link rel="modulepreload" crossorigin href="./assets/formats-yZ06h1Pl.js">
     <link rel="modulepreload" crossorigin href="./assets/table-vrvqpuKJ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-Dbe0MrFr.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-Bhgwb5kV.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-D6HIIsCb.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-C4_v6fQW.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-_W_Lo0P4.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-BfSBcO5B.js">
@@ -221,11 +221,11 @@
     <link rel="modulepreload" crossorigin href="./assets/file-icons-CdJgUy-I.js">
     <link rel="modulepreload" crossorigin href="./assets/globe-UdPdIbF7.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-CI_o7NhW.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAddCell-mcL2PJTv.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-bOYKcbg4.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-GR7eEQrT.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-DCSMIsTX.js">
     <link rel="modulepreload" crossorigin href="./assets/data-grid-types-DgHVN_Zz.js">
     <link rel="modulepreload" crossorigin href="./assets/glide-utils-CIrAxdjv.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-BJr1QW8R.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-Cm2D6vyX.js">
     <link rel="modulepreload" crossorigin href="./assets/square-BPmgQFnh.js">
     <link rel="modulepreload" crossorigin href="./assets/triangle-alert-DmIqR8sY.js">
     <link rel="modulepreload" crossorigin href="./assets/prop-types-Djf4O40e.js">
@@ -237,7 +237,7 @@
     <link rel="modulepreload" crossorigin href="./assets/icons-CiZ_8zS-.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-DFIVN9dn.js">
     <link rel="modulepreload" crossorigin href="./assets/pathUtils-DPmlLd-r.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-BnO_h00w.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-XD9FAV-f.js">
     <link rel="stylesheet" crossorigin href="./assets/cells-0PFKL3SH.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DjIHoF9Z.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B0GmlMnR.css">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.25.2-dev138",
+  "version": "0.25.2-dev139",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/__tests__/column_formatting.test.ts

@@ -50,6 +50,36 @@ describe("applyFormat", () => {
         }),
       ).toBe("10/1/23, 12:00:00 PM UTC");
     });
+
+    it("should treat naive datetime strings as UTC", () => {
+      const naive = "2023-10-01 23:30:00";
+      expect(
+        applyFormat(naive, { locale, format: "Date", dataType: "datetime" }),
+      ).toBe("10/1/23");
+      expect(
+        applyFormat(naive, {
+          locale,
+          format: "Datetime",
+          dataType: "datetime",
+        }),
+      ).toBe("10/1/23, 11:30:00 PM UTC");
+      expect(
+        applyFormat(naive, { locale, format: "Time", dataType: "datetime" }),
+      ).toBe("11:30:00 PM UTC");
+      expect(
+        applyFormat("2023-10-01T23:30:00.250", {
+          locale,
+          format: "Time",
+          dataType: "datetime",
+        }),
+      ).toBe("11:30:00 PM UTC");
+    });
+
+    it("should keep the calendar date for date-only strings", () => {
+      expect(
+        applyFormat("2023-10-01", { locale, format: "Date", dataType: "date" }),
+      ).toBe("10/1/23");
+    });
   });
 
   describe("number formatting", () => {

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

@@ -1268,6 +1268,76 @@ describe("renderCellValue with datetime values", () => {
       }).not.toThrow();
     });
   });
+
+  it("should render the column format for datetime strings", () => {
+    const mockColumn = {
+      ...createMockColumn(),
+      getColumnFormatting: () => "Date",
+      applyColumnFormatting: () => "FORMATTED",
+    } as unknown as Column<unknown>;
+
+    const selectCell = vi.fn();
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => "2024-06-14 12:34:20",
+      getValue: () => "2024-06-14 12:34:20",
+      selectCell,
+      cellStyles: "cell-styles",
+    });
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <TooltipProvider>{result}</TooltipProvider>
+      </I18nProvider>,
+    );
+    expect(container.textContent).toContain("FORMATTED");
+    expect(container.textContent).not.toContain("2024-06-14 12:34:20");
+
+    const wrapper = container.querySelector(".cell-styles");
+    expect(wrapper).not.toBeNull();
+    wrapper?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(selectCell).toHaveBeenCalledTimes(1);
+  });
+
+  it("should render the column format for Date instances", () => {
+    const mockColumn = {
+      ...createMockColumn(),
+      getColumnFormatting: () => "Date",
+      applyColumnFormatting: () => "FORMATTED",
+    } as unknown as Column<unknown>;
+    const value = new Date("2024-06-14T12:34:20Z");
+
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => value,
+      getValue: () => value,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <TooltipProvider>{result}</TooltipProvider>
+      </I18nProvider>,
+    );
+    expect(container.textContent).toContain("FORMATTED");
+  });
+
+  it("should keep the raw string when no column format is set", () => {
+    const mockColumn = createMockColumn();
+
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => "2024-06-14",
+      getValue: () => "2024-06-14",
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <TooltipProvider>{result}</TooltipProvider>
+      </I18nProvider>,
+    );
+    expect(container.textContent).toContain("2024-06-14");
+  });
 });
 
 test("column_widths sets fixed size and meta.width", () => {

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>
     );
   }