@canvas-components/react-pivot-table 0.2.18 → 0.2.20

package/README.md

@@ -128,6 +128,12 @@ import {
 - 获取和恢复版本化状态快照
 - 获取调试快照
 
+## XLSX 导出弹窗
+
+右键导出 XLSX 使用与 `ReactListTable` 相同的导出弹窗和配置表，支持修改文件名（后缀固定）、勾选列、拖拽调整列顺序、数据升降序排序，以及选择是否导出汇总行。汇总支持方式、前缀、小数位数、取整方式和保留无效零；默认带入原表配置，不修改原表。
+
+通过 `exportOptions.fileName` 指定默认名称，`exportOptions.promptFileName: false` 跳过弹窗。弹窗关闭后销毁配置表，配置表不提供右键菜单。原生 `ref.exportXlsx()` 仍是返回字节的接口，不触发弹窗。
+
 ## 推荐场景
 
 - React 数据分析后台

package/dist/index.cjs

@@ -4,6 +4,7 @@ var react = require('react');
 var pivotTable = require('@canvas-components/pivot-table');
 var reactComponents = require('@canvas-components/react-components');
 var jsxRuntime = require('react/jsx-runtime');
+var reactListTable = require('@canvas-components/react-list-table');
 var reactDom = require('react-dom');
 var chart = require('@canvas-components/chart');
 
@@ -39,83 +40,269 @@ var CONTEXT_MENU_SURFACE_STYLE = {
   boxShadow: "0 8px 24px rgba(15, 23, 42, 0.16)",
   fontSize: 14
 };
+function ScrollbarModeMenu(props) {
+  const { request, onOpenSettings } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenuSubmenu,
+    {
+      label: "\u6EDA\u52A8\u6761\u6A21\u5F0F",
+      items: [
+        ["scrollbar", "\u6EDA\u52A8\u6761"],
+        ["button", "\u6309\u94AE"]
+      ].map(([mode, label]) => ({
+        key: `scrollbar-mode-${mode}`,
+        label,
+        selected: (request.scrollbar?.mode ?? "scrollbar") === mode,
+        onClick: () => {
+          request.onChangeScrollbar?.({
+            ...request.scrollbar,
+            mode,
+            horizontal: request.scrollbar?.horizontal === false ? false : { ...request.scrollbar?.horizontal, mode },
+            vertical: request.scrollbar?.vertical === false ? false : { ...request.scrollbar?.vertical, mode }
+          });
+          request.onClose();
+        }
+      })),
+      footer: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactButton, { onClick: onOpenSettings, children: "\u914D\u7F6E\u6EDA\u52A8\u6761\u5C5E\u6027" })
+    }
+  );
+}
+function ScrollbarCacheMenu(props) {
+  const { request } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenuSubmenu,
+    {
+      label: "\u7F13\u5B58\u5230\u672C\u5730",
+      items: [
+        {
+          key: "cache-scrollbar",
+          label: "\u6EDA\u52A8\u6761",
+          selected: request.scrollbarCacheAvailable === true && request.cacheScrollbar !== false,
+          disabled: request.scrollbarCacheAvailable !== true,
+          onClick: () => request.onChangeCacheScrollbar?.(request.cacheScrollbar === false)
+        }
+      ]
+    }
+  );
+}
 function PivotContextMenu(props) {
   const { request } = props;
   const [menuOpen, setMenuOpen] = react.useState(true);
+  const [scrollbarSettingsRequest, setScrollbarSettingsRequest] = react.useState(null);
+  const [scrollbarPositionRequest, setScrollbarPositionRequest] = react.useState(null);
   react.useEffect(() => {
     if (request) setMenuOpen(true);
   }, [request]);
-  if (!request) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactComponents.ReactPopup,
+  const scrollbarDialog = scrollbarSettingsRequest ? /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.ReactScrollbarSettingsDialog,
     {
-      open: menuOpen,
-      anchorRect: { x: request.x, y: request.y, width: 0, height: 0 },
-      offset: 4,
-      matchAnchorWidth: false,
-      minWidth: 260,
-      onOpenChange: (open) => {
-        setMenuOpen(open);
-        if (!open) request.onClose();
+      value: scrollbarSettingsRequest.scrollbar,
+      onConfirm: (value) => {
+        scrollbarSettingsRequest.onChangeScrollbar?.({
+          ...scrollbarSettingsRequest.scrollbar,
+          ...value
+        });
+        setScrollbarSettingsRequest(null);
       },
-      surfaceStyle: { ...CONTEXT_MENU_SURFACE_STYLE, width: 260 },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        request.title ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "6px 10px", color: "#8f959e", fontSize: 12 }, children: request.title }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MenuSubmenu,
-          {
-            label: "\u590D\u5236",
-            items: [
-              {
-                key: "copy-cell",
-                label: request.target === "header" ? "\u590D\u5236\u8868\u5934" : "\u590D\u5236\u5355\u5143\u683C",
-                onClick: request.onCopy
-              },
-              {
-                key: "copy-selection",
-                label: "\u590D\u5236\u9009\u533A",
-                onClick: request.target === "header" ? void 0 : request.onCopySelection
+      onClose: () => setScrollbarSettingsRequest(null)
+    }
+  ) : null;
+  const scrollbarPositionDialog = scrollbarPositionRequest ? /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.ReactScrollbarPositionDialog,
+    {
+      rowCount: scrollbarPositionRequest.scrollbarRowCount ?? 0,
+      columnCount: scrollbarPositionRequest.scrollbarColumnCount ?? 0,
+      onConfirm: (row, column) => scrollbarPositionRequest.onScrollToPosition?.(row, column),
+      onClose: () => setScrollbarPositionRequest(null)
+    }
+  ) : null;
+  if (!request)
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      scrollbarDialog,
+      scrollbarPositionDialog
+    ] });
+  const openScrollbarSettings = () => {
+    setScrollbarSettingsRequest(request);
+    request.onClose();
+  };
+  const exportAndClose = (action) => action ? () => {
+    setMenuOpen(false);
+    request.onClose();
+    action();
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    scrollbarDialog,
+    scrollbarPositionDialog,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.ReactPopup,
+      {
+        open: menuOpen,
+        anchorRect: { x: request.x, y: request.y, width: 0, height: 0 },
+        offset: 4,
+        matchAnchorWidth: false,
+        minWidth: 260,
+        onOpenChange: (open) => {
+          setMenuOpen(open);
+          if (!open) request.onClose();
+        },
+        surfaceStyle: { ...CONTEXT_MENU_SURFACE_STYLE, width: 260 },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: request.target === "scrollbar" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ScrollbarModeMenu,
+            {
+              request,
+              onOpenSettings: openScrollbarSettings
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuAction,
+            {
+              label: "\u6EDA\u52A8\u5230\u6307\u5B9A\u884C / \u5217",
+              onClick: () => {
+                setScrollbarPositionRequest(request);
+                request.onClose();
               }
-            ],
-            children: request.target !== "header" ? /* @__PURE__ */ jsxRuntime.jsx(CustomSelectionMenu, { request }) : null
-          }
-        ),
-        request.target === "header" ? /* @__PURE__ */ jsxRuntime.jsx(HeaderMenu, { request }) : null,
-        request.target === "summary" ? /* @__PURE__ */ jsxRuntime.jsx(
-          SummaryMenu,
-          {
-            request
-          },
-          `${request.indicatorKey}-${request.x}-${request.y}`
-        ) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(DataFormatMenu, { request }),
-        /* @__PURE__ */ jsxRuntime.jsx(DensityMenu, { request }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MenuSubmenu,
-          {
-            label: "\u5BFC\u51FA",
-            items: [
-              {
-                key: "export-csv",
-                label: "\u5BFC\u51FA CSV",
-                onClick: request.onExportCsv
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuAction,
+            {
+              label: "\u91CD\u7F6E\u6EDA\u52A8\u6761",
+              onClick: () => {
+                request.onResetScrollbar?.();
+                request.onClose();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollbarCacheMenu, { request })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          request.title ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                padding: "6px 10px",
+                color: "#8f959e",
+                fontSize: 12
               },
-              {
-                key: "export-xlsx",
-                label: "\u5BFC\u51FA XLSX",
-                onClick: request.onExportXlsx
+              children: request.title
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuSubmenu,
+            {
+              label: "\u590D\u5236",
+              items: [
+                {
+                  key: "copy-cell",
+                  label: request.target === "header" ? "\u590D\u5236\u8868\u5934" : "\u590D\u5236\u5355\u5143\u683C",
+                  onClick: request.onCopy
+                },
+                {
+                  key: "copy-selection",
+                  label: "\u590D\u5236\u9009\u533A",
+                  onClick: request.target === "header" ? void 0 : request.onCopySelection
+                },
+                ...["all", "selection", "viewport"].map(
+                  (scope) => ({
+                    key: `copy-image-${scope}`,
+                    label: `\u590D\u5236\u4E3A\u56FE\u7247 \xB7 ${{ all: "\u6240\u6709\u533A\u57DF", selection: "\u9009\u4E2D\u533A\u57DF", viewport: "\u89C6\u53E3\u533A\u57DF" }[scope]}`,
+                    onClick: scope === "selection" && !request.hasImageSelection ? void 0 : request.onCopyImage ? () => request.onCopyImage?.(scope) : void 0
+                  })
+                )
+              ],
+              children: request.target !== "header" ? /* @__PURE__ */ jsxRuntime.jsx(CustomSelectionMenu, { request }) : null
+            }
+          ),
+          request.target === "header" ? /* @__PURE__ */ jsxRuntime.jsx(HeaderMenu, { request }) : null,
+          request.target === "summary" ? /* @__PURE__ */ jsxRuntime.jsx(
+            SummaryMenu,
+            {
+              request
+            },
+            `${request.indicatorKey}-${request.x}-${request.y}`
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(DataFormatMenu, { request }),
+          /* @__PURE__ */ jsxRuntime.jsx(DensityMenu, { request }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ScrollbarModeMenu,
+            {
+              request,
+              onOpenSettings: openScrollbarSettings
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuAction,
+            {
+              label: "\u6EDA\u52A8\u5230\u6307\u5B9A\u884C / \u5217",
+              onClick: () => {
+                setScrollbarPositionRequest(request);
+                request.onClose();
               }
-            ]
-          }
-        ),
-        request.recordCount != null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "8px 10px", color: "#8f959e", fontSize: 12 }, children: [
-          "\u4E0B\u94BB\u8BB0\u5F55 ",
-          request.recordCount,
-          " \u6761"
-        ] }) : null
-      ] })
-    }
-  );
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollbarCacheMenu, { request }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuSubmenu,
+            {
+              label: "\u91CD\u7F6E",
+              items: [
+                {
+                  key: "reset-scrollbar",
+                  label: "\u91CD\u7F6E\u6EDA\u52A8\u6761",
+                  onClick: () => {
+                    request.onResetScrollbar?.();
+                    request.onClose();
+                  }
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuSubmenu,
+            {
+              label: "\u5BFC\u51FA",
+              items: [
+                {
+                  key: "export-csv",
+                  label: "\u5BFC\u51FA CSV",
+                  onClick: exportAndClose(request.onExportCsv)
+                },
+                {
+                  key: "export-xlsx",
+                  label: "\u5BFC\u51FA XLSX",
+                  onClick: exportAndClose(request.onExportXlsx)
+                },
+                ...["all", "selection", "viewport"].map(
+                  (scope) => ({
+                    key: `export-image-${scope}`,
+                    label: `\u5BFC\u51FA\u56FE\u7247 \xB7 ${{ all: "\u6240\u6709\u533A\u57DF", selection: "\u9009\u4E2D\u533A\u57DF", viewport: "\u89C6\u53E3\u533A\u57DF" }[scope]}`,
+                    onClick: exportAndClose(
+                      scope === "selection" && !request.hasImageSelection ? void 0 : request.onExportImage ? () => request.onExportImage?.(scope) : void 0
+                    )
+                  })
+                )
+              ]
+            }
+          ),
+          request.recordCount != null ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                padding: "8px 10px",
+                color: "#8f959e",
+                fontSize: 12
+              },
+              children: [
+                "\u4E0B\u94BB\u8BB0\u5F55 ",
+                request.recordCount,
+                " \u6761"
+              ]
+            }
+          ) : null
+        ] }) })
+      }
+    )
+  ] });
 }
 function HeaderMenu(props) {
   const { request } = props;
@@ -817,54 +1004,15 @@ function DataFormatMenu(props) {
   );
 }
 function PivotExportNameDialog({
-  request
+  request,
+  onClose
 }) {
-  const extension = request.fileName.match(/\.(xlsx|csv)$/i)?.[0] ?? "";
-  const [fileName, setFileName] = react.useState(
-    extension ? request.fileName.slice(0, -extension.length) : request.fileName
-  );
-  const [invalid, setInvalid] = react.useState(false);
-  const confirm = () => {
-    if (!fileName.trim()) {
-      setInvalid(true);
-      return;
-    }
-    request.onConfirm(`${fileName.trim()}${extension}`);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactComponents.ReactModal,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactListTable.ReactListTableExportNameDialog,
     {
-      open: true,
-      title: "\u5BFC\u51FA\u6587\u4EF6",
-      width: 420,
-      fullscreenable: false,
-      onCancel: request.onCancel,
-      onOk: confirm,
-      okText: "\u5BFC\u51FA",
-      cancelText: "\u53D6\u6D88",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-          "\u6587\u4EF6\u540D\u79F0",
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.ReactInput,
-              {
-                autoFocus: true,
-                value: fileName,
-                placeholder: "\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0",
-                onFocus: (event) => event.target.select(),
-                onChange: (event) => {
-                  setFileName(event.target.value);
-                  setInvalid(false);
-                },
-                onPressEnter: confirm
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": "\u6587\u4EF6\u540E\u7F00", style: { flexShrink: 0 }, children: extension })
-          ] })
-        ] }),
-        invalid ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", style: { color: "#ff4d4f", marginTop: 8 }, children: "\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0" }) : null
-      ]
+      request,
+      onClose,
+      renderTable: (props) => /* @__PURE__ */ jsxRuntime.jsx(reactListTable.ReactListTable, { ...props })
     }
   );
 }
