@canvas-components/react-pivot-table 0.2.17 → 0.2.19

package/dist/index.js

@@ -1,7 +1,8 @@
 import { createContext, forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useContext, Fragment as Fragment$1 } from 'react';
-import { createEmptyPivotFieldLayout, createPivotFieldCatalog, resolvePivotDimensionKey, resolvePivotFieldLayoutOptions, PivotTable, loadPivotFieldLayout, DEFAULT_PIVOT_TABLE_DEBUG_OPTIONS, getValueByDataIndex, resolvePivotDimensionTitle, findPivotFieldArea, removePivotField, movePivotField, resolvePivotValueFieldTitle, savePivotFieldLayout, createPivotCellKey } from '@canvas-components/pivot-table';
-import { ReactResizablePanels, ReactFilterPanel, ReactPopup, ReactCheckbox, ReactModal, ReactInput, ReactSelect, ReactInputNumber } from '@canvas-components/react-components';
+import { createPivotFieldLayout, createPivotFieldCatalog, resolvePivotDimensionKey, resolvePivotFieldLayoutOptions, PivotTable, loadPivotScrollbarConfig, loadPivotFieldLayout, DEFAULT_PIVOT_TABLE_DEBUG_OPTIONS, getValueByDataIndex, resolvePivotDimensionTitle, findPivotFieldArea, removePivotField, movePivotField, savePivotScrollbarConfig, resolvePivotValueFieldTitle, savePivotFieldLayout, createPivotCellKey } from '@canvas-components/pivot-table';
+import { getSharedScrollbarSettings, subscribeSharedScrollbarSettings, ReactResizablePanels, ReactFilterPanel, ReactPopup, ReactCheckbox, ReactScrollbarSettingsDialog, ReactScrollbarPositionDialog, setSharedScrollbarSettings, ReactInput, ReactSelect, ReactButton, ReactInputNumber } from '@canvas-components/react-components';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { ReactListTableExportNameDialog, ReactListTable } from '@canvas-components/react-list-table';
 import { createPortal } from 'react-dom';
 import { CanvasChart } from '@canvas-components/chart';
 
@@ -30,89 +31,276 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/features/context-menu/pivot-context-menu.css
-styleInject(".react-pivot-table-menu-action {\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-pivot-table-menu-action:hover {\n  background: #f3f4f6 !important;\n}\n.react-pivot-table-menu-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.react-pivot-table-menu-action:hover .react-pivot-table-menu-chevron,\n.react-pivot-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
+styleInject(".react-pivot-table-menu-action {\n  font-size: inherit;\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-pivot-table-menu-action:hover {\n  background: #f3f4f6 !important;\n}\n.react-pivot-table-menu-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.react-pivot-table-menu-action:hover .react-pivot-table-menu-chevron,\n.react-pivot-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
 var CONTEXT_MENU_SURFACE_STYLE = {
   padding: 8,
   background: "#ffffff",
-  boxShadow: "0 8px 24px rgba(15, 23, 42, 0.16)"
+  boxShadow: "0 8px 24px rgba(15, 23, 42, 0.16)",
+  fontSize: 14
 };
+function ScrollbarModeMenu(props) {
+  const { request, onOpenSettings } = props;
+  return /* @__PURE__ */ 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__ */ jsx(ReactButton, { onClick: onOpenSettings, children: "\u914D\u7F6E\u6EDA\u52A8\u6761\u5C5E\u6027" })
+    }
+  );
+}
+function ScrollbarCacheMenu(props) {
+  const { request } = props;
+  return /* @__PURE__ */ 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] = useState(true);
+  const [scrollbarSettingsRequest, setScrollbarSettingsRequest] = useState(null);
+  const [scrollbarPositionRequest, setScrollbarPositionRequest] = useState(null);
   useEffect(() => {
     if (request) setMenuOpen(true);
   }, [request]);
