@canvas-components/react-list-table 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,6 +1,8 @@
-import { forwardRef, useRef, useState, useMemo, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useState, useMemo, useImperativeHandle, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
 import { createPortal } from 'react-dom';
-import { ReactImagePreview, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactPopconfirm, ReactContentScaleProvider, ReactInputNumber, ReactCheckbox, ReactInput, ReactAutoComplete, ReactColorPicker, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange } from '@canvas-components/react-components';
+import { ReactImagePreview, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactInputNumber, ReactCheckbox, ReactAutoComplete, ReactColorPicker, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange } from '@canvas-components/react-components';
+import { formatDateTimeValue, isDateTimeFormatPattern } from '@canvas-components/utils/date';
+import { formatNumberValue, formatPercentValue, formatScientificValue, formatCustomNumberPattern } from '@canvas-components/utils/number';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { ListTable } from '@canvas-components/list-table';
 
@@ -35,213 +37,366 @@ var CONTEXT_MENU_SURFACE_STYLE = {
 };
 function ReactTableContextMenuView(props) {
   const { request } = props;
+  const [menuOpen, setMenuOpen] = useState(true);
+  const [moreFormatRequest, setMoreFormatRequest] = useState(null);
+  const [customSelectionRequest, setCustomSelectionRequest] = useState(null);
   if (!request) {
-    return null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      moreFormatRequest ? /* @__PURE__ */ jsx(
+        MoreFormatDialog,
+        {
+          request: moreFormatRequest,
+          onClose: () => setMoreFormatRequest(null)
+        }
+      ) : null,
+      customSelectionRequest ? /* @__PURE__ */ jsx(
+        CustomSelectionDialog,
+        {
+          request: customSelectionRequest,
+          onClose: () => {
+            setCustomSelectionRequest(null);
+            customSelectionRequest.onClose();
+          }
+        }
+      ) : null
+    ] });
   }
   const surfaceStyle = {
     ...CONTEXT_MENU_SURFACE_STYLE,
-    width: 260,
-    maxHeight: 420,
-    overflow: "auto"
+    width: 260
   };
