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

package/dist/{toDate-BEXAEQ0o.js → toDate-BWaG12Pv.js}

@@ -3,10 +3,10 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { l as createLucideIcon } from "./dist-eWNxvDQG.js";
-import { g as Logger } from "./button-CxEhg2E1.js";
+import { l as createLucideIcon } from "./dist-D2Rk1j4R.js";
+import { h as Logger } from "./button-qsiIHncQ.js";
 import { r as KnownQueryParams } from "./constants-CXiS0vdr.js";
-import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-5rRsavIK.js";
+import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-BIAKDAh6.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
     cx: "12",

package/dist/{tooltip-CYv8qy5F.js → tooltip-DGHTbHl5.js}

@@ -1,9 +1,9 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { a as Content, i as Arrow, o as Root2, r as Anchor, s as createPopperScope, t as Root } from "./dist-eWNxvDQG.js";
-import { m as useComposedRefs, y as cn } from "./button-CxEhg2E1.js";
-import { _t as createContextScope, at as useControllableState, ct as useId, ft as Primitive, ht as createSlottable, it as StyleNamespace, nt as withSmartCollisionBoundary, ot as Presence, st as Portal, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-BVnmMSzE.js";
+import { a as Content, i as Arrow, o as Root2, r as Anchor, s as createPopperScope, t as Root } from "./dist-D2Rk1j4R.js";
+import { p as useComposedRefs, v as cn } from "./button-qsiIHncQ.js";
+import { _t as createContextScope, at as useControllableState, ct as useId, ft as Primitive, ht as createSlottable, it as StyleNamespace, nt as withSmartCollisionBoundary, ot as Presence, st as Portal, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-B--d1_LV.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]), usePopperScope = createPopperScope(), PROVIDER_NAME = "TooltipProvider", DEFAULT_DELAY_DURATION = 700, TOOLTIP_OPEN = "tooltip.open", [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME), TooltipProvider$1 = (t) => {
   let { __scopeTooltip: k, delayDuration: A = DEFAULT_DELAY_DURATION, skipDelayDuration: j = 300, disableHoverableContent: M = false, children: N } = t, P = import_react.useRef(true), F = import_react.useRef(false), I = import_react.useRef(0);

package/dist/{types-B7Om6oxp.js → types-Dqw69fPc.js}

@@ -1,8 +1,8 @@
 import { s as __toESM, t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { l as createLucideIcon } from "./dist-eWNxvDQG.js";
-import { t as Button } from "./button-CxEhg2E1.js";
+import { l as createLucideIcon } from "./dist-D2Rk1j4R.js";
+import { t as Button } from "./button-qsiIHncQ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 import { n as Constants } from "./constants-CXiS0vdr.js";
 var Pencil = createLucideIcon("pencil", [["path", {

package/dist/{useAsyncData-b2IfqSIa.js → useAsyncData-Dqt2tV1E.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { w as useEvent_default } from "./useTheme-5rRsavIK.js";
+import { w as useEvent_default } from "./useTheme-BIAKDAh6.js";
 import { t as invariant } from "./invariant-CzjtdzpE.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDeepCompareMemoize-C7Ut95sA.js → useDeepCompareMemoize-D2PKDkrk.js}

@@ -1,11 +1,11 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { t as toDate } from "./toDate-BEXAEQ0o.js";
-import { a as cva, y as cn } from "./button-CxEhg2E1.js";
+import { t as toDate } from "./toDate-BWaG12Pv.js";
+import { a as cva, v as cn } from "./button-qsiIHncQ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { C as dequal } from "./useTheme-5rRsavIK.js";
-import { i as tableFromIPC } from "./loader-hvRcVSq5.js";
+import { C as dequal } from "./useTheme-BIAKDAh6.js";
+import { i as tableFromIPC } from "./loader-DrMJeyDu.js";
 function isDate(t) {
   return t instanceof Date || typeof t == "object" && Object.prototype.toString.call(t) === "[object Date]";
 }

package/dist/{useIframeCapabilities-DHGxPMu5.js → useIframeCapabilities-DlwLttZw.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { t as getIframeCapabilities } from "./capabilities-x7AvQTfX.js";
+import { t as getIframeCapabilities } from "./capabilities-BC3mzKnw.js";
 var import_compiler_runtime = require_compiler_runtime();
 require_react();
 function useIframeCapabilities() {

package/dist/{useLifecycle-Q7CzdfPd.js → useLifecycle-CJ_5Z4Mk.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { l as createLucideIcon } from "./dist-eWNxvDQG.js";
-import { a as cva, g as Logger, y as cn } from "./button-CxEhg2E1.js";
+import { l as createLucideIcon } from "./dist-D2Rk1j4R.js";
+import { a as cva, h as Logger, v as cn } from "./button-qsiIHncQ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { _ as useSetAtom, y as atom } from "./useTheme-5rRsavIK.js";
+import { _ as useSetAtom, y as atom } from "./useTheme-BIAKDAh6.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-5rRsavIK.js → useTheme-BIAKDAh6.js}

@@ -1,8 +1,8 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { g as Logger, s as OverridingHotkeyProvider, u as resolvePlatform } from "./button-CxEhg2E1.js";
-import { B as record, H as string, L as number, O as array, P as looseObject, R as object, W as union, k as boolean, w as _enum } from "./Combination-BVnmMSzE.js";
+import { h as Logger, l as resolvePlatform, s as OverridingHotkeyProvider } from "./button-qsiIHncQ.js";
+import { B as record, H as string, L as number, O as array, P as looseObject, R as object, W as union, k as boolean, w as _enum } from "./Combination-B--d1_LV.js";
 import { t as merge_default } from "./merge-Byt9w-nO.js";
 var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };

package/dist/{vega-component-B0Ik4707.js → vega-component-CTOT0vRO.js}

@@ -1,20 +1,20 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-BEXAEQ0o.js";
-import { d as Objects, g as Logger, h as Events, y as cn } from "./button-CxEhg2E1.js";
-import "./Combination-BVnmMSzE.js";
+import { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-BWaG12Pv.js";
+import { h as Logger, m as Events, u as Objects, v as cn } from "./button-qsiIHncQ.js";
+import "./Combination-B--d1_LV.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 import "./react-dom-BKwCWYPW.js";
-import { t as Tooltip } from "./tooltip-CYv8qy5F.js";
+import { t as Tooltip } from "./tooltip-DGHTbHl5.js";
 import { i as debounce_default } from "./constants-CXiS0vdr.js";
-import { n as useTheme, w as useEvent_default } from "./useTheme-5rRsavIK.js";
+import { n as useTheme, w as useEvent_default } from "./useTheme-BIAKDAh6.js";
 import { c as uniq } from "./arrays--2cd0hte.js";
-import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-C7Ut95sA.js";
-import { n as ErrorBanner } from "./error-banner-CW87Aylu.js";
+import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-D2PKDkrk.js";
+import { n as ErrorBanner } from "./error-banner-DkDzvax3.js";
 import { n as formats } from "./vega-loader.browser-hMqVC9bf.js";
-import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-hvRcVSq5.js";
-import { t as useAsyncData } from "./useAsyncData-b2IfqSIa.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-DrMJeyDu.js";
+import { t as useAsyncData } from "./useAsyncData-Dqt2tV1E.js";
 import { t as j } from "./react-vega-JMnqwKtN.js";
 import "./defaultLocale-DjFHq3Xk.js";
 import "./defaultLocale-B_A76Zpk.js";

package/package.json

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

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

@@ -2,17 +2,15 @@
 "use no memo";
 
 import type { RowSelectionState, Table } from "@tanstack/react-table";
-import {
-  ChartColumnStacked,
-  ChartSplineIcon,
-  PanelRightIcon,
-  SearchIcon,
-} from "lucide-react";
+import { ChartSplineIcon, PanelRightIcon, SearchIcon } from "lucide-react";
 import React from "react";
 import { useLocale } from "react-aria";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
-import type { PanelType } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
+import {
+  PANEL_TYPES,
+  type PanelType,
+} from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { Button } from "../ui/button";
 import { Tooltip } from "../ui/tooltip";
 import { toast } from "../ui/use-toast";
@@ -31,15 +29,13 @@ interface TableActionsProps<TData> {
   onRowSelectionChange?: (value: RowSelectionState) => void;
   table: Table<TData>;
   downloadAs?: DownloadActionProps["downloadAs"];
-  downloadFileName?: string;
   getRowIds?: GetRowIds;
   toggleDisplayHeader?: () => void;
   showChartBuilder?: boolean;
-  showColumnExplorer?: boolean;
-  showRowExplorer?: boolean;
+  showTableExplorer?: boolean;
   showPageSizeSelector?: boolean;
   togglePanel?: (panelType: PanelType) => void;
-  isPanelOpen?: (panelType: PanelType) => boolean;
+  isAnyPanelOpen?: boolean;
   tableLoading?: boolean;
 }
 
@@ -54,15 +50,13 @@ export const TableActions = <TData,>({
   onRowSelectionChange,
   table,
   downloadAs,
-  downloadFileName,
   getRowIds,
   toggleDisplayHeader,
   showChartBuilder,
-  showColumnExplorer,
-  showRowExplorer,
+  showTableExplorer,
   showPageSizeSelector,
   togglePanel,
-  isPanelOpen,
+  isAnyPanelOpen,
   tableLoading,
 }: TableActionsProps<TData>) => {
   const { locale } = useLocale();
@@ -136,43 +130,22 @@ export const TableActions = <TData,>({
           </Button>
         </Tooltip>
       )}
-      {togglePanel && isPanelOpen !== undefined && (
-        <>
-          {showRowExplorer && (
-            <Tooltip content="Toggle row viewer">
-              <Button
-                variant="text"
-                size="xs"
-                onClick={() => togglePanel("row-viewer")}
-                className="print:hidden"
-              >
-                <PanelRightIcon
-                  className={cn(
-                    "w-4 h-4 text-muted-foreground",
-                    isPanelOpen("row-viewer") && "text-primary",
-                  )}
-                />
-              </Button>
-            </Tooltip>
-          )}
-          {showColumnExplorer && (
-            <Tooltip content="Toggle column explorer">
-              <Button
-                variant="text"
-                size="xs"
-                onClick={() => togglePanel("column-explorer")}
-                className="print:hidden"
-              >
-                <ChartColumnStacked
-                  className={cn(
-                    "w-4 h-4 text-muted-foreground",
-                    isPanelOpen("column-explorer") && "text-primary",
-                  )}
-                />
-              </Button>
-            </Tooltip>
-          )}
-        </>
+      {showTableExplorer && togglePanel && (
+        <Tooltip content="Toggle table explorer">
+          <Button
+            variant="text"
+            size="xs"
+            onClick={() => togglePanel(PANEL_TYPES.ROW_VIEWER)}
+            className="print:hidden"
+          >
+            <PanelRightIcon
+              className={cn(
+                "w-4 h-4 text-muted-foreground",
+                isAnyPanelOpen && "text-primary",
+              )}
+            />
+          </Button>
+        </Tooltip>
       )}
 
       {pagination ? (
@@ -190,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/column-explorer-panel/column-explorer.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { useState } from "react";
 import { useLocale } from "react-aria";
 import {
@@ -88,18 +89,21 @@ export const ColumnExplorerPanel = ({
         />
         <CommandList className="max-h-full">
           <CommandEmpty>No results.</CommandEmpty>
-          {filteredColumns?.map(([columnName, [dataType, externalType]]) => {
-            return (
-              <ColumnItem
-                // Tables may have the same column names, hence we use tableId to make it unique
-                key={`${tableId}-${columnName}`}
-                columnName={columnName}
-                dataType={dataType}
-                externalType={externalType}
-                previewColumn={previewColumn}
-              />
-            );
-          })}
+          {filteredColumns?.map(
+            ([columnName, [dataType, externalType]], index) => {
+              return (
+                <ColumnItem
+                  // Tables may have the same column names, hence we use tableId to make it unique
+                  key={`${tableId}-${columnName}`}
+                  columnName={columnName}
+                  dataType={dataType}
+                  externalType={externalType}
+                  previewColumn={previewColumn}
+                  defaultExpanded={index === 0}
+                />
+              );
+            },
+          )}
         </CommandList>
       </Command>
     </div>
@@ -111,13 +115,15 @@ const ColumnItem = ({
   dataType,
   externalType,
   previewColumn,
+  defaultExpanded = false,
 }: {
   columnName: string;
   dataType: DataType;
   externalType: string;
   previewColumn: PreviewColumn;
+  defaultExpanded?: boolean;
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   const columnText = (
     <span className={isExpanded ? "font-semibold" : ""}>{columnName}</span>
@@ -130,6 +136,11 @@ const ColumnItem = ({
         onSelect={() => setIsExpanded(!isExpanded)}
         className="flex flex-row items-center gap-1.5 group w-full cursor-pointer"
       >
+        {isExpanded ? (
+          <ChevronDownIcon className="w-3 h-3 shrink-0 text-muted-foreground" />
+        ) : (
+          <ChevronRightIcon className="w-3 h-3 shrink-0 text-muted-foreground" />
+        )}
         <ColumnName columnName={columnText} dataType={dataType} />
         <div className="ml-auto">
           <Tooltip content="Copy column name" delayDuration={400}>

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

@@ -24,7 +24,10 @@ import { useLocale } from "react-aria";
 import { Table } from "@/components/ui/table";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
-import type { PanelType } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
+import {
+  PANEL_TYPES,
+  type PanelType,
+} from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { CellHoverTemplateFeature } from "./cell-hover-template/feature";
 import { CellHoverTextFeature } from "./cell-hover-text/feature";
 import { CellSelectionFeature } from "./cell-selection/feature";
@@ -97,10 +100,10 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   // Others
   showChartBuilder?: boolean;
   showPageSizeSelector?: boolean;
-  showColumnExplorer?: boolean;
-  showRowExplorer?: boolean;
+  showTableExplorer?: boolean;
   togglePanel?: (panelType: PanelType) => void;
   isPanelOpen?: (panelType: PanelType) => boolean;
+  isAnyPanelOpen?: boolean;
 }
 
 const DataTableInternal = <TData,>({
@@ -124,7 +127,6 @@ const DataTableInternal = <TData,>({
   paginationState,
   setPaginationState,
   downloadAs,
-  downloadFileName,
   manualPagination = false,
   pagination = false,
   onRowSelectionChange,
@@ -142,10 +144,10 @@ const DataTableInternal = <TData,>({
   toggleDisplayHeader,
   showChartBuilder,
   showPageSizeSelector,
-  showColumnExplorer,
-  showRowExplorer,
+  showTableExplorer,
   togglePanel,
   isPanelOpen,
+  isAnyPanelOpen,
   viewedRowIdx,
   onViewedRowChange,
 }: DataTableProps<TData>) => {
@@ -272,7 +274,7 @@ const DataTableInternal = <TData,>({
     },
   });
 
-  const rowViewerPanelOpen = isPanelOpen?.("row-viewer") ?? false;
+  const rowViewerPanelOpen = isPanelOpen?.(PANEL_TYPES.ROW_VIEWER) ?? false;
   const virtualize = !pagination && data.length > MIN_ROWS_TO_VIRTUALIZE;
 
   const tableRef = useScrollContainerHeight({ maxHeight, virtualize });
@@ -319,15 +321,13 @@ const DataTableInternal = <TData,>({
         onRowSelectionChange={onRowSelectionChange}
         table={table}
         downloadAs={downloadAs}
-        downloadFileName={downloadFileName}
         getRowIds={getRowIds}
         toggleDisplayHeader={toggleDisplayHeader}
         showChartBuilder={showChartBuilder}
         showPageSizeSelector={showPageSizeSelector}
-        showColumnExplorer={showColumnExplorer}
-        showRowExplorer={showRowExplorer}
+        showTableExplorer={showTableExplorer}
         togglePanel={togglePanel}
-        isPanelOpen={isPanelOpen}
+        isAnyPanelOpen={isAnyPanelOpen}
         tableLoading={reloading}
       />
     </div>

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/hooks/use-panel-ownership.ts

@@ -13,7 +13,10 @@ import { Logger } from "@/utils/Logger";
 
 interface PanelOwnershipResult {
   isPanelOpen: (panelType: PanelType) => boolean;
-  togglePanel: (panelType: PanelType) => void;
+  isAnyPanelOpen: boolean;
+  togglePanel: (panelType?: PanelType) => void;
+  panelType: PanelType | null;
+  setPanelType: (panelType: PanelType) => void;
 }
 
 export function usePanelOwnership(
@@ -55,24 +58,31 @@ export function usePanelOwnership(
     setPanelOwner(panelId);
   }
 
-  function togglePanel(panelType: PanelType) {
-    if (isPanelOpen(panelType)) {
+  const isAnyPanelOpen = panelOwner === panelId && isContextAwarePanelOpen;
+
+  function togglePanel(requestedType?: PanelType) {
+    if (isAnyPanelOpen) {
       setPanelOwner(null);
       setContextAwarePanelOpen(false);
     } else {
       setPanelOwner(panelId);
-      // if cell-aware, we want to focus on this cell when toggled open
       if (isPanelCellAware && cellId) {
         focusCell({ cellId });
       }
       setContextAwarePanelOpen(true);
-      setPanelType(panelType);
+      // Only set type if explicitly requested and no previous type exists
+      if (requestedType && !panelType) {
+        setPanelType(requestedType);
+      }
     }
   }
 
   return {
     isPanelOpen,
+    isAnyPanelOpen,
     togglePanel,
+    panelType,
+    setPanelType,
   };
 }