-  if (!request) return null;
-  return /* @__PURE__ */ jsx(
-    ReactPopup,
+  const scrollbarDialog = scrollbarSettingsRequest ? /* @__PURE__ */ jsx(
+    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__ */ jsxs("div", { children: [
-        request.title ? /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", color: "#8f959e", fontSize: 12 }, children: request.title }) : null,
-        /* @__PURE__ */ 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__ */ jsx(
+    ReactScrollbarPositionDialog,
+    {
+      rowCount: scrollbarPositionRequest.scrollbarRowCount ?? 0,
+      columnCount: scrollbarPositionRequest.scrollbarColumnCount ?? 0,
+      onConfirm: (row, column) => scrollbarPositionRequest.onScrollToPosition?.(row, column),
+      onClose: () => setScrollbarPositionRequest(null)
+    }
+  ) : null;
+  if (!request)
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      scrollbarDialog,
+      scrollbarPositionDialog
+    ] });
+  const openScrollbarSettings = () => {
+    setScrollbarSettingsRequest(request);
+    request.onClose();
+  };
+  const exportAndClose = (action) => action ? () => {
+    setMenuOpen(false);
+    request.onClose();
+    action();
+  } : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    scrollbarDialog,
+    scrollbarPositionDialog,
+    /* @__PURE__ */ jsx(
+      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__ */ jsx("div", { children: request.target === "scrollbar" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            ScrollbarModeMenu,
+            {
+              request,
+              onOpenSettings: openScrollbarSettings
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: "\u6EDA\u52A8\u5230\u6307\u5B9A\u884C / \u5217",
+              onClick: () => {
+                setScrollbarPositionRequest(request);
+                request.onClose();
               }
-            ],
-            children: request.target !== "header" ? /* @__PURE__ */ jsx(CustomSelectionMenu, { request }) : null
-          }
-        ),
-        request.target === "header" ? /* @__PURE__ */ jsx(HeaderMenu, { request }) : null,
-        request.target === "summary" ? /* @__PURE__ */ jsx(
-          SummaryMenu,
-          {
-            request
-          },
-          `${request.indicatorKey}-${request.x}-${request.y}`
-        ) : null,
-        /* @__PURE__ */ jsx(DataFormatMenu, { request }),
-        /* @__PURE__ */ jsx(DensityMenu, { request }),
-        /* @__PURE__ */ jsx(
-          MenuSubmenu,
-          {
-            label: "\u5BFC\u51FA",
-            items: [
-              {
-                key: "export-csv",
-                label: "\u5BFC\u51FA CSV",
-                onClick: request.onExportCsv
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: "\u91CD\u7F6E\u6EDA\u52A8\u6761",
+              onClick: () => {
+                request.onResetScrollbar?.();
+                request.onClose();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollbarCacheMenu, { request })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          request.title ? /* @__PURE__ */ 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__ */ 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__ */ jsx(CustomSelectionMenu, { request }) : null
+            }
+          ),
+          request.target === "header" ? /* @__PURE__ */ jsx(HeaderMenu, { request }) : null,
+          request.target === "summary" ? /* @__PURE__ */ jsx(
+            SummaryMenu,
+            {
+              request
+            },
+            `${request.indicatorKey}-${request.x}-${request.y}`
+          ) : null,
+          /* @__PURE__ */ jsx(DataFormatMenu, { request }),
+          /* @__PURE__ */ jsx(DensityMenu, { request }),
+          /* @__PURE__ */ jsx(
+            ScrollbarModeMenu,
+            {
+              request,
+              onOpenSettings: openScrollbarSettings
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: "\u6EDA\u52A8\u5230\u6307\u5B9A\u884C / \u5217",
+              onClick: () => {
+                setScrollbarPositionRequest(request);
+                request.onClose();
               }
-            ]
-          }
-        ),
-        request.recordCount != null ? /* @__PURE__ */ jsxs("div", { style: { padding: "8px 10px", color: "#8f959e", fontSize: 12 }, children: [
-          "\u4E0B\u94BB\u8BB0\u5F55 ",
-          request.recordCount,
-          " \u6761"
-        ] }) : null
-      ] })
-    }
-  );
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollbarCacheMenu, { request }),
+          /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u91CD\u7F6E",
+              items: [
+                {
+                  key: "reset-scrollbar",
+                  label: "\u91CD\u7F6E\u6EDA\u52A8\u6761",
+                  onClick: () => {
+                    request.onResetScrollbar?.();
+                    request.onClose();
+                  }
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ 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__ */ 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;
@@ -144,7 +332,29 @@ function HeaderMenu(props) {
         ]
       }
     ) : null,