@@ -1857,7 +2005,14 @@ function resolveReactPivotTableDebugOptions(debug, inheritedEnabled) {
   };
 }
 function ReactPivotTableInner(props, ref) {
-  const { className, style, customization, title, ...tableOptions } = props;
+  const {
+    className,
+    style,
+    customization,
+    pivotAreas,
+    title,
+    ...tableOptions
+  } = props;
   const inheritedDebugEnabled = useReactPivotTableDebugEnabled();
   const resolvedDebug = react.useMemo(
     () => resolveReactPivotTableDebugOptions(
@@ -1870,6 +2025,7 @@ function ReactPivotTableInner(props, ref) {
   const tableRef = react.useRef(null);
   const customizationOptions = customization && typeof customization === "object" ? customization : void 0;
   const customizationEnabled = customization === true || customizationOptions != null;
+  const pivotLayoutEnabled = customizationEnabled || pivotAreas != null;
   const [internalPanelOpen, setInternalPanelOpen] = react.useState(
     customizationOptions?.defaultOpen ?? false
   );
@@ -1884,13 +2040,35 @@ function ReactPivotTableInner(props, ref) {
   const chartIdRef = react.useRef(0);
   const layoutRevisionRef = react.useRef(0);
   const [internalLayout, setInternalLayout] = react.useState(
-    () => customizationOptions?.defaultLayout ?? pivotTable.createEmptyPivotFieldLayout()
+    () => pivotAreas ?? customizationOptions?.defaultLayout ?? pivotTable.createPivotFieldLayout({
+      filterDimensions: tableOptions.filterDimensions,
+      columns: tableOptions.columns,
+      rows: tableOptions.rows,
+      indicators: tableOptions.indicators
+    })
   );
   const [fieldOverrides, setFieldOverrides] = react.useState({});
   const [densityOverride, setDensityOverride] = react.useState(null);
+  const [scrollbarOverride, setScrollbarOverride] = react.useState(null);
+  const [sharedScrollbar, setSharedScrollbar] = react.useState(
+    reactComponents.getSharedScrollbarSettings
+  );
+  react.useEffect(
+    () => reactComponents.subscribeSharedScrollbarSettings(
+      () => setSharedScrollbar(reactComponents.getSharedScrollbarSettings())
+    ),
+    []
+  );
+  const [scrollbarCacheEnabled, setScrollbarCacheEnabled] = react.useState(true);
+  const scrollbarRevisionRef = react.useRef(0);
+  const scrollbarStorageKey = customizationOptions?.storageKey;
+  const effectiveScrollbar = sharedScrollbar.shared ? sharedScrollbar.value : scrollbarOverride ?? tableOptions.scrollbar;
   const [filterRequest, setFilterRequest] = react.useState(null);
   const [contextMenuRequest, setContextMenuRequest] = react.useState(null);
   const [exportNameRequest, setExportNameRequest] = react.useState(null);
+  const [exportLoadingText, setExportLoadingText] = react.useState(
+    null
+  );
   const [tooltipRequest, setTooltipRequest] = react.useState(null);
   const panelOpen = customizationOptions?.open ?? internalPanelOpen;
   const fieldLayout = customizationOptions?.layout ?? internalLayout;
@@ -1942,8 +2120,8 @@ function ReactPivotTableInner(props, ref) {
     [baseFields, fieldOverrides]
   );
   const customizedOptions = react.useMemo(
-    () => customizationEnabled ? pivotTable.resolvePivotFieldLayoutOptions(fields, fieldLayout) : null,
-    [customizationEnabled, fieldLayout, fields]
+    () => pivotLayoutEnabled ? pivotTable.resolvePivotFieldLayoutOptions(fields, fieldLayout) : null,
+    [pivotLayoutEnabled, fieldLayout, fields]
   );
   const overriddenIndicators = react.useMemo(
     () => tableOptions.indicators.map((indicator) => {
@@ -1967,10 +2145,12 @@ function ReactPivotTableInner(props, ref) {
   const options = {
     ...tableOptions,
     ...customizedOptions,
+    scrollbar: effectiveScrollbar,
     debug: resolvedDebug,
     rowHeight: densityOverride == null ? tableOptions.rowHeight : resolveDensityRowHeight(densityOverride),
     indicators: customizedOptions?.indicators ?? overriddenIndicators,
     ui: {
+      onLoadingRequest: (request) => setExportLoadingText(request ? request.text ?? "\u6B63\u5728\u5BFC\u51FA\u2026" : null),
       onExportNameRequest: (request) => {
         setExportNameRequest(request);
       },
@@ -1981,6 +2161,39 @@ function ReactPivotTableInner(props, ref) {
           const fieldKey = request.indicatorKey;
           const enhancedRequest = {
             ...request,
+            scrollbar: effectiveScrollbar,
+            cacheScrollbar: scrollbarCacheEnabled,
+            scrollbarCacheAvailable: Boolean(scrollbarStorageKey),
+            onChangeCacheScrollbar: (enabled) => {
+              setScrollbarCacheEnabled(enabled);
+              scrollbarRevisionRef.current += 1;
+              if (scrollbarStorageKey)
+                void pivotTable.savePivotScrollbarConfig(scrollbarStorageKey, {
+                  enabled,
+                  scrollbar: enabled ? effectiveScrollbar : void 0
+                });
+            },
+            onChangeScrollbar: (value) => {
+              setScrollbarOverride(value);
+              if (reactComponents.getSharedScrollbarSettings().shared)
+                reactComponents.setSharedScrollbarSettings({ shared: true, value });
+              scrollbarRevisionRef.current += 1;
+              if (scrollbarStorageKey && scrollbarCacheEnabled)
+                void pivotTable.savePivotScrollbarConfig(scrollbarStorageKey, {
+                  enabled: true,
+                  scrollbar: value
+                });
+            },
+            onResetScrollbar: () => {
+              setScrollbarOverride(null);
+              if (reactComponents.getSharedScrollbarSettings().shared)
+                reactComponents.setSharedScrollbarSettings({ shared: true, value: {} });
+              scrollbarRevisionRef.current += 1;
+              if (scrollbarStorageKey && scrollbarCacheEnabled)
+                void pivotTable.savePivotScrollbarConfig(scrollbarStorageKey, {
+                  enabled: true
+                });
+            },
             onChangeDensity: (density) => {
               nativeChangeDensity?.(density);
               setDensityOverride(density);
@@ -2118,6 +2331,21 @@ function ReactPivotTableInner(props, ref) {
     table.updateOptions(options);
     refreshChartModel();
   }, [options]);
+  react.useEffect(() => {
+    if (!scrollbarStorageKey) return;
+    let active = true;
+    const revision = scrollbarRevisionRef.current;
+    void pivotTable.loadPivotScrollbarConfig(scrollbarStorageKey).then((stored) => {
+      if (!active || scrollbarRevisionRef.current !== revision || !stored)
+        return;
+      setScrollbarCacheEnabled(stored.enabled);
+      if (stored.enabled && stored.scrollbar)
+        setScrollbarOverride(stored.scrollbar);
+    });
+    return () => {
+      active = false;
+    };
+  }, [scrollbarStorageKey]);
   react.useEffect(() => {
     const storageKey = customizationOptions?.storageKey;
     if (!storageKey || customizationOptions?.layout !== void 0) return;
@@ -2190,11 +2418,27 @@ function ReactPivotTableInner(props, ref) {
       {
         className: `react-pivot-table${className ? ` ${className}` : ""}`,
         style: {
+          position: "relative",
           width: props.width ?? "100%",
           height: props.height ?? "100%",
           ...style
         },
         children: [
+          exportLoadingText ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "status",
+              style: {
+                position: "absolute",
+                inset: 0,
+                zIndex: 10,
+                display: "grid",
+                placeItems: "center",
+                background: "rgba(255,255,255,0.75)"
+              },
+              children: exportLoadingText
+            }
+          ) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             PivotTitlebar,
             {
@@ -2287,7 +2531,13 @@ function ReactPivotTableInner(props, ref) {
     ),
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactFilterPanel, { request: sharedFilterRequest }),
     /* @__PURE__ */ jsxRuntime.jsx(PivotContextMenu, { request: contextMenuRequest }),
-    exportNameRequest ? /* @__PURE__ */ jsxRuntime.jsx(PivotExportNameDialog, { request: exportNameRequest }) : null,
+    exportNameRequest ? /* @__PURE__ */ jsxRuntime.jsx(
+      PivotExportNameDialog,
+      {
+        request: exportNameRequest,
+        onClose: () => setExportNameRequest(null)
+      }
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsx(PivotTooltip, { request: tooltipRequest })
   ] });
 }