-  return /* @__PURE__ */ jsx(
-    ReactPopup,
-    {
-      open: true,
-      anchorRect: { x: request.x, y: request.y, width: 0, height: 0 },
-      minWidth: 260,
-      onOpenChange: (open) => {
-        if (!open) {
-          request.onClose();
-        }
-      },
-      surfaceStyle,
-      children: /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(
-          MenuSubmenu,
-          {
-            label: "\u590D\u5236",
-            items: [
-              {
-                key: "copy-cell",
-                label: "\u590D\u5236\u5355\u5143\u683C",
-                onClick: request.onCopyCell
-              },
-              {
-                key: "copy-column",
-                label: "\u590D\u5236\u6574\u5217",
-                onClick: request.onCopyColumn
-              },
-              {
-                key: "copy-row-text",
-                label: "\u590D\u5236\u5F53\u524D\u884C\u6587\u672C",
-                onClick: request.onCopyRowText
-              },
-              {
-                key: "copy-row-json",
-                label: "\u590D\u5236\u5F53\u524D\u884C JSON",
-                onClick: request.onCopyRowJson
-              },
-              {
-                key: "copy-selection",
-                label: "\u590D\u5236\u9009\u533A",
-                onClick: request.onCopySelection
-              }
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(CustomSelectionMenu, { request }),
-        /* @__PURE__ */ jsx(
-          MenuSubmenu,
-          {
-            label: "\u5BFC\u51FA",
-            items: [
-              {
-                key: "export-txt",
-                label: "\u5BFC\u51FA TXT",
-                onClick: request.onExportTxt
-              },
-              {
-                key: "export-csv",
-                label: "\u5BFC\u51FA CSV",
-                onClick: request.onExportCsv
-              },
-              {
-                key: "export-xlsx",
-                label: "\u5BFC\u51FA XLSX",
-                onClick: request.onExportXlsx
-              },
-              {
-                key: "export-json",
-                label: "\u5BFC\u51FA JSON",
-                onClick: request.onExportJson
-              }
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MenuAction,
-          {
-            label: request.downloadContentLabel ?? "",
-            onClick: request.onDownloadContent
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MenuAction,
-          {
-            label: request.toggleExpandRowLabel ?? "",
-            onClick: request.onToggleExpandRow
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MenuAction,
-          {
-            label: "\u53D6\u6D88\u5168\u90E8\u6298\u53E0\u884C",
-            onClick: request.onExpandAllCollapsedRows
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MenuAction,
-          {
-            label: request.toggleColumnLabel ?? "",
-            onClick: request.onToggleCurrentColumn
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MenuAction,
-          {
-            label: "\u53D6\u6D88\u5168\u90E8\u6298\u53E0\u5217",
-            onClick: request.onExpandAllCollapsedColumns
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MenuAction,
-          {
-            label: request.summaryVisible ? "\u9690\u85CF\u6C47\u603B\u680F" : "\u663E\u793A\u6C47\u603B\u680F",
-            onClick: request.onToggleSummary
-          }
-        ),
-        /* @__PURE__ */ jsx(SummaryMenu, { request }),
-        /* @__PURE__ */ jsx(AlignmentMenu, { request }),
-        /* @__PURE__ */ jsx(DataFormatMenu, { request }),
-        /* @__PURE__ */ jsx(
-          MenuSubmenu,
-          {
-            label: "\u51BB\u7ED3",
-            items: [
-              {
-                key: "freeze-top",
-                label: "\u51BB\u7ED3\u5230\u9876\u90E8",
-                onClick: request.onFreezeRowTop
-              },
-              {
-                key: "freeze-bottom",
-                label: "\u51BB\u7ED3\u5230\u5E95\u90E8",
-                onClick: request.onFreezeRowBottom
-              },
-              {
-                key: "unfreeze",
-                label: "\u53D6\u6D88\u51BB\u7ED3",
-                onClick: request.onUnfreezeRow
-              }
-            ]
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ReactPopup,
+      {
+        open: menuOpen,
+        anchorRect: { x: request.x, y: request.y, width: 0, height: 0 },
+        minWidth: 260,
+        onOpenChange: (open) => {
+          setMenuOpen(open);
+          if (!open && !moreFormatRequest && !customSelectionRequest) {
+            request.onClose();
           }
-        ),
-        /* @__PURE__ */ jsx(
-          MenuSubmenu,
-          {
-            label: "\u91CD\u7F6E",
-            items: [
-              {
-                key: "reset-filter",
-                label: "\u91CD\u7F6E\u7B5B\u9009",
-                onClick: request.onResetFilter
-              },
-              {
-                key: "reset-sort",
-                label: "\u91CD\u7F6E\u6392\u5E8F",
-                onClick: request.onResetSort
-              },
-              {
-                key: "reset-header",
-                label: "\u91CD\u7F6E\u8868\u5934\u914D\u7F6E",
-                onClick: request.onResetHeader
+        },
+        surfaceStyle,
+        children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u590D\u5236",
+              items: [
+                {
+                  key: "copy-cell",
+                  label: "\u590D\u5236\u5355\u5143\u683C",
+                  onClick: request.onCopyCell
+                },
+                {
+                  key: "copy-column",
+                  label: "\u590D\u5236\u6574\u5217",
+                  onClick: request.onCopyColumn
+                },
+                {
+                  key: "copy-row-text",
+                  label: "\u590D\u5236\u5F53\u524D\u884C\u6587\u672C",
+                  onClick: request.onCopyRowText
+                },
+                {
+                  key: "copy-row-json",
+                  label: "\u590D\u5236\u5F53\u524D\u884C JSON",
+                  onClick: request.onCopyRowJson
+                },
+                {
+                  key: "copy-selection",
+                  label: "\u590D\u5236\u9009\u533A",
+                  onClick: request.onCopySelection
+                }
+              ],
+              children: /* @__PURE__ */ jsx(
+                CustomSelectionMenu,
+                {
+                  request,
+                  onOpen: () => {
+                    setCustomSelectionRequest(request);
+                    setMenuOpen(false);
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(MenuAction, { label: "\u67E5\u627E", onClick: request.onOpenSearch }),
+          /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u5BFC\u51FA",
+              items: [
+                {
+                  key: "export-txt",
+                  label: "\u5BFC\u51FA TXT",
+                  onClick: request.onExportTxt
+                },
+                {
+                  key: "export-csv",
+                  label: "\u5BFC\u51FA CSV",
+                  onClick: request.onExportCsv
+                },
+                {
+                  key: "export-xlsx",
+                  label: "\u5BFC\u51FA XLSX",
+                  onClick: request.onExportXlsx
+                },
+                {
+                  key: "export-json",
+                  label: "\u5BFC\u51FA JSON",
+                  onClick: request.onExportJson
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: request.downloadContentLabel ?? "",
+              onClick: request.onDownloadContent
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: request.toggleExpandRowLabel ?? "",
+              onClick: request.onToggleExpandRow
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: "\u53D6\u6D88\u5168\u90E8\u6298\u53E0\u884C",
+              onClick: request.onExpandAllCollapsedRows
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: request.toggleColumnLabel ?? "",
+              onClick: request.onToggleCurrentColumn
+            }
+          ),
+          /* @__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
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: request.groupingBarVisible ? "\u9690\u85CF\u5206\u7EC4\u680F" : "\u663E\u793A\u5206\u7EC4\u680F",
+              onClick: request.onToggleGroupingBar
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: "\u53D6\u6D88\u5168\u90E8\u6298\u53E0\u5217",
+              onClick: request.onExpandAllCollapsedColumns
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: request.summaryVisible ? "\u9690\u85CF\u6C47\u603B\u680F" : "\u663E\u793A\u6C47\u603B\u680F",
+              onClick: request.onToggleSummary
+            }
+          ),
+          /* @__PURE__ */ jsx(SummaryMenu, { request }),
+          /* @__PURE__ */ jsx(AlignmentMenu, { request }),
+          /* @__PURE__ */ jsx(
+            DataFormatMenu,
+            {
+              request,
+              onOpenMoreFormat: () => {
+                setMoreFormatRequest(request);
+                setMenuOpen(false);
               }
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          DensityMenu,
-          {
-            value: request.density ?? "middle",
-            onChange: request.onChangeDensity
-          }
-        ),
-        /* @__PURE__ */ jsx(ZoomMenu, { value: request.zoom ?? 1, onChange: request.onChangeZoom }),
-        request.columns?.length && request.onToggleColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(MenuDivider, {}),
+            }
+          ),
           /* @__PURE__ */ jsx(
-            ColumnVisibilityMenu,
+            MenuSubmenu,
             {
-              columns: request.columns,
-              onToggle: request.onToggleColumn
+              label: "\u51BB\u7ED3",
+              items: [
+                {
+                  key: "freeze-top",
+                  label: "\u51BB\u7ED3\u5230\u9876\u90E8",
+                  onClick: request.onFreezeRowTop
+                },
+                {
+                  key: "freeze-bottom",
+                  label: "\u51BB\u7ED3\u5230\u5E95\u90E8",
+                  onClick: request.onFreezeRowBottom
+                },
+                {
+                  key: "unfreeze",
+                  label: "\u53D6\u6D88\u51BB\u7ED3",
+                  onClick: request.onUnfreezeRow
+                }
+              ]
             }
-          )
-        ] }) : null
-      ] })
-    }
-  );
+          ),
+          /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u6392\u5E8F",
+              items: [
+                {
+                  key: "sort-ascend",
+                  label: "\u5347\u5E8F",
+                  onClick: request.onSortAscend
+                },
+                {
+                  key: "sort-descend",
+                  label: "\u964D\u5E8F",
+                  onClick: request.onSortDescend
+                },
+                {
+                  key: "sort-clear",
+                  label: "\u53D6\u6D88\u6392\u5E8F",
+                  onClick: request.onClearSort
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u56FA\u5B9A",
+              items: [
+                {
+                  key: "fix-left",
+                  label: "\u5DE6\u4FA7",
+                  onClick: request.onFixLeft
+                },
+                {
+                  key: "fix-right",
+                  label: "\u53F3\u4FA7",
+                  onClick: request.onFixRight
+                },
+                {
+                  key: "unfix",
+                  label: "\u53D6\u6D88\u56FA\u5B9A",
+                  onClick: request.onUnfix
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u91CD\u7F6E",
+              items: [
+                {
+                  key: "reset-filter",
+                  label: "\u91CD\u7F6E\u7B5B\u9009",
+                  onClick: request.onResetFilter
+                },
+                {
+                  key: "reset-sort",
+                  label: "\u91CD\u7F6E\u6392\u5E8F",
+                  onClick: request.onResetSort
+                },
+                {
+                  key: "reset-header",
+                  label: "\u91CD\u7F6E\u8868\u5934\u914D\u7F6E",
+                  onClick: request.onResetHeader
+                },
+                {
+                  key: "reset-grouping",
+                  label: "\u91CD\u7F6E\u5206\u7EC4",
+                  onClick: request.onResetGrouping
+                },
+                {
+                  key: "reset-summary",
+                  label: "\u91CD\u7F6E\u6C47\u603B",
+                  onClick: request.onResetSummary
+                },
+                {
+                  key: "reset-alignment",
+                  label: "\u91CD\u7F6E\u5BF9\u9F50",
+                  onClick: request.onResetAlignment
+                },
+                {
+                  key: "reset-data-format",
+                  label: "\u91CD\u7F6E\u683C\u5F0F",
+                  onClick: request.onResetDataFormat
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DensityMenu,
+            {
+              value: request.density ?? "middle",
+              onChange: request.onChangeDensity
+            }
+          ),
+          /* @__PURE__ */ jsx(ZoomMenu, { value: request.zoom ?? 1, onChange: request.onChangeZoom }),
+          request.columns?.length && request.onToggleColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(MenuDivider, {}),
+            /* @__PURE__ */ jsx(
+              ColumnVisibilityMenu,
+              {
+                columns: request.columns,
+                onToggle: request.onToggleColumn
+              }
+            )
+          ] }) : null
+        ] })
+      }
+    ),
+    moreFormatRequest ? /* @__PURE__ */ jsx(
+      MoreFormatDialog,
+      {
+        request: moreFormatRequest,
+        onClose: () => {
+          setMoreFormatRequest(null);
+          request.onClose();
+        }
+      }
+    ) : null,
+    customSelectionRequest ? /* @__PURE__ */ jsx(
+      CustomSelectionDialog,
+      {
+        request: customSelectionRequest,
+        onClose: () => {
+          setCustomSelectionRequest(null);
+          customSelectionRequest.onClose();
+        }
+      }
+    ) : null
+  ] });
 }
 function MenuAction(props) {
-  const { label, onClick, selected, reserveSelectionIcon } = props;
-  if (!onClick) {
+  const { label, preview, onClick, selected, disabled, reserveSelectionIcon } = props;
+  if (!onClick && !disabled) {
     return null;
   }
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      onClick,
+      onClick: disabled ? void 0 : onClick,
+      disabled,
       className: "react-list-table-menu-action",
       style: {
         display: "flex",
@@ -252,9 +407,9 @@ function MenuAction(props) {
         border: "none",
         borderRadius: 8,
         background: "transparent",
-        color: "#374151",
+        color: disabled ? "#9ca3af" : "#374151",
         textAlign: "left",
-        cursor: "pointer"
+        cursor: disabled ? "default" : "pointer"
       },
       children: [
         reserveSelectionIcon ? /* @__PURE__ */ jsx(
@@ -270,21 +425,28 @@ function MenuAction(props) {
             children: selected ? "\u2713" : ""
           }
         ) : null,
-        /* @__PURE__ */ jsx("span", { children: label })
+        /* @__PURE__ */ jsx("span", { style: { flex: 1, whiteSpace: "nowrap" }, children: label }),
+        preview ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: { marginLeft: 16, color: "#9ca3af", whiteSpace: "nowrap" },
+            children: preview
+          }
+        ) : null
       ]
     }
   );
 }
 function MenuSubmenu(props) {
-  const { label, items, footer } = props;
-  const menuItems = items.filter((item) => item.onClick);
+  const { label, items, footer, children, minWidth = 220 } = props;
+  const menuItems = items.filter((item) => item.onClick || item.disabled);
   const reserveSelectionIcon = menuItems.some(
     (item) => typeof item.selected === "boolean"
   );
   const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
   const closeTimerRef = useRef(null);
-  if (!menuItems.length && !footer) {
+  if (!menuItems.length && !footer && !children) {
     return null;
   }
   const clearCloseTimer = () => {
@@ -350,12 +512,11 @@ function MenuSubmenu(props) {
             anchorRef: triggerRef,
             placement: "rightTop",
             offset: 2,
-            minWidth: 220,
+            minWidth,
             onOpenChange: setOpen,
             surfaceStyle: {
               ...CONTEXT_MENU_SURFACE_STYLE,
-              maxHeight: 360,
-              overflow: "auto"
+              width: minWidth
             },
             children: /* @__PURE__ */ jsxs(
               "div",
@@ -367,16 +528,21 @@ function MenuSubmenu(props) {
                   scheduleClose();
                 },
                 children: [
-                  menuItems.map((item) => /* @__PURE__ */ jsx(
-                    MenuAction,
-                    {
-                      label: item.label,
-                      onClick: item.onClick,
-                      selected: item.selected,
-                      reserveSelectionIcon
-                    },
-                    item.key
-                  )),
+                  menuItems.map((item) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                    item.separatorBefore ? /* @__PURE__ */ jsx(MenuDivider, {}) : null,
+                    /* @__PURE__ */ jsx(
+                      MenuAction,
+                      {
+                        label: item.label,
+                        preview: item.preview,
+                        onClick: item.onClick,
+                        selected: item.selected,
+                        disabled: item.disabled,
+                        reserveSelectionIcon
+                      }
+                    )
+                  ] }, item.key)),
+                  children,
                   footer
                 ]
               }
@@ -833,8 +999,19 @@ function MenuDivider() {
 }
 function CustomSelectionMenu(props) {
   const { request } = props;
-  const triggerRef = useRef(null);
-  const [open, setOpen] = useState(false);
+  if (!request.onCopyCustomSelection || !request.customSelection) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    MenuAction,
+    {
+      label: "\u590D\u5236\u81EA\u5B9A\u4E49\u9009\u533A",
+      onClick: props.onOpen
+    }
+  );
+}
+function CustomSelectionDialog(props) {
+  const { request } = props;
   const initial = request.customSelection ?? {
     startRow: 1,
     startColumn: 1,
@@ -844,122 +1021,86 @@ function CustomSelectionMenu(props) {
     columnCount: 0
   };
   const [range, setRange] = useState(initial);
+  useEffect(() => {
+    setRange(initial);
+  }, [
+    initial.startRow,
+    initial.startColumn,
+    initial.endRow,
+    initial.endColumn
+  ]);
   if (!request.onCopyCustomSelection || !request.customSelection) {
-    return null;
-  }
-  const update = (key, value) => {
-    setRange((current) => ({
-      ...current,
-      [key]: value == null ? 1 : Math.floor(value)
-    }));
-  };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref: triggerRef,
-        type: "button",
-        className: "react-list-table-menu-action",
-        style: {
-          display: "flex",
-          alignItems: "center",
-          width: "100%",
-          height: 32,
-          padding: "0 10px",
-          border: "none",
-          borderRadius: 8,
-          background: "transparent",
-          color: "#374151",
-          textAlign: "left",
-          cursor: "pointer"
-        },
-        onClick: () => setOpen((value) => !value),
-        children: /* @__PURE__ */ jsx("span", { children: "\u590D\u5236\u81EA\u5B9A\u4E49\u9009\u533A" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ReactPopup,
-      {
-        open,
-        anchorRef: triggerRef,
-        placement: "rightTop",
-        offset: 2,
-        minWidth: 250,
-        onOpenChange: setOpen,
-        surfaceStyle: { ...CONTEXT_MENU_SURFACE_STYLE, width: 250 },
-        children: /* @__PURE__ */ jsxs("div", { style: { padding: 6 }, children: [
-          /* @__PURE__ */ jsx("div", { style: { color: "#6b7280", fontSize: 12, marginBottom: 6 }, children: "\u8F93\u5165\u8D77\u59CB\u4F4D\u7F6E\u548C\u7ED3\u675F\u4F4D\u7F6E" }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "grid",
-                gridTemplateColumns: "38px 1fr 1fr",
-                gap: 6,
-                marginBottom: 4,
-                color: "#6b7280",
-                fontSize: 12,
-                textAlign: "center"
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", {}),
-                /* @__PURE__ */ jsx("span", { children: "\u884C" }),
-                /* @__PURE__ */ jsx("span", { children: "\u5217" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            CustomSelectionRow,
-            {
-              label: "\u8D77\u59CB",
-              row: range.startRow,
-              column: range.startColumn,
-              onRowChange: (value) => update("startRow", value),
-              onColumnChange: (value) => update("startColumn", value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            CustomSelectionRow,
-            {
-              label: "\u7ED3\u675F",
-              row: range.endRow,
-              column: range.endColumn,
-              onRowChange: (value) => update("endRow", value),
-              onColumnChange: (value) => update("endColumn", value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "react-list-table-custom-selection-copy",
-              style: {
-                display: "block",
-                width: "100%",
-                height: 32,
-                marginTop: 6,
-                border: "none",
-                borderRadius: 8,
-                background: "#1677ff",
-                color: "#fff",
-                cursor: "pointer"
-              },
-              onClick: () => {
-                request.onCopyCustomSelection?.({
-                  startRow: Math.max(range.startRow, 1),
-                  startColumn: Math.max(range.startColumn, 1),
-                  endRow: Math.max(range.endRow, 1),
-                  endColumn: Math.max(range.endColumn, 1)
-                });
-                setOpen(false);
-              },
-              children: "\u590D\u5236"
-            }
-          )
-        ] })
-      }
-    )
-  ] });
+    return null;
+  }
+  const update = (key, value) => {
+    setRange((current) => ({
+      ...current,
+      [key]: value == null ? 1 : Math.floor(value)
+    }));
+  };
+  return /* @__PURE__ */ jsxs(
+    ReactModal,
+    {
+      open: true,
+      title: "\u590D\u5236\u81EA\u5B9A\u4E49\u9009\u533A",
+      width: 360,
+      centered: true,
+      fullscreenable: false,
+      onCancel: props.onClose,
+      onOk: () => {
+        request.onCopyCustomSelection?.({
+          startRow: Math.max(range.startRow, 1),
+          startColumn: Math.max(range.startColumn, 1),
+          endRow: Math.max(range.endRow, 1),
+          endColumn: Math.max(range.endColumn, 1)
+        });
+        props.onClose();
+      },
+      bodyStyle: { padding: "4px 20px 18px" },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { color: "#6b7280", fontSize: 12, marginBottom: 10 }, children: "\u8F93\u5165\u8D77\u59CB\u4F4D\u7F6E\u548C\u7ED3\u675F\u4F4D\u7F6E" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "38px 1fr 1fr",
+              gap: 8,
+              marginBottom: 6,
+              color: "#6b7280",
+              fontSize: 12,
+              textAlign: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", {}),
+              /* @__PURE__ */ jsx("span", { children: "\u884C" }),
+              /* @__PURE__ */ jsx("span", { children: "\u5217" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CustomSelectionRow,
+          {
+            label: "\u8D77\u59CB",
+            row: range.startRow,
+            column: range.startColumn,
+            onRowChange: (value) => update("startRow", value),
+            onColumnChange: (value) => update("startColumn", value)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CustomSelectionRow,
+          {
+            label: "\u7ED3\u675F",
+            row: range.endRow,
+            column: range.endColumn,
+            onRowChange: (value) => update("endRow", value),
+            onColumnChange: (value) => update("endColumn", value)
+          }
+        )
+      ]
+    }
+  );
 }
 function CustomSelectionRow(props) {
   return /* @__PURE__ */ jsxs(
@@ -1007,9 +1148,22 @@ function SummaryMenu(props) {
   const [precision, setPrecision] = useState(
     request.summaryPrecision ?? null
   );
+  const [roundingMode, setRoundingMode] = useState(
+    request.summaryRoundingMode ?? "round"
+  );
+  const [preserveTrailingZeros, setPreserveTrailingZeros] = useState(
+    request.summaryPreserveTrailingZeros ?? false
+  );
   useEffect(() => {
     setPrecision(request.summaryPrecision ?? null);
-  }, [request.summaryColumnKey, request.summaryPrecision]);
+    setRoundingMode(request.summaryRoundingMode ?? "round");
+    setPreserveTrailingZeros(request.summaryPreserveTrailingZeros ?? false);
+  }, [
+    request.summaryColumnKey,
+    request.summaryPrecision,
+    request.summaryRoundingMode,
+    request.summaryPreserveTrailingZeros
+  ]);
   if (!request.summaryColumnKey) {
     return null;
   }
@@ -1027,13 +1181,14 @@ function SummaryMenu(props) {
     MenuSubmenu,
     {
       label: "\u6C47\u603B\u65B9\u5F0F",
+      minWidth: 268,
       items: summaryTypes.map((item) => ({
         key: item.key,
         label: item.label,
         selected: request.summaryType === item.value,
         onClick: () => request.onChangeSummaryType?.(item.value)
       })),
-      footer: request.onChangeSummaryPrecision ? /* @__PURE__ */ jsxs(
+      footer: request.onChangeSummaryPrecision || request.onChangeSummaryRoundingMode || request.onChangeSummaryPreserveTrailingZeros ? /* @__PURE__ */ jsxs(
         "div",
         {
           style: {
@@ -1046,22 +1201,62 @@ function SummaryMenu(props) {
             borderTop: "1px solid #e5e7eb"
           },
           children: [
-            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
-            /* @__PURE__ */ jsx(
-              ReactInputNumber,
-              {
-                value: precision,
-                min: 0,
-                max: 20,
-                step: 1,
-                precision: 0,
-                placeholder: "\u9ED8\u8BA4",
-                onChange: setPrecision,
-                onCommit: (value) => {
-                  request.onChangeSummaryPrecision?.(value ?? void 0);
+            request.onChangeSummaryPrecision ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
+              /* @__PURE__ */ jsx(
+                ReactInputNumber,
+                {
+                  value: precision,
+                  min: 0,
+                  max: 20,
+                  step: 1,
+                  precision: 0,
+                  placeholder: "\u9ED8\u8BA4",
+                  onChange: setPrecision,
+                  onCommit: (value) => {
+                    request.onChangeSummaryPrecision?.(value ?? void 0);
+                  }
                 }
-              }
-            )
+              )
+            ] }) : null,
+            request.onChangeSummaryRoundingMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 13 }, 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);
+                  }
+                }
+              )
+            ] }) : null,
+            request.onChangeSummaryPreserveTrailingZeros ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 13 }, 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: (selectedValue) => {
+                    const value = selectedValue === "true";
+                    setPreserveTrailingZeros(value);
+                    request.onChangeSummaryPreserveTrailingZeros?.(value);
+                  }
+                }
+              )
+            ] }) : null
           ]
         }
       ) : void 0
@@ -1173,24 +1368,800 @@ function DataFormatMenu(props) {
   if (!request.onChangeDataFormat) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     MenuSubmenu,
     {
-      label: "\u6570\u636E\u683C\u5F0F",
+      label: "\u683C\u5F0F",
+      minWidth: 340,
       items: [
-        { key: "default", label: "\u9ED8\u8BA4", value: "default" },
-        { key: "number", label: "\u666E\u901A\u6570\u5B57", value: "number" },
-        { key: "thousands", label: "\u5343\u4F4D\u5206\u9694", value: "thousands" },
-        { key: "money", label: "\u91D1\u989D\uFF08\u4E24\u4F4D\u5C0F\u6570\uFF09", value: "money" }
+        { key: "default", label: "\u5E38\u89C4", value: "default" },
+        { key: "text", label: "\u7EAF\u6587\u672C", value: "text" },
+        {
+          key: "number",
+          label: "\u6570\u5B57",
+          preview: "1024",
+          value: "number",
+          separatorBefore: true
+        },
+        {
+          key: "thousands",
+          label: "\u6570\u5B57\uFF08\u5343\u5206\u4F4D\uFF09",
+          preview: "1,024",
+          value: "thousands"
+        },
+        {
+          key: "decimal",
+          label: "\u6570\u5B57\uFF08\u5343\u5206\u4F4D\uFF0C\u5C0F\u6570\u70B9\uFF09",
+          preview: "1,024.56",
+          value: "decimal"
+        },
+        {
+          key: "percent",
+          label: "\u767E\u5206\u6BD4",
+          preview: "10%",
+          value: "percent",
+          separatorBefore: true
+        },
+        {
+          key: "percentDecimal",
+          label: "\u767E\u5206\u6BD4\uFF08\u5C0F\u6570\u70B9\uFF09",
+          preview: "10.24%",
+          value: "percentDecimal"
+        },
+        {
+          key: "scientific",
+          label: "\u79D1\u5B66\u8BB0\u6570",
+          preview: "1.02E+003",
+          value: "scientific"
+        },
+        {
+          key: "numberToChineseUpper",
+          label: "\u6570\u5B57\u8F6C\u5927\u5199",
+          preview: "\u7396\u62FE\u58F9\u4E07\u634C\u4EDF",
+          value: "numberToChineseUpper"
+        },
+        {
+          key: "chineseUpperToNumber",
+          label: "\u5927\u5199\u8F6C\u6570\u5B57",
+          preview: "918000",
+          value: "chineseUpperToNumber"
+        },
+        {
+          key: "cny",
+          label: "\u4EBA\u6C11\u5E01",
+          preview: "\xA51,024",
+          value: "cny",
+          separatorBefore: true
+        },
+        {
+          key: "cnyDecimal",
+          label: "\u4EBA\u6C11\u5E01\uFF08\u5C0F\u6570\u70B9\uFF09",
+          preview: "\xA51,024.56",
+          value: "cnyDecimal"
+        },
+        {
+          key: "usd",
+          label: "\u7F8E\u5143",
+          preview: "$1,024",
+          value: "usd"
+        },
+        {
+          key: "usdDecimal",
+          label: "\u7F8E\u5143\uFF08\u5C0F\u6570\u70B9\uFF09",
+          preview: "$1,024.56",
+          value: "usdDecimal"
+        },
+        {
+          key: "dateSlash",
+          label: "\u65E5\u671F\uFF08\u659C\u6760\uFF09",
+          preview: "2017/08/01",
+          value: "dateSlash",
+          separatorBefore: true
+        },
+        {
+          key: "dateDash",
+          label: "\u65E5\u671F\uFF08\u77ED\u6A2A\u7EBF\uFF09",
+          preview: "2017-08-01",
+          value: "dateDash"
+        },
+        {
+          key: "dateFullCN",
+          label: "\u65E5\u671F\uFF08\u4E2D\u6587\uFF09",
+          preview: "2017\u5E748\u67081\u65E5",
+          value: "dateFullCN"
+        },
+        { key: "time", label: "\u65F6\u95F4", preview: "23:24:25", value: "time" },
+        {
+          key: "timeShort",
+          label: "\u65F6\u95F4\uFF08\u5206\uFF09",
+          preview: "23:24",
+          value: "timeShort"
+        },
+        {
+          key: "datetime",
+          label: "\u65E5\u671F\u65F6\u95F4",
+          preview: "2017/08/01 23:24:25",
+          value: "datetime"
+        },
+        {
+          key: "datetime12",
+          label: "\u65E5\u671F\u65F6\u95F4\uFF08\u4E0A\u4E0B\uFF09",
+          preview: "2017/08/01 \u4E0B\u534811:24",
+          value: "datetime12"
+        },
+        {
+          key: "more",
+          label: "\u66F4\u591A\u683C\u5F0F",
+          separatorBefore: true,
+          onClick: props.onOpenMoreFormat
+        }
       ].map((item) => ({
         key: `data-format-${item.key}`,
         label: item.label,
-        selected: request.dataFormat === item.value,
-        onClick: () => request.onChangeDataFormat?.(item.value)
+        preview: "preview" in item ? item.preview : void 0,
+        separatorBefore: "separatorBefore" in item ? item.separatorBefore : void 0,
+        disabled: "disabled" in item && item.disabled === true,
+        selected: "value" in item && request.dataFormat === item.value,
+        onClick: "onClick" in item ? item.onClick : "value" in item ? () => request.onChangeDataFormat?.(item.value) : void 0
       }))
     }
+  ) });
+}
+function MoreFormatDialog(props) {
+  const { request } = props;
+  const [category, setCategory] = useState(
+    () => resolveMoreFormatCategory(request.dataFormat)
+  );
+  const [customPattern, setCustomPattern] = useState(
+    () => typeof request.dataFormat === "object" && request.dataFormat.type === "custom" ? request.dataFormat.pattern ?? "#,##0.00" : "#,##0.00"
+  );
+  const [decimalPlaces, setDecimalPlaces] = useState(
+    () => typeof request.dataFormat === "object" ? request.dataFormat.decimalPlaces ?? 2 : 2
+  );
+  const [useGrouping, setUseGrouping] = useState(
+    () => typeof request.dataFormat === "object" ? request.dataFormat.useGrouping ?? false : false
+  );
+  const [currency, setCurrency] = useState(
+    () => typeof request.dataFormat === "object" ? request.dataFormat.symbol ?? "\xA5" : "\xA5"
+  );
+  const [datePattern, setDatePattern] = useState(
+    () => resolveInitialFormatPattern(request.dataFormat, "date")
+  );
+  const [timePattern, setTimePattern] = useState(
+    () => resolveInitialFormatPattern(request.dataFormat, "time")
+  );
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      open: true,
+      title: "\u8BBE\u7F6E\u5355\u5143\u683C\u6570\u5B57\u683C\u5F0F",
+      width: 480,
+      centered: true,
+      fullscreenable: false,
+      onCancel: props.onClose,
+      onOk: () => {
+        request.onChangeDataFormat?.(
+          resolveMoreFormatValue(
+            category,
+            customPattern,
+            decimalPlaces,
+            currency,
+            datePattern,
+            timePattern,
+            useGrouping
+          )
+        );
+        props.onClose();
+      },
+      bodyStyle: { padding: "0 20px 18px" },
+      children: /* @__PURE__ */ jsx(
+        MoreFormatDialogBody,
+        {
+          category,
+          customPattern,
+          decimalPlaces,
+          useGrouping,
+          currency,
+          datePattern,
+          timePattern,
+          onCategoryChange: setCategory,
+          onCustomPatternChange: setCustomPattern,
+          onDecimalPlacesChange: setDecimalPlaces,
+          onGroupingChange: setUseGrouping,
+          onCurrencyChange: setCurrency,
+          onDatePatternChange: setDatePattern,
+          onTimePatternChange: setTimePattern
+        }
+      )
+    }
+  );
+}
+var MORE_FORMAT_CATEGORIES = [
+  { key: "general", label: "\u5E38\u89C4" },
+  { key: "number", label: "\u6570\u503C" },
+  { key: "currency", label: "\u8D27\u5E01" },
+  { key: "date", label: "\u65E5\u671F" },
+  { key: "time", label: "\u65F6\u95F4" },
+  { key: "percent", label: "\u767E\u5206\u6BD4" },
+  { key: "scientific", label: "\u79D1\u5B66\u8BB0\u6570" },
+  { key: "text", label: "\u6587\u672C" },
+  { key: "custom", label: "\u81EA\u5B9A\u4E49" }
+];
+function MoreFormatDialogBody(props) {
+  const sample = resolveMoreFormatSample(
+    props.category,
+    props.customPattern,
+    props.decimalPlaces,
+    props.currency,
+    props.datePattern,
+    props.timePattern,
+    props.useGrouping
+  );
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 14 }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "120px 1fr",
+          gap: 18,
+          alignItems: "stretch",
+          height: 320
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsx("div", { style: moreFormatLabelStyle, children: "\u7C7B\u522B" }),
+            /* @__PURE__ */ jsx("div", { style: { ...moreFormatCategoryListStyle, flex: 1 }, children: MORE_FORMAT_CATEGORIES.map((item) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => props.onCategoryChange(item.key),
+                style: {
+                  ...moreFormatCategoryButtonStyle,
+                  ...props.category === item.key ? moreFormatCategorySelectedStyle : null
+                },
+                children: item.label
+              },
+              item.key
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: moreFormatLabelStyle, children: "\u793A\u4F8B" }),
+            /* @__PURE__ */ jsx("div", { style: moreFormatExampleStyle, children: sample }),
+            /* @__PURE__ */ jsx(MoreFormatOptions, { ...props })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: moreFormatDescriptionStyle, children: "\u5E38\u89C4\u5355\u5143\u683C\u683C\u5F0F\u4E0D\u5305\u542B\u4EFB\u4F55\u7279\u5B9A\u7684\u6570\u5B57\u683C\u5F0F" })
+  ] });
+}
+function MoreFormatOptions(props) {
+  if (props.category === "number" || props.category === "percent" || props.category === "scientific") {
+    return /* @__PURE__ */ jsxs("div", { style: moreFormatOptionsStyle, children: [
+      /* @__PURE__ */ jsx("span", { style: moreFormatLabelStyle, children: "\u5C0F\u6570\u4F4D\u6570" }),
+      /* @__PURE__ */ jsx(
+        ReactInputNumber,
+        {
+          value: props.decimalPlaces,
+          min: 0,
+          max: 20,
+          precision: 0,
+          onChange: (value) => props.onDecimalPlacesChange(value ?? 0),
+          style: { width: 96 }
+        }
+      ),
+      props.category === "number" ? /* @__PURE__ */ jsx(
+        ReactCheckbox,
+        {
+          checked: props.useGrouping,
+          onChange: (event) => props.onGroupingChange(event.target.checked),
+          children: "\u663E\u793A\u5343\u5206\u4F4D\u5206\u9694\u7B26\uFF08,\uFF09"
+        }
+      ) : null
+    ] });
+  }
+  if (props.category === "currency") {
+    return /* @__PURE__ */ jsxs("div", { style: moreFormatOptionsStyle, children: [
+      /* @__PURE__ */ jsx("span", { style: moreFormatLabelStyle, children: "\u5C0F\u6570\u4F4D\u6570" }),
+      /* @__PURE__ */ jsx(
+        ReactInputNumber,
+        {
+          value: props.decimalPlaces,
+          min: 0,
+          max: 20,
+          precision: 0,
+          onChange: (value) => props.onDecimalPlacesChange(value ?? 0),
+          style: { width: 96 }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: moreFormatLabelStyle, children: "\u8D27\u5E01\u7B26\u53F7" }),
+      /* @__PURE__ */ jsx(
+        ReactSelect,
+        {
+          value: props.currency,
+          options: [
+            { label: "\xA5", value: "\xA5" },
+            { label: "$", value: "$" }
+          ],
+          onChange: props.onCurrencyChange,
+          style: { width: 150 }
+        }
+      )
+    ] });
+  }
+  if (props.category === "date") {
+    return /* @__PURE__ */ jsx(
+      FormatChoiceList,
+      {
+        label: "\u7C7B\u578B",
+        value: props.datePattern,
+        options: DATE_FORMAT_OPTIONS,
+        onChange: props.onDatePatternChange,
+        allowInput: true,
+        inputLabel: "\u81EA\u5B9A\u4E49\u683C\u5F0F",
+        inputPlaceholder: "\u4F8B\u5982\uFF1AYYYY-MM-DD HH:mm:ss"
+      }
+    );
+  }
+  if (props.category === "time") {
+    return /* @__PURE__ */ jsx(
+      FormatChoiceList,
+      {
+        label: "\u7C7B\u578B",
+        value: props.timePattern,
+        options: TIME_FORMAT_OPTIONS,
+        onChange: props.onTimePatternChange
+      }
+    );
+  }
+  if (props.category === "custom") {
+    return /* @__PURE__ */ jsx(
+      FormatChoiceList,
+      {
+        label: "\u7C7B\u578B",
+        value: props.customPattern,
+        options: [
+          "@",
+          "G/\u901A\u7528\u683C\u5F0F",
+          '0,"\u4E07"',
+          '0.0,"\u4E07"',
+          '0.00,"\u4E07"',
+          '"**********"',
+          "0",
+          "0.0",
+          "0.00",
+          "0.000",
+          "#,##0",
+          "#,##0.0",
+          "#,##0.00",
+          "#,##0.000",
+          "#,##0;[\u7EA2\u8272]-#,##0",
+          "0%",
+          "0.0%",
+          "0.00%",
+          "\xA5#,##0",
+          "\xA5#,##0.00",
+          "$#,##0",
+          "$#,##0.00",
+          "0.00E+00",
+          "YYYY/M/D",
+          "YYYY/MM/DD",
+          "YYYY-MM-DD",
+          "HH:mm",
+          "HH:mm:ss",
+          "Ah:mm",
+          "Ah:mm:ss",
+          "YYYY/M/D HH:mm",
+          "YYYY-MM-DD HH:mm:ss"
+        ],
+        onChange: props.onCustomPatternChange,
+        allowInput: true
+      }
+    );
+  }
+  return null;
+}
+function FormatChoiceList(props) {
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 16 }, children: [
+    props.allowInput ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style: moreFormatLabelStyle, children: props.inputLabel ?? props.label }),
+      /* @__PURE__ */ jsx(
+        ReactInput,
+        {
+          value: props.value,
+          placeholder: props.inputPlaceholder,
+          onChange: (event) => props.onChange(event.target.value)
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...moreFormatLabelStyle,
+          marginTop: props.allowInput ? 14 : 0
+        },
+        children: props.label
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: moreFormatChoiceListStyle, children: props.options.map((option) => {
+      const value = typeof option === "string" ? option : option.value;
+      const label = typeof option === "string" ? option : option.label;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => props.onChange(value),
+          style: {
+            ...moreFormatChoiceStyle,
+            ...props.value === value ? moreFormatChoiceSelectedStyle : null
+          },
+          children: label
+        },
+        value
+      );
+    }) })
+  ] });
+}
+function resolveMoreFormatCategory(dataFormat) {
+  const type = typeof dataFormat === "object" ? dataFormat.type : dataFormat;
+  if (type === "custom") return "custom";
+  if (type === "percent" || type === "percentDecimal") return "percent";
+  if (type === "cny" || type === "cnyDecimal" || type === "usd" || type === "usdDecimal" || type === "money")
+    return "currency";
+  if (type === "dateSlash" || type === "dateDash" || type === "dateFullCN" || type === "dateYearMonthCN" || type === "dateMonthDayCN" || type === "dateSlashWeek" || type === "dateDashWeek" || type === "dateWeekdayCNFull" || type === "dateWeekdayCNShort" || type === "datetime" || type === "datetime12" || type === "datetime12Seconds")
+    return "date";
+  if (type === "time" || type === "timeShort" || type === "time12" || type === "time12Seconds" || type === "timeMillisecond" || type === "time12Millisecond" || type === "timeChineseHour" || type === "timeChineseSecond" || type === "time12ChineseHour" || type === "time12ChineseSecond")
+    return "time";
+  if (type === "scientific") return "scientific";
+  if (type === "text") return "text";
+  if (type === "number" || type === "thousands" || type === "decimal" || type === "numberToChineseUpper" || type === "chineseUpperToNumber")
+    return "number";
+  return "general";
+}
+var DATE_FORMAT_OPTIONS = [
+  { label: "2012/3/14", value: "YYYY/M/D", type: "dateSlash" },
+  { label: "2012/03/14", value: "YYYY/MM/DD", type: "dateSlash" },
+  { label: "2012-3-14", value: "YYYY-M-D", type: "dateDash" },
+  { label: "2012-03-14", value: "YYYY-MM-DD", type: "dateDash" },
+  { label: "2012.03.14", value: "YYYY.MM.DD", type: "dateSlash" },
+  { label: "14/03/2012", value: "DD/MM/YYYY", type: "dateSlash" },
+  { label: "03/14/2012", value: "MM/DD/YYYY", type: "dateSlash" },
+  { label: "12\u5E743\u670814\u65E5", value: "YY\u5E74M\u6708D\u65E5", type: "dateFullCN" },
+  { label: "2012\u5E743\u670814\u65E5", value: "YYYY\u5E74M\u6708D\u65E5", type: "dateFullCN" },
+  { label: "2012\u5E743\u6708", value: "YYYY\u5E74M\u6708", type: "dateYearMonthCN" },
+  { label: "3\u670814\u65E5", value: "M\u6708D\u65E5", type: "dateMonthDayCN" },
+  { label: "\u661F\u671F\u4E09", value: "dddd", type: "dateWeekdayCNFull" },
+  { label: "\u5468\u4E09", value: "ddd", type: "dateWeekdayCNShort" },
+  { label: "2012/3/14 \u661F\u671F\u4E09", value: "YYYY/M/D dddd", type: "dateSlashWeek" },
+  {
+    label: "2012-03-14 \u661F\u671F\u4E09",
+    value: "YYYY-MM-DD dddd",
+    type: "dateDashWeek"
+  },
+  { label: "2012/3/14 14:30", value: "YYYY/M/D HH:mm", type: "datetime" },
+  { label: "2012/3/14 14:30:55", value: "YYYY/M/D HH:mm:ss", type: "datetime" },
+  {
+    label: "2012-03-14 14:30:55",
+    value: "YYYY-MM-DD HH:mm:ss",
+    type: "datetime"
+  },
+  { label: "2012/3/14 \u4E0B\u53482:30", value: "YYYY/M/D Ah:mm", type: "datetime12" },
+  {
+    label: "2012/3/14 \u4E0B\u53482:30:55",
+    value: "YYYY/M/D Ah:mm:ss",
+    type: "datetime12Seconds"
+  }
+];
+var TIME_FORMAT_OPTIONS = [
+  { label: "14:30", value: "HH:mm", type: "timeShort" },
+  { label: "14:30:55", value: "HH:mm:ss", type: "time" },
+  { label: "14:30:55.123", value: "HH:mm:ss.SSS", type: "timeMillisecond" },
+  { label: "\u4E0B\u53482:30", value: "Ah:mm", type: "time12" },
+  { label: "\u4E0B\u53482:30:55", value: "Ah:mm:ss", type: "time12Seconds" },
+  {
+    label: "\u4E0B\u53482:30:55.123",
+    value: "Ah:mm:ss.SSS",
+    type: "time12Millisecond"
+  },
+  { label: "14\u65F630\u5206", value: "H\u65F6mm\u5206", type: "timeChineseHour" },
+  { label: "14\u65F630\u520655\u79D2", value: "H\u65F6mm\u5206ss\u79D2", type: "timeChineseSecond" },
+  { label: "\u4E0B\u53482\u65F630\u5206", value: "Ah\u65F6mm\u5206", type: "time12ChineseHour" },
+  {
+    label: "\u4E0B\u53482\u65F630\u520655\u79D2",
+    value: "Ah\u65F6mm\u5206ss\u79D2",
+    type: "time12ChineseSecond"
+  }
+];
+var DATE_TIME_FORMAT_SAMPLE = new Date(2012, 2, 14, 14, 30, 55, 123);
+function resolveInitialFormatPattern(dataFormat, kind) {
+  if (typeof dataFormat === "object" && dataFormat.pattern) {
+    return dataFormat.pattern;
+  }
+  if (typeof dataFormat === "string") {
+    const source = kind === "date" ? DATE_FORMAT_OPTIONS : TIME_FORMAT_OPTIONS;
+    const match = source.find((option) => option.type === dataFormat);
+    if (match) return match.value;
+  }
+  return kind === "date" ? "YYYY/M/D" : "HH:mm";
+}
+function resolveMoreFormatValue(category, customPattern, decimalPlaces = 2, currency = "\xA5", datePattern = "YYYY/M/D", timePattern = "HH:mm", useGrouping = false) {
+  if (category === "number")
+    return { type: "number", decimalPlaces, useGrouping };
+  if (category === "currency") {
+    return {
+      type: currency === "$" ? "usd" : "cny",
+      decimalPlaces,
+      useGrouping: true,
+      symbol: currency
+    };
+  }
+  if (category === "date") {
+    return {
+      type: DATE_FORMAT_OPTIONS.find((option) => option.value === datePattern)?.type ?? "datetime",
+      pattern: datePattern
+    };
+  }
+  if (category === "time") {
+    return {
+      type: TIME_FORMAT_OPTIONS.find((option) => option.value === timePattern)?.type ?? "time",
+      pattern: timePattern
+    };
+  }
+  if (category === "percent") return { type: "percent", decimalPlaces };
+  if (category === "scientific") return { type: "scientific", decimalPlaces };
+  if (category === "text") return "text";
+  if (category === "custom") return { type: "custom", pattern: customPattern };
+  return "default";
+}
+function resolveMoreFormatSample(category, customPattern, decimalPlaces = 2, currency = "\xA5", datePattern = "YYYY/M/D", timePattern = "HH:mm", useGrouping = false) {
+  if (category === "date") {
+    return formatDateTimeValue(DATE_TIME_FORMAT_SAMPLE, datePattern) ?? "";
+  }
+  if (category === "time") {
+    return formatDateTimeValue(DATE_TIME_FORMAT_SAMPLE, timePattern) ?? "";
+  }
+  if (category === "number") {
+    return formatNumberValue(1024.56, {
+      decimalPlaces,
+      thousandsSeparator: useGrouping
+    });
+  }
+  if (category === "currency") {
+    return formatNumberValue(1024.56, {
+      decimalPlaces,
+      thousandsSeparator: true,
+      symbol: currency
+    });
+  }
+  if (category === "percent") return formatPercentValue(0.1024, decimalPlaces);
+  if (category === "scientific") {
+    return formatScientificValue(1024, decimalPlaces);
+  }
+  if (category === "custom") {
+    return isDateTimeFormatPattern(customPattern) ? formatDateTimeValue(DATE_TIME_FORMAT_SAMPLE, customPattern) ?? "" : formatCustomNumberPattern(1024.56, customPattern);
+  }
+  const format = resolveMoreFormatValue(
+    category,
+    customPattern,
+    decimalPlaces,
+    currency,
+    datePattern
+  );
+  const samples = {
+    default: "",
+    text: "1024",
+    number: "1024",
+    thousands: "1,024",
+    decimal: "1,024.56",
+    percent: "10%",
+    percentDecimal: "10.24%",
+    scientific: "1.02E+003",
+    numberToChineseUpper: "\u7396\u62FE\u58F9\u4E07\u634C\u4EDF",
+    chineseUpperToNumber: "918000",
+    cny: "\xA51,024",
+    cnyDecimal: "\xA51,024.56",
+    usd: "$1,024",
+    usdDecimal: "$1,024.56",
+    dateSlash: "2017/08/01",
+    dateDash: "2017-08-01",
+    dateFullCN: "2017\u5E748\u67081\u65E5",
+    dateYearMonthCN: "2017\u5E748\u6708",
+    dateMonthDayCN: "8\u67081\u65E5",
+    dateSlashWeek: "2017/08/01 \u661F\u671F\u4E8C",
+    dateDashWeek: "2017-08-01 \u661F\u671F\u4E8C",
+    dateWeekdayCNFull: "\u661F\u671F\u4E8C",
+    dateWeekdayCNShort: "\u5468\u4E8C",
+    time: "23:24:25",
+    timeShort: "23:24",
+    time12: "\u4E0B\u534811:24",
+    time12Seconds: "\u4E0B\u534811:24:25",
+    timeMillisecond: "23:24:25.123",
+    time12Millisecond: "\u4E0B\u534811:24:25.123",
+    timeChineseHour: "23\u65F624\u5206",
+    timeChineseSecond: "23\u65F624\u520625\u79D2",
+    time12ChineseHour: "\u4E0B\u534811\u65F624\u5206",
+    time12ChineseSecond: "\u4E0B\u534811\u65F624\u520625\u79D2",
+    datetime: "2017/08/01 23:24:25",
+    datetime12: "2017/08/01 \u4E0B\u534811:24",
+    datetime12Seconds: "2017/08/01 \u4E0B\u534811:24:25",
+    money: "1,024.00"
+  };
+  return samples[typeof format === "string" ? format : format.type] ?? "";
+}
+var moreFormatLabelStyle = {
+  marginBottom: 6,
+  color: "#4b5563",
+  fontSize: 12
+};
+var moreFormatCategoryListStyle = {
+  display: "grid",
+  gap: 2,
+  padding: 4,
+  border: "1px solid #d1d5db",
+  borderRadius: 4
+};
+var moreFormatCategoryButtonStyle = {
+  height: 28,
+  padding: "0 8px",
+  border: 0,
+  borderRadius: 4,
+  background: "transparent",
+  color: "#374151",
+  textAlign: "left",
+  cursor: "pointer"
+};
+var moreFormatCategorySelectedStyle = {
+  background: "#dbeafe",
+  color: "#1677ff"
+};
+var moreFormatExampleStyle = {
+  height: 32,
+  padding: "0 10px",
+  display: "flex",
+  alignItems: "center",
+  border: "1px solid #d1d5db",
+  borderRadius: 4,
+  color: "#374151",
+  background: "#f8fafc"
+};
+var moreFormatDescriptionStyle = {
+  color: "#6b7280",
+  fontSize: 12
+};
+var moreFormatOptionsStyle = {
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: 8,
+  marginTop: 16
+};
+var moreFormatChoiceListStyle = {
+  display: "grid",
+  gap: 2,
+  maxHeight: 150,
+  overflow: "auto",
+  padding: 4,
+  border: "1px solid #d1d5db",
+  borderRadius: 4
+};
+var moreFormatChoiceStyle = {
+  minHeight: 26,
+  padding: "3px 8px",
+  border: 0,
+  borderRadius: 3,
+  background: "transparent",
+  color: "#1f2937",
+  textAlign: "left",
+  cursor: "pointer"
+};
+var moreFormatChoiceSelectedStyle = {
+  background: "#f3f4f6",
+  color: "#1677ff"
+};
+var SEARCH_MODAL_BODY_STYLE = {
+  padding: 12
+};
+function ReactListTableSearchDialog(props) {
+  const { request } = props;
+  const [keyword, setKeyword] = useState(request.keyword);
+  useEffect(() => {
+    setKeyword(request.keyword);
+  }, [request.keyword]);
+  const matchText = request.matchCount > 0 ? `${request.currentIndex + 1} / ${request.matchCount}` : "\u672A\u627E\u5230";
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      open: true,
+      title: "\u67E5\u627E",
+      width: 360,
+      mask: false,
+      centered: false,
+      draggable: true,
+      fullscreenable: false,
+      footer: false,
+      onCancel: request.onClose,
+      bodyStyle: SEARCH_MODAL_BODY_STYLE,
+      style: { marginTop: 96 },
+      children: /* @__PURE__ */ jsxs("div", { style: searchContentStyle, children: [
+        /* @__PURE__ */ jsx(
+          ReactInput,
+          {
+            autoFocus: true,
+            value: keyword,
+            placeholder: "\u67E5\u627E\u5185\u5BB9",
+            onChange: (event) => {
+              const value = event.target.value;
+              setKeyword(value);
+            },
+            onPressEnter: () => {
+              request.onSubmit(keyword);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: matchTextStyle, children: matchText }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: "\u4E0A\u4E00\u4E2A",
+            onClick: () => {
+              if (keyword !== request.keyword) {
+                request.onSubmit(keyword);
+              } else {
+                request.onNavigate("previous");
+              }
+            },
+            disabled: request.matchCount === 0 && keyword === request.keyword,
+            style: toolButtonStyle,
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: "\u4E0B\u4E00\u4E2A",
+            onClick: () => {
+              if (keyword !== request.keyword) {
+                request.onSubmit(keyword);
+              } else {
+                request.onNavigate("next");
+              }
+            },
+            disabled: request.matchCount === 0 && keyword === request.keyword,
+            style: toolButtonStyle,
+            children: "\u203A"
+          }
+        )
+      ] })
+    }
   );
 }
+var searchContentStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8
+};
+var matchTextStyle = {
+  minWidth: 58,
+  color: "#64748b",
+  fontSize: 12,
+  whiteSpace: "nowrap"
+};
+var toolButtonStyle = {
+  width: 28,
+  height: 28,
+  padding: 0,
+  border: "1px solid #d1d5db",
+  borderRadius: 4,
+  background: "#ffffff",
+  color: "#475569",
+  fontSize: 18,
+  lineHeight: 1,
+  cursor: "pointer"
+};
 
 // src/features/editor/utils.ts
 function toNumberValue(value) {
@@ -2639,6 +3610,7 @@ function useReactListTableState(options) {
   const [filterPanelRequest, setFilterPanelRequest] = useState(null);
   const [fixedPopupRequest, setFixedPopupRequest] = useState(null);
   const [headerContextMenuRequest, setHeaderContextMenuRequest] = useState(null);
+  const [searchRequest, setSearchRequest] = useState(null);
   const [imagePreviewRequest, setImagePreviewRequest] = useState(null);
   const [dangerConfirmRequest, setDangerConfirmRequest] = useState(null);
   const uiOptions = useMemo(
@@ -2672,6 +3644,10 @@ function useReactListTableState(options) {
         setHeaderContextMenuRequest(request);
         options.ui?.onHeaderContextMenuRequest?.(request);
       },
+      onSearchRequest: (request) => {
+        setSearchRequest(request);
+        options.ui?.onSearchRequest?.(request);
+      },
       onImagePreviewRequest: (request) => {
         setImagePreviewRequest(request);
         options.ui?.onImagePreviewRequest?.(request);
@@ -2704,6 +3680,7 @@ function useReactListTableState(options) {
       setFilterPanelRequest(null);
       setFixedPopupRequest(null);
       setHeaderContextMenuRequest(null);
+      setSearchRequest(null);
       setImagePreviewRequest(null);
       setDangerConfirmRequest(null);
     };
@@ -2724,6 +3701,7 @@ function useReactListTableState(options) {
     filterPanelRequest,
     fixedPopupRequest,
     headerContextMenuRequest,
+    searchRequest,
     imagePreviewRequest,
     dangerConfirmRequest,
     closeDangerConfirmRequest: () => {
@@ -2770,15 +3748,18 @@ function ReactListTableInner(props, ref) {
     rowKey,
     columns,
     dataSource,
+    onRow,
     theme,
     striped,
     highlightMode,
     contextMenu,
+    grouping,
     rowHeight,
     headerRowHeight,
     summaryRowHeight,
     overscanRowCount,
     query,
+    rowSelector,
     rowSelection,
     expandable,
     pagination,
@@ -2824,15 +3805,18 @@ function ReactListTableInner(props, ref) {
       rowKey,
       columns: resolvedColumns,
       dataSource,
+      onRow,
       theme,
       striped,
       highlightMode,
       contextMenu,
+      grouping,
       rowHeight: resolvedRowHeight,
       headerRowHeight,
       summaryRowHeight,
       overscanRowCount,
       query,
+      rowSelector,
       rowSelection,
       expandable,
       pagination,
@@ -2856,15 +3840,18 @@ function ReactListTableInner(props, ref) {
       rowKey,
       resolvedColumns,
       dataSource,
+      onRow,
       theme,
       striped,
       highlightMode,
       contextMenu,
+      grouping,
       resolvedRowHeight,
       headerRowHeight,
       summaryRowHeight,
       overscanRowCount,
       query,
+      rowSelector,
       rowSelection,
       expandable,
       pagination,
@@ -2889,6 +3876,7 @@ function ReactListTableInner(props, ref) {
     filterPanelRequest,
     fixedPopupRequest,
     headerContextMenuRequest,
+    searchRequest,
     imagePreviewRequest,
     dangerConfirmRequest,
     closeDangerConfirmRequest
@@ -2937,7 +3925,12 @@ function ReactListTableInner(props, ref) {
               density: resolvedRowHeight === "auto" ? 40 : resolvedRowHeight ?? 40,
               hostRef: shellRef,
               onExport: (options2) => tableRef.current?.exportXlsx(options2),
-              onDensityChange: setDensityOverride,
+              onDensityChange: (density) => {
+                setDensityOverride(density);
+                if (toolbar) {
+                  toolbar.onDensityChange?.(density);
+                }
+              },
               onColumnVisibilityChange: (columnKey, visible) => {
                 setColumnVisibility((current) => {
                   const next = new Map(current);
@@ -3024,6 +4017,10 @@ function ReactListTableInner(props, ref) {
       /* @__PURE__ */ jsx(ReactTableContextMenuView, { request: headerContextMenuRequest }),
       document.body
     ) : null,
+    searchRequest ? createPortal(
+      /* @__PURE__ */ jsx(ReactListTableSearchDialog, { request: searchRequest }),
+      document.body
+    ) : null,
     dangerConfirmRequest ? createPortal(
       /* @__PURE__ */ jsx(
         ReactTableDangerConfirmView,