-    request.onOpenFilter ? /* @__PURE__ */ jsx(MenuAction, { label: "\u6253\u5F00\u7B5B\u9009\u9762\u677F", onClick: request.onOpenFilter }) : null,
+    request.onAutoFitCurrentColumn || request.onAutoFitAllColumns ? /* @__PURE__ */ jsx(
+      MenuSubmenu,
+      {
+        label: "\u81EA\u52A8\u8C03\u6574\u5217\u5BBD",
+        items: [
+          {
+            key: "auto-fit-current",
+            label: "\u5F53\u524D\u5217",
+            onClick: request.onAutoFitCurrentColumn
+          },
+          {
+            key: "auto-fit-all",
+            label: "\u5168\u90E8\u5217",
+            onClick: request.onAutoFitAllColumns
+          },
+          {
+            key: "auto-fit-fill-container",
+            label: "\u81EA\u52A8\u94FA\u6EE1\u5BB9\u5668",
+            onClick: request.onAutoFitFillContainer
+          }
+        ]
+      }
+    ) : null,
     hasExpand ? /* @__PURE__ */ jsx(
       MenuSubmenu,
       {
@@ -172,14 +382,35 @@ function HeaderMenu(props) {
 }
 function SummaryMenu(props) {
   const { request } = props;
+  const [title, setTitle] = useState(request.summaryTitle ?? "");
   const [precision, setPrecision] = useState(
     request.summaryPrecision ?? null
   );
+  const [roundingMode, setRoundingMode] = useState(
+    request.summaryRoundingMode ?? "round"
+  );
+  const [preserveTrailingZeros, setPreserveTrailingZeros] = useState(
+    request.summaryPreserveTrailingZeros ?? false
+  );
+  useEffect(() => {
+    setTitle(request.summaryTitle ?? "");
+    setPrecision(request.summaryPrecision ?? null);
+    setRoundingMode(request.summaryRoundingMode ?? "round");
+    setPreserveTrailingZeros(request.summaryPreserveTrailingZeros ?? false);
+  }, [
+    request.indicatorKey,
+    request.summaryTitle,
+    request.summaryPrecision,
+    request.summaryRoundingMode,
+    request.summaryPreserveTrailingZeros
+  ]);
   const aggregators = [
     ["sum", "\u6C42\u548C"],
     ["avg", "\u5E73\u5747\u503C"],
     ["count", "\u8BA1\u6570"],
     ["distinctCount", "\u53BB\u91CD\u8BA1\u6570"],
+    ["rowCount", "\u884C\u6570"],
+    ["mergedRowCount", "\u5408\u5E76\u884C\u6570"],
     ["min", "\u6700\u5C0F\u503C"],
     ["max", "\u6700\u5927\u503C"]
   ];
@@ -188,15 +419,62 @@ function SummaryMenu(props) {
     MenuSubmenu,
     {
       label: "\u6C47\u603B\u65B9\u5F0F",
-      items: aggregators.map(([value, label]) => ({
-        key: `summary-${value}`,
-        label,
-        selected: request.summaryAggregator === value,
-        onClick: () => {
-          request.onChangeSummaryAggregator?.(value);
-          request.onClose();
+      minWidth: 268,
+      header: request.onChangeSummaryTitle ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "56px 1fr",
+            gap: 8,
+            alignItems: "center",
+            padding: "2px 10px 10px",
+            marginBottom: 4,
+            borderBottom: "1px solid #e5e7eb"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u6807\u9898\uFF1A" }),
+            /* @__PURE__ */ jsx(
+              ReactInput,
+              {
+                value: title,
+                placeholder: "\u8BF7\u8F93\u5165\u6807\u9898",
+                onChange: (event) => {
+                  setTitle(event.target.value);
+                  request.onChangeSummaryTitle?.(event.target.value);
+                }
+              }
+            )
+          ]
         }
-      })),
+      ) : void 0,
+      items: [
+        ...aggregators.map(([value, label]) => ({
+          key: `summary-${value}`,
+          label,
+          selected: !request.summaryDisabled && request.summaryAggregator === value,
+          onClick: () => {
+            request.onChangeSummaryAggregator?.(value);
+            request.onClose();
+          }
+        })),
+        {
+          key: "summary-prefix",
+          label: "\u5C55\u793A\u6C47\u603B\u65B9\u5F0F\u524D\u7F00",
+          separatorBefore: true,
+          selected: request.summaryShowTypePrefix !== false,
+          disabled: request.summaryDisabled,
+          onClick: () => request.onChangeSummaryShowTypePrefix?.(
+            request.summaryShowTypePrefix === false
+          )
+        },
+        {
+          key: "summary-clear",
+          label: "\u53D6\u6D88\u6C47\u603B",
+          separatorBefore: true,
+          onClick: request.onClearSummary
+        }
+      ],
       footer: request.onChangeSummaryPrecision ? /* @__PURE__ */ jsxs(
         "div",
         {
@@ -210,7 +488,7 @@ function SummaryMenu(props) {
             borderTop: "1px solid #e5e7eb"
           },
           children: [
-            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
+            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
             /* @__PURE__ */ jsx(
               ReactInputNumber,
               {
@@ -219,10 +497,42 @@ function SummaryMenu(props) {
                 max: 20,
                 step: 1,
                 precision: 0,
-                placeholder: "\u81EA\u52A8",
+                placeholder: "\u9ED8\u8BA4",
+                onChange: setPrecision,
+                onCommit: (value) => request.onChangeSummaryPrecision?.(value ?? void 0)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u53D6\u6574\u65B9\u5F0F" }),
+            /* @__PURE__ */ jsx(
+              ReactSelect,
+              {
+                value: roundingMode,
+                options: [
+                  { label: "\u56DB\u820D\u4E94\u5165", value: "round" },
+                  { label: "\u5411\u4E0B\u53D6\u6574", value: "floor" },
+                  { label: "\u5411\u4E0A\u53D6\u6574", value: "ceil" },
+                  { label: "\u820D\u53BB\u4E0D\u5904\u7406", value: "truncate" }
+                ],
+                onChange: (value) => {
+                  const mode = value;
+                  setRoundingMode(mode);
+                  request.onChangeSummaryRoundingMode?.(mode);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u4FDD\u7559\u65E0\u6548\u96F6" }),
+            /* @__PURE__ */ jsx(
+              ReactSelect,
+              {
+                value: preserveTrailingZeros ? "true" : "false",
+                options: [
+                  { label: "\u4E0D\u4FDD\u7559", value: "false" },
+                  { label: "\u4FDD\u7559", value: "true" }
+                ],
                 onChange: (value) => {
-                  setPrecision(value);
-                  request.onChangeSummaryPrecision?.(value ?? void 0);
+                  const enabled = value === "true";
+                  setPreserveTrailingZeros(enabled);
+                  request.onChangeSummaryPreserveTrailingZeros?.(enabled);
                 }
               }
             )
@@ -419,7 +729,7 @@ function MenuAction(props) {
   );
 }
 function MenuSubmenu(props) {
-  const { label, items, footer, children, minWidth = 220 } = props;
+  const { label, items, footer, header, children, minWidth = 220 } = props;
   const menuItems = items.filter((item) => item.onClick || item.disabled);
   const reserveSelectionIcon = menuItems.some(
     (item) => typeof item.selected === "boolean"
@@ -427,7 +737,7 @@ function MenuSubmenu(props) {
   const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
   const closeTimerRef = useRef(null);
-  if (!menuItems.length && !footer && !children) return null;
+  if (!menuItems.length && !footer && !header && !children) return null;
   const clearCloseTimer = () => {
     if (closeTimerRef.current != null) {
       window.clearTimeout(closeTimerRef.current);
@@ -494,6 +804,7 @@ function MenuSubmenu(props) {
             onOpenChange: setOpen,
             surfaceStyle: { ...CONTEXT_MENU_SURFACE_STYLE, width: minWidth },
             children: /* @__PURE__ */ jsxs("div", { onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, children: [
+              header,
               menuItems.map((item) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
                 item.separatorBefore ? /* @__PURE__ */ jsx(MenuDivider, {}) : null,
                 /* @__PURE__ */ jsx(
@@ -691,54 +1002,15 @@ function DataFormatMenu(props) {
   );
 }
 function PivotExportNameDialog({
-  request
+  request,
+  onClose
 }) {
-  const extension = request.fileName.match(/\.(xlsx|csv)$/i)?.[0] ?? "";
-  const [fileName, setFileName] = useState(
-    extension ? request.fileName.slice(0, -extension.length) : request.fileName
-  );
-  const [invalid, setInvalid] = useState(false);
-  const confirm = () => {
-    if (!fileName.trim()) {
-      setInvalid(true);
-      return;
-    }
-    request.onConfirm(`${fileName.trim()}${extension}`);
-  };
-  return /* @__PURE__ */ jsxs(
-    ReactModal,
+  return /* @__PURE__ */ jsx(
+    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__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-          "\u6587\u4EF6\u540D\u79F0",
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-            /* @__PURE__ */ jsx(
-              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__ */ jsx("span", { "aria-label": "\u6587\u4EF6\u540E\u7F00", style: { flexShrink: 0 }, children: extension })
-          ] })
-        ] }),
-        invalid ? /* @__PURE__ */ jsx("div", { role: "alert", style: { color: "#ff4d4f", marginTop: 8 }, children: "\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0" }) : null
-      ]
+      request,
+      onClose,
+      renderTable: (props) => /* @__PURE__ */ jsx(ReactListTable, { ...props })
     }
   );
 }
@@ -1274,7 +1546,9 @@ var aggregatorOptions = [
   { label: "\u5E73\u5747\u503C", value: "avg" },
   { label: "\u6700\u5927\u503C", value: "max" },
   { label: "\u6700\u5C0F\u503C", value: "min" },
-  { label: "\u53BB\u91CD\u8BA1\u6570", value: "distinctCount" }
+  { label: "\u53BB\u91CD\u8BA1\u6570", value: "distinctCount" },
+  { label: "\u884C\u6570", value: "rowCount" },
+  { label: "\u5408\u5E76\u884C\u6570", value: "mergedRowCount" }
 ];
 var popupStyle = {
   padding: 0,
@@ -1729,7 +2003,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 = useMemo(
     () => resolveReactPivotTableDebugOptions(
@@ -1742,6 +2023,7 @@ function ReactPivotTableInner(props, ref) {
   const tableRef = 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] = useState(
     customizationOptions?.defaultOpen ?? false
   );
@@ -1756,13 +2038,35 @@ function ReactPivotTableInner(props, ref) {
   const chartIdRef = useRef(0);
   const layoutRevisionRef = useRef(0);
   const [internalLayout, setInternalLayout] = useState(
-    () => customizationOptions?.defaultLayout ?? createEmptyPivotFieldLayout()
+    () => pivotAreas ?? customizationOptions?.defaultLayout ?? createPivotFieldLayout({
+      filterDimensions: tableOptions.filterDimensions,
+      columns: tableOptions.columns,
+      rows: tableOptions.rows,
+      indicators: tableOptions.indicators
+    })
   );
   const [fieldOverrides, setFieldOverrides] = useState({});
   const [densityOverride, setDensityOverride] = useState(null);
+  const [scrollbarOverride, setScrollbarOverride] = useState(null);
+  const [sharedScrollbar, setSharedScrollbar] = useState(
+    getSharedScrollbarSettings
+  );
+  useEffect(
+    () => subscribeSharedScrollbarSettings(
+      () => setSharedScrollbar(getSharedScrollbarSettings())
+    ),
+    []
+  );
+  const [scrollbarCacheEnabled, setScrollbarCacheEnabled] = useState(true);
+  const scrollbarRevisionRef = useRef(0);
+  const scrollbarStorageKey = customizationOptions?.storageKey;
+  const effectiveScrollbar = sharedScrollbar.shared ? sharedScrollbar.value : scrollbarOverride ?? tableOptions.scrollbar;
   const [filterRequest, setFilterRequest] = useState(null);
   const [contextMenuRequest, setContextMenuRequest] = useState(null);
   const [exportNameRequest, setExportNameRequest] = useState(null);
+  const [exportLoadingText, setExportLoadingText] = useState(
+    null
+  );
   const [tooltipRequest, setTooltipRequest] = useState(null);
   const panelOpen = customizationOptions?.open ?? internalPanelOpen;
   const fieldLayout = customizationOptions?.layout ?? internalLayout;
@@ -1803,6 +2107,7 @@ function ReactPivotTableInner(props, ref) {
         title: override.title ?? field.title,
         indicator: {
           ...field.indicator,
+          ...override,
           title: override.title ?? field.indicator?.title,
           aggregator: override.aggregator ?? field.indicator?.aggregator,
           precision: "precision" in override ? override.precision : field.indicator?.precision,
@@ -1813,8 +2118,8 @@ function ReactPivotTableInner(props, ref) {
     [baseFields, fieldOverrides]
   );
   const customizedOptions = useMemo(
-    () => customizationEnabled ? resolvePivotFieldLayoutOptions(fields, fieldLayout) : null,
-    [customizationEnabled, fieldLayout, fields]
+    () => pivotLayoutEnabled ? resolvePivotFieldLayoutOptions(fields, fieldLayout) : null,
+    [pivotLayoutEnabled, fieldLayout, fields]
   );
   const overriddenIndicators = useMemo(
     () => tableOptions.indicators.map((indicator) => {
@@ -1822,6 +2127,7 @@ function ReactPivotTableInner(props, ref) {
       if (!override) return indicator;
       return {
         ...indicator,
+        ...override,
         title: override.title ?? indicator.title,
         aggregator: override.aggregator ?? indicator.aggregator,
         precision: "precision" in override ? override.precision : indicator.precision,
@@ -1837,10 +2143,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);
       },
@@ -1851,6 +2159,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 savePivotScrollbarConfig(scrollbarStorageKey, {
+                  enabled,
+                  scrollbar: enabled ? effectiveScrollbar : void 0
+                });
+            },
+            onChangeScrollbar: (value) => {
+              setScrollbarOverride(value);
+              if (getSharedScrollbarSettings().shared)
+                setSharedScrollbarSettings({ shared: true, value });
+              scrollbarRevisionRef.current += 1;
+              if (scrollbarStorageKey && scrollbarCacheEnabled)
+                void savePivotScrollbarConfig(scrollbarStorageKey, {
+                  enabled: true,
+                  scrollbar: value
+                });
+            },
+            onResetScrollbar: () => {
+              setScrollbarOverride(null);
+              if (getSharedScrollbarSettings().shared)
+                setSharedScrollbarSettings({ shared: true, value: {} });
+              scrollbarRevisionRef.current += 1;
+              if (scrollbarStorageKey && scrollbarCacheEnabled)
+                void savePivotScrollbarConfig(scrollbarStorageKey, {
+                  enabled: true
+                });
+            },
             onChangeDensity: (density) => {
               nativeChangeDensity?.(density);
               setDensityOverride(density);
@@ -1858,8 +2199,35 @@ function ReactPivotTableInner(props, ref) {
             onChangeDataFormat: fieldKey == null ? void 0 : (dataFormat) => updateField(fieldKey, { dataFormat })
           };
           if (request.target === "summary" && fieldKey != null) {
-            enhancedRequest.onChangeSummaryAggregator = (aggregator) => updateField(fieldKey, { aggregator });
-            enhancedRequest.onChangeSummaryPrecision = (precision) => updateField(fieldKey, { precision });
+            const changeSummary = (patch, menuPatch) => {
+              updateField(fieldKey, patch);
+              setContextMenuRequest(
+                (current) => current?.target === "summary" && current.indicatorKey === fieldKey ? { ...current, ...menuPatch } : current
+              );
+            };
+            enhancedRequest.onChangeSummaryAggregator = (aggregator) => changeSummary(
+              {
+                aggregator,
+                summaryAggregator: aggregator,
+                summaryDisabled: false
+              },
+              { summaryAggregator: aggregator, summaryDisabled: false }
+            );
+            enhancedRequest.onChangeSummaryPrecision = (precision) => changeSummary({ precision }, { summaryPrecision: precision });
+            enhancedRequest.onChangeSummaryTitle = (summaryTitle) => changeSummary({ summaryTitle }, { summaryTitle });
+            enhancedRequest.onChangeSummaryShowTypePrefix = (summaryShowTypePrefix) => changeSummary(
+              { summaryShowTypePrefix },
+              { summaryShowTypePrefix }
+            );
+            enhancedRequest.onChangeSummaryRoundingMode = (summaryRoundingMode) => changeSummary({ summaryRoundingMode }, { summaryRoundingMode });
+            enhancedRequest.onChangeSummaryPreserveTrailingZeros = (summaryPreserveTrailingZeros) => changeSummary(
+              { summaryPreserveTrailingZeros },
+              { summaryPreserveTrailingZeros }
+            );
+            enhancedRequest.onClearSummary = () => changeSummary(
+              { summaryDisabled: true },
+              { summaryDisabled: true }
+            );
           }
           setContextMenuRequest(enhancedRequest);
           return;
@@ -1879,10 +2247,10 @@ function ReactPivotTableInner(props, ref) {
   };
   const sharedFilterRequest = useMemo(() => {
     if (!filterRequest) return null;
-    const { axis, dimensionKey } = filterRequest;
+    const { axis, dimensionKey, columnPathKey } = filterRequest;
     return toSharedFilterRequest(filterRequest, (value) => {
       setFilterRequest(
-        (current) => current?.axis === axis && current.dimensionKey === dimensionKey ? { ...current, value } : current
+        (current) => current?.axis === axis && current.dimensionKey === dimensionKey && current.columnPathKey === columnPathKey ? { ...current, value } : current
       );
     });
   }, [filterRequest]);
@@ -1933,6 +2301,7 @@ function ReactPivotTableInner(props, ref) {
         title: patch.title ?? field.title,
         indicator: {
           ...field.indicator,
+          ...patch,
           title: patch.title ?? field.indicator?.title,
           aggregator: patch.aggregator ?? field.indicator?.aggregator,
           precision: "precision" in patch ? patch.precision : field.indicator?.precision,
@@ -1960,6 +2329,21 @@ function ReactPivotTableInner(props, ref) {
     table.updateOptions(options);
     refreshChartModel();
   }, [options]);
+  useEffect(() => {
+    if (!scrollbarStorageKey) return;
+    let active = true;
+    const revision = scrollbarRevisionRef.current;
+    void 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]);
   useEffect(() => {
     const storageKey = customizationOptions?.storageKey;
     if (!storageKey || customizationOptions?.layout !== void 0) return;
@@ -1984,6 +2368,7 @@ function ReactPivotTableInner(props, ref) {
   useImperativeHandle(
     ref,
     () => ({
+      autoFitColumnWidths: (target, fillContainer) => tableRef.current?.autoFitColumnWidths(target, fillContainer) ?? false,
       getPivotModel: () => tableRef.current?.getPivotModel() ?? null,
       getVisibleRowNodes: () => tableRef.current?.getVisibleRowNodes() ?? [],
       getVisibleColumnNodes: () => tableRef.current?.getVisibleColumnNodes() ?? [],
@@ -2005,6 +2390,15 @@ function ReactPivotTableInner(props, ref) {
       expandAll: (axis) => tableRef.current?.expandAll(axis) ?? 0,
       collapseAll: (axis) => tableRef.current?.collapseAll(axis) ?? 0,
       setDimensionFilter: (axis, dimensionKey, filter) => tableRef.current?.setDimensionFilter(axis, dimensionKey, filter) ?? null,
+      setIndicatorFilter: (indicatorKey, columnPathKey, filter) => tableRef.current?.setIndicatorFilter(
+        indicatorKey,
+        columnPathKey,
+        filter
+      ) ?? null,
+      getIndicatorFilterOptions: (indicatorKey, columnPathKey) => tableRef.current?.getIndicatorFilterOptions(
+        indicatorKey,
+        columnPathKey
+      ) ?? [],
       getDimensionFilterOptions: (axis, dimensionKey) => tableRef.current?.getDimensionFilterOptions(axis, dimensionKey) ?? [],
       resetFilters: () => tableRef.current?.resetFilters() ?? null,
       setDimensionSort: (axis, dimensionKey, direction) => tableRef.current?.setDimensionSort(axis, dimensionKey, direction) ?? [],
@@ -2022,11 +2416,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__ */ 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__ */ jsx(
             PivotTitlebar,
             {
@@ -2119,7 +2529,13 @@ function ReactPivotTableInner(props, ref) {
     ),
     /* @__PURE__ */ jsx(ReactFilterPanel, { request: sharedFilterRequest }),
     /* @__PURE__ */ jsx(PivotContextMenu, { request: contextMenuRequest }),
-    exportNameRequest ? /* @__PURE__ */ jsx(PivotExportNameDialog, { request: exportNameRequest }) : null,
+    exportNameRequest ? /* @__PURE__ */ jsx(
+      PivotExportNameDialog,
+      {
+        request: exportNameRequest,
+        onClose: () => setExportNameRequest(null)
+      }
+    ) : null,
     /* @__PURE__ */ jsx(PivotTooltip, { request: tooltipRequest })
   ] });
 }