@marimo-team/islands 0.21.2-dev94 → 0.21.2-dev95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.21.2-dev94",
+  "version": "0.21.2-dev95",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -29,7 +29,6 @@ interface TableActionsProps<TData> {
   onRowSelectionChange?: (value: RowSelectionState) => void;
   table: Table<TData>;
   downloadAs?: DownloadActionProps["downloadAs"];
-  downloadFileName?: string;
   getRowIds?: GetRowIds;
   toggleDisplayHeader?: () => void;
   showChartBuilder?: boolean;
@@ -51,7 +50,6 @@ export const TableActions = <TData,>({
   onRowSelectionChange,
   table,
   downloadAs,
-  downloadFileName,
   getRowIds,
   toggleDisplayHeader,
   showChartBuilder,
@@ -165,12 +163,7 @@ export const TableActions = <TData,>({
         </span>
       )}
       <div className="ml-auto">
-        {downloadAs && (
-          <DownloadAs
-            downloadAs={downloadAs}
-            downloadFileName={downloadFileName}
-          />
-        )}
+        {downloadAs && <DownloadAs downloadAs={downloadAs} />}
       </div>
     </div>
   );

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

@@ -127,7 +127,6 @@ const DataTableInternal = <TData,>({
   paginationState,
   setPaginationState,
   downloadAs,
-  downloadFileName,
   manualPagination = false,
   pagination = false,
   onRowSelectionChange,
@@ -322,7 +321,6 @@ const DataTableInternal = <TData,>({
         onRowSelectionChange={onRowSelectionChange}
         table={table}
         downloadAs={downloadAs}
-        downloadFileName={downloadFileName}
         getRowIds={getRowIds}
         toggleDisplayHeader={toggleDisplayHeader}
         showChartBuilder={showChartBuilder}

package/src/components/data-table/download-actions.tsx

@@ -14,7 +14,6 @@ import { logNever } from "@/utils/assertNever";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadByURL } from "@/utils/download";
 import { prettyError } from "@/utils/errors";
-import { Filenames } from "@/utils/filenames";
 import {
   jsonParseWithSpecialChar,
   jsonToMarkdown,
@@ -36,8 +35,9 @@ import { toast } from "../ui/use-toast";
 type DownloadFormat = "csv" | "json" | "parquet";
 
 export interface DownloadActionProps {
-  downloadAs: (req: { format: DownloadFormat }) => Promise<string>;
-  downloadFileName?: string;
+  downloadAs: (req: {
+    format: DownloadFormat;
+  }) => Promise<{ url: string; filename: string }>;
 }
 
 const options = [
@@ -99,7 +99,9 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
     </Button>
   );
 
-  const getDownloadUrl = (format: DownloadFormat) => {
+  const getDownloadResponse = (
+    format: DownloadFormat,
+  ): Promise<{ url: string; filename: string }> => {
     return props.downloadAs({ format }).catch((error) => {
       toast({
         title: "Failed to download",
@@ -116,26 +118,26 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
 
     switch (format) {
       case "tsv": {
-        const downloadUrl = await getDownloadUrl("json");
-        const json = await fetchJson(downloadUrl);
+        const { url } = await getDownloadResponse("json");
+        const json = await fetchJson(url);
         text = jsonToTSV(json, locale);
         break;
       }
       case "json": {
-        const downloadUrl = await getDownloadUrl("json");
-        const json = await fetchJson(downloadUrl);
+        const { url } = await getDownloadResponse("json");
+        const json = await fetchJson(url);
         text = JSON.stringify(json, null, 2);
         break;
       }
       case "csv": {
-        const downloadUrl = await getDownloadUrl("csv");
-        const csv = await fetchText(downloadUrl);
+        const { url } = await getDownloadResponse("csv");
+        const csv = await fetchText(url);
         text = csv;
         break;
       }
       case "markdown": {
-        const downloadUrl = await getDownloadUrl("json");
-        const json = await fetchJson(downloadUrl);
+        const { url } = await getDownloadResponse("json");
+        const json = await fetchJson(url);
         text = jsonToMarkdown(json);
         break;
       }
@@ -158,12 +160,10 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
           <DropdownMenuItem
             key={option.label}
             onSelect={async () => {
-              const downloadUrl = await getDownloadUrl(option.format);
-              const ext = option.format;
-              const rawName = (props.downloadFileName ?? "").trim();
-              const baseName =
-                Filenames.withoutExtension(rawName) || "download";
-              downloadByURL(downloadUrl, `${baseName}.${ext}`);
+              const { url, filename } = await getDownloadResponse(
+                option.format,
+              );
+              downloadByURL(url, filename);
             }}
           >
             <option.icon className="mo-dropdown-icon" />

package/src/components/data-table/schemas.ts

@@ -5,7 +5,7 @@ import { rpc } from "@/plugins/core/rpc";
 
 export type DownloadAsArgs = (req: {
   format: "csv" | "json" | "parquet";
-}) => Promise<string>;
+}) => Promise<{ url: string; filename: string }>;
 
 export const DownloadAsSchema = rpc
   .input(
@@ -13,4 +13,9 @@ export const DownloadAsSchema = rpc
       format: z.enum(["csv", "json", "parquet"]),
     }),
   )
-  .output(z.string());
+  .output(
+    z.object({
+      url: z.string(),
+      filename: z.string(),
+    }),
+  );

package/src/plugins/impl/DataTablePlugin.tsx

@@ -200,7 +200,6 @@ interface Data<T> {
   hasStableRowId: boolean;
   lazy: boolean;
   cellHoverTexts?: Record<string, Record<string, string | null>> | null;
-  downloadFileName?: string;
 }
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -286,7 +285,6 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       // If lazy, this will preload the first page of data
       // without user confirmation.
       preload: z.boolean().default(false),
-      downloadFileName: z.string().optional(),
     }),
   )
   .withFunctions<DataTableFunctions>({
@@ -822,7 +820,6 @@ const DataTableComponent = ({
   cellStyles,
   hoverTemplate,
   cellHoverTexts,
-  downloadFileName,
   toggleDisplayHeader,
   calculate_top_k_rows,
   preview_column,
@@ -1077,7 +1074,6 @@ const DataTableComponent = ({
             hoverTemplate={hoverTemplate}
             cellHoverTexts={cellHoverTexts}
             downloadAs={showDownload ? downloadAs : undefined}
-            downloadFileName={downloadFileName}
             enableSearch={enableSearch}
             searchQuery={searchQuery}
             onSearchQueryChange={setSearchQuery}

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

@@ -329,7 +329,6 @@ export const DataFrameComponent = memo(
           fieldTypes={field_types}
           rowHeaders={row_headers || Arrays.EMPTY}
           showDownload={showDownload}
-          downloadFileName={dataframeName}
           download_as={download_as}
           enableSearch={false}
           showFilters={false}

package/src/stories/dataframe.stories.tsx

@@ -41,7 +41,7 @@ export const DataFrame: StoryObj = {
         search={Functions.THROW}
         host={document.body}
         showDownload={false}
-        download_as={async () => ""}
+        download_as={async () => ({ url: "", filename: "" })}
         lazy={false}
       />
     );