@fileverse-dev/fortune-react 1.0.2-mod-20-patch-2 → 1.0.2-mod-25

package/dist/index.esm.js

@@ -1,8 +1,10 @@
-import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, locale, getStyleByCell, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, moveToEnd, isShowHidenCR, getrangeseleciton, cancelNormalSelected, moveHighlightCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, normalizeSelection, scrollToHighlightCell, isLinkValid, getRangetxt, goToLink, replaceHtml, removeHyperlink, onRangeSelectionModalMoveStart, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, insertRowCol, drawArrow, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, setCaretPosition, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getInlineStringNoStyle, rangeHightlightselected, updateCell, editSheetName, cancelActiveImgItem, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, indexToColumnChar, sortSelection, handleCopy, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, jfrefreshgrid, handleLink, handlePasteByClick, deleteSheet, opToPatch, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, calcSelectionInfo, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePaste, groupValuesRefresh } from '@fileverse-dev/fortune-core';
+import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, locale, getStyleByCell, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, moveToEnd, isShowHidenCR, getrangeseleciton, cancelNormalSelected, moveHighlightCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, normalizeSelection, scrollToHighlightCell, isLinkValid, getRangetxt, goToLink, replaceHtml, removeHyperlink, onRangeSelectionModalMoveStart, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, insertRowCol, drawArrow, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, setCaretPosition, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getInlineStringNoStyle, rangeHightlightselected, updateCell, editSheetName, cancelActiveImgItem, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, getFreezeState, toggleFreeze, jfrefreshgrid, handleCopy, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, sortSelection, handleLink, handlePasteByClick, deleteSheet, opToPatch, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, calcSelectionInfo, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePaste, groupValuesRefresh } from '@fileverse-dev/fortune-core';
 import React, { useContext, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import produce, { applyPatches, enablePatches, produceWithPatches } from 'immer';
 import _ from 'lodash';
+import { cn, IconButton, Button as Button$1, TextField, Checkbox, Divider as Divider$2, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem as SelectItem$1, LucideIcon } from '@fileverse/ui';
 import regeneratorRuntime from 'regenerator-runtime';
+import Tippy from '@tippyjs/react';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -1219,7 +1221,8 @@ var Dialog = function Dialog(_ref) {
     onCancel = _ref.onCancel,
     children = _ref.children,
     containerStyle = _ref.containerStyle,
-    contentStyle = _ref.contentStyle;
+    contentStyle = _ref.contentStyle,
+    title = _ref.title;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context;
   var _locale = locale(context),
@@ -1228,35 +1231,43 @@ var Dialog = function Dialog(_ref) {
     className: "fortune-dialog",
     style: containerStyle
   }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-modal-dialog-header"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-modal-dialog-icon-close",
+    className: cn("flex items-center justify-end border-b color-border-default py-3 px-6", {
+      "justify-between": title
+    })
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "text-heading-sm"
+  }, title), /*#__PURE__*/React.createElement(IconButton, {
+    icon: "X",
+    variant: "ghost",
     onClick: onCancel,
     tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "close",
-    style: {
-      padding: 7,
-      cursor: "pointer"
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-dialog-box-content",
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "px-6 pb-6 pt-4 text-body-sm",
     style: contentStyle
   }, children), type != null && (/*#__PURE__*/React.createElement("div", {
-    className: "fortune-dialog-box-button-container"
-  }, type === "ok" ? (/*#__PURE__*/React.createElement("div", {
-    className: "fortune-message-box-button button-default",
-    onClick: onOk,
-    tabIndex: 0
-  }, button.confirm)) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-message-box-button button-primary",
+    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
+  }, type === "ok" ? (/*#__PURE__*/React.createElement(Button$1, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
     onClick: onOk,
     tabIndex: 0
-  }, button.confirm), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-message-box-button button-default",
+  }, button.confirm)) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
     onClick: onCancel,
     tabIndex: 0
-  }, button.cancel))))));
+  }, button.cancel), /*#__PURE__*/React.createElement(Button$1, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: onOk,
+    tabIndex: 0
+  }, button.confirm))))));
 };
 
 var MessageBox = function MessageBox(_ref) {
@@ -1268,15 +1279,7 @@ var MessageBox = function MessageBox(_ref) {
   return /*#__PURE__*/React.createElement(Dialog, {
     type: type,
     onOk: onOk,
-    onCancel: onCancel,
-    contentStyle: {
-      width: 300,
-      paddingTop: 20,
-      paddingBottom: 30,
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    }
+    onCancel: onCancel
   }, children);
 };
 
@@ -1350,8 +1353,7 @@ var SearchReplace = function SearchReplace(_ref) {
     setContext = _useContext.setContext,
     refs = _useContext.refs;
   var _locale = locale(context),
-    findAndReplace = _locale.findAndReplace,
-    button = _locale.button;
+    findAndReplace = _locale.findAndReplace;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     searchText = _useState2[0],
@@ -1360,28 +1362,27 @@ var SearchReplace = function SearchReplace(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     replaceText = _useState4[0],
     setReplaceText = _useState4[1];
-  var _useState5 = useState(context.showReplace),
+  var _useState5 = useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
-    showReplace = _useState6[0],
-    setShowReplace = _useState6[1];
-  var _useState7 = useState([]),
+    searchResult = _useState6[0],
+    setSearchResult = _useState6[1];
+  var _useState7 = useState(),
     _useState8 = _slicedToArray(_useState7, 2),
-    searchResult = _useState8[0],
-    setSearchResult = _useState8[1];
-  var _useState9 = useState(),
-    _useState0 = _slicedToArray(_useState9, 2),
-    selectedCell = _useState0[0],
-    setSelectedCell = _useState0[1];
+    selectedCell = _useState8[0],
+    setSelectedCell = _useState8[1];
   var _useAlert = useAlert(),
     showAlert = _useAlert.showAlert;
-  var _useState1 = useState({
+  var tableContainerRef = useRef(null);
+  var searchInputRef = useRef(null);
+  var replaceInputRef = useRef(null);
+  var _useState9 = useState({
       regCheck: false,
       wordCheck: false,
       caseCheck: false
     }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    checkMode = _useState10[0],
-    checkModeReplace = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    checkMode = _useState0[0],
+    checkModeReplace = _useState0[1];
   var closeDialog = useCallback(function () {
     _.set(refs.globalCache, "searchDialog.mouseEnter", false);
     setContext(function (draftCtx) {
@@ -1416,98 +1417,110 @@ var SearchReplace = function SearchReplace(_ref) {
       onSearchDialogMoveStart(refs.globalCache, nativeEvent, getContainer());
       e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "container",
-    onMouseDown: function onMouseDown(e) {
-      return e.stopPropagation();
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "icon-close fortune-modal-dialog-icon-close",
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between border-b color-border-default py-3 px-6"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-heading-sm"
+  }, "Find and replace"), /*#__PURE__*/React.createElement(IconButton, {
+    icon: "X",
+    variant: "ghost",
     onClick: closeDialog,
     tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "close",
-    style: {
-      padding: 7,
-      cursor: "pointer"
-    }
   })), /*#__PURE__*/React.createElement("div", {
-    className: "tabBox"
-  }, /*#__PURE__*/React.createElement("span", {
-    id: "searchTab",
-    className: showReplace ? "" : "on",
-    onClick: function onClick() {
-      return setShowReplace(false);
-    },
-    tabIndex: 0
-  }, findAndReplace.find), /*#__PURE__*/React.createElement("span", {
-    id: "replaceTab",
-    className: showReplace ? "on" : "",
-    onClick: function onClick() {
-      return setShowReplace(true);
-    },
-    tabIndex: 0
-  }, findAndReplace.replace)), /*#__PURE__*/React.createElement("div", {
-    className: "ctBox"
+    className: "px-6 pb-6 pt-4"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "row"
+    className: "flex flex-col gap-4"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "inputBox"
+    className: "flex flex-col gap-4"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "textboxs",
-    id: "searchInput"
-  }, findAndReplace.findTextbox, "\uFF1A", /*#__PURE__*/React.createElement("input", {
+    id: "searchInput",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "find-replace-label text-heading-xsm"
+  }, findAndReplace.findTextbox, "\uFF1A"), /*#__PURE__*/React.createElement(TextField, {
+    ref: searchInputRef,
     className: "formulaInputFocus",
     autoFocus: true,
     spellCheck: "false",
     onKeyDown: function onKeyDown(e) {
       return e.stopPropagation();
     },
+    onMouseDown: function onMouseDown(e) {
+      var _searchInputRef$curre;
+      if (e.target === searchInputRef.current || ((_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.contains(e.target))) {
+        e.stopPropagation();
+      }
+    },
     value: searchText,
     onChange: function onChange(e) {
-      return setSearchText(e.target.value);
+      if (e.target.value.length === 0) {
+        setSearchResult([]);
+      }
+      setSearchText(e.target.value);
     }
-  })), showReplace && (/*#__PURE__*/React.createElement("div", {
-    className: "textboxs",
-    id: "replaceInput"
-  }, findAndReplace.replaceTextbox, "\uFF1A", /*#__PURE__*/React.createElement("input", {
+  })), /*#__PURE__*/React.createElement("div", {
+    id: "replaceInput",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "find-replace-label text-heading-xsm"
+  }, findAndReplace.replaceTextbox, "\uFF1A"), /*#__PURE__*/React.createElement(TextField, {
+    ref: replaceInputRef,
     className: "formulaInputFocus",
     spellCheck: "false",
     onKeyDown: function onKeyDown(e) {
       return e.stopPropagation();
     },
+    onMouseDown: function onMouseDown(e) {
+      var _replaceInputRef$curr;
+      if (e.target === replaceInputRef.current || ((_replaceInputRef$curr = replaceInputRef.current) === null || _replaceInputRef$curr === void 0 ? void 0 : _replaceInputRef$curr.contains(e.target))) {
+        e.stopPropagation();
+      }
+    },
     value: replaceText,
     onChange: function onChange(e) {
       return setReplaceText(e.target.value);
     }
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "checkboxs"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row gap-2"
   }, /*#__PURE__*/React.createElement("div", {
-    id: "regCheck"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    onChange: function onChange(e) {
+    className: "find-replace-label"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2 text-body-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "regCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
+    checked: checkMode.regCheck,
+    onCheckedChange: function onCheckedChange(e) {
       return setCheckMode("regCheck", e.target.checked);
     }
   }), /*#__PURE__*/React.createElement("span", null, findAndReplace.regexTextbox)), /*#__PURE__*/React.createElement("div", {
-    id: "wordCheck"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    onChange: function onChange(e) {
-      return setCheckMode("wordCheck", e.target.checked);
-    }
-  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.wholeTextbox)), /*#__PURE__*/React.createElement("div", {
-    id: "caseCheck"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    onChange: function onChange(e) {
+    id: "caseCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
+    checked: checkMode.caseCheck,
+    onCheckedChange: function onCheckedChange(e) {
       return setCheckMode("caseCheck", e.target.checked);
     }
-  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.distinguishTextbox)))), /*#__PURE__*/React.createElement("div", {
-    className: "btnBox"
-  }, showReplace && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.distinguishTextbox)), /*#__PURE__*/React.createElement("div", {
+    id: "wordCheck",
+    className: "flex flex-row gap-2 items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
+    checked: checkMode.wordCheck,
+    onCheckedChange: function onCheckedChange(e) {
+      return setCheckMode("wordCheck", e.target.checked);
+    }
+  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.wholeTextbox)))), /*#__PURE__*/React.createElement(Divider$2, {
+    className: "w-full border-t-[1px]"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row gap-2 justify-center items-center mb-4"
+  }, /*#__PURE__*/React.createElement(Button$1, {
     id: "replaceAllBtn",
-    className: "fortune-message-box-button button-default",
+    variant: "secondary",
+    className: "min-w-fit",
     onClick: function onClick() {
       setContext(function (draftCtx) {
         setSelectedCell(undefined);
@@ -1515,10 +1528,12 @@ var SearchReplace = function SearchReplace(_ref) {
         showAlert(alertMsg);
       });
     },
-    tabIndex: 0
-  }, findAndReplace.allReplaceBtn), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    disabled: searchText.length === 0 || replaceText.length === 0
+  }, findAndReplace.allReplaceBtn), /*#__PURE__*/React.createElement(Button$1, {
     id: "replaceBtn",
-    className: "fortune-message-box-button button-default",
+    variant: "secondary",
+    className: "min-w-fit",
     onClick: function onClick() {
       return setContext(function (draftCtx) {
         setSelectedCell(undefined);
@@ -1528,10 +1543,12 @@ var SearchReplace = function SearchReplace(_ref) {
         }
       });
     },
-    tabIndex: 0
-  }, findAndReplace.replaceBtn))), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    disabled: searchText.length === 0 || replaceText.length === 0
+  }, findAndReplace.replaceBtn), /*#__PURE__*/React.createElement(Button$1, {
     id: "searchAllBtn",
-    className: "fortune-message-box-button button-default",
+    variant: "secondary",
+    className: "min-w-fit",
     onClick: function onClick() {
       return setContext(function (draftCtx) {
         setSelectedCell(undefined);
@@ -1541,10 +1558,12 @@ var SearchReplace = function SearchReplace(_ref) {
         if (_.isEmpty(res)) showAlert(findAndReplace.noFindTip);
       });
     },
-    tabIndex: 0
-  }, findAndReplace.allFindBtn), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    disabled: searchText.length === 0
+  }, findAndReplace.allFindBtn), /*#__PURE__*/React.createElement(Button$1, {
     id: "searchNextBtn",
-    className: "fortune-message-box-button button-default",
+    variant: "default",
+    className: "min-w-fit",
     onClick: function onClick() {
       return setContext(function (draftCtx) {
         setSearchResult([]);
@@ -1552,23 +1571,45 @@ var SearchReplace = function SearchReplace(_ref) {
         if (alertMsg != null) showAlert(alertMsg);
       });
     },
+    tabIndex: 0,
+    disabled: searchText.length === 0
+  }, findAndReplace.findBtn))), searchResult.length > 0 && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider$2, {
+    className: "w-full border-t-[1px] mb-4"
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: tableContainerRef,
+    className: "mb-6 table-container max-h-[300px] overflow-y-auto",
+    onMouseDown: function onMouseDown(e) {
+      var _tableContainerRef$cu;
+      if (e.target === tableContainerRef.current || ((_tableContainerRef$cu = tableContainerRef.current) === null || _tableContainerRef$cu === void 0 ? void 0 : _tableContainerRef$cu.contains(e.target))) {
+        var _tableContainerRef$cu2;
+        e.stopPropagation();
+        (_tableContainerRef$cu2 = tableContainerRef.current) === null || _tableContainerRef$cu2 === void 0 ? void 0 : _tableContainerRef$cu2.focus();
+      }
+    },
+    onWheel: function onWheel(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (tableContainerRef.current) {
+        tableContainerRef.current.scrollTop += e.deltaY;
+      }
+    },
+    onTouchStart: function onTouchStart(e) {
+      e.stopPropagation();
+    },
+    onTouchMove: function onTouchMove(e) {
+      e.stopPropagation();
+    },
     tabIndex: 0
-  }, findAndReplace.findBtn))), /*#__PURE__*/React.createElement("div", {
-    className: "close-button fortune-message-box-button button-default",
-    onClick: closeDialog,
-    tabIndex: 0
-  }, button.close), searchResult.length > 0 && (/*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Table, {
     id: "searchAllbox"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "boxTitle"
-  }, /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetSheet), /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetCell), /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetValue)), /*#__PURE__*/React.createElement("div", {
-    className: "boxMain"
-  }, searchResult.map(function (v) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "boxItem ".concat(_.isEqual(selectedCell, {
+  }, /*#__PURE__*/React.createElement(TableHeader, {
+    className: "color-bg-secondary"
+  }, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetSheet), /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetCell), /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetValue))), /*#__PURE__*/React.createElement(TableBody, null, searchResult.map(function (v) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      className: cn(_.isEqual(selectedCell, {
         r: v.r,
         c: v.c
-      }) ? "on" : ""),
+      }) ? "color-bg-default-selected" : ""),
       key: v.cellPosition,
       onClick: function onClick() {
         setContext(function (draftCtx) {
@@ -1584,8 +1625,14 @@ var SearchReplace = function SearchReplace(_ref) {
         });
       },
       tabIndex: 0
-    }, /*#__PURE__*/React.createElement("span", null, v.sheetName), /*#__PURE__*/React.createElement("span", null, v.cellPosition), /*#__PURE__*/React.createElement("span", null, v.value));
-  }))))));
+    }, /*#__PURE__*/React.createElement(TableCell, {
+      className: "find-replace-table-cell"
+    }, v.sheetName), /*#__PURE__*/React.createElement(TableCell, {
+      className: "find-replace-table-cell"
+    }, v.cellPosition), /*#__PURE__*/React.createElement(TableCell, {
+      className: "find-replace-table-cell"
+    }, v.value));
+  })))))))));
 };
 
 var LinkEditCard = function LinkEditCard(_ref) {
@@ -2314,13 +2361,14 @@ function useDialog() {
   var _useContext = useContext(ModalContext),
     showModal = _useContext.showModal,
     hideModal = _useContext.hideModal;
-  var showDialog = useCallback(function (content, type) {
-    var onOk = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : hideModal;
-    var onCancel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : hideModal;
+  var showDialog = useCallback(function (content, type, title) {
+    var onOk = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : hideModal;
+    var onCancel = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : hideModal;
     showModal(/*#__PURE__*/React.createElement(Dialog, {
       type: type,
       onOk: onOk,
-      onCancel: onCancel
+      onCancel: onCancel,
+      title: title
     }, content));
   }, [hideModal, showModal]);
   return {
@@ -2834,6 +2882,21 @@ var DataVerification = function DataVerification() {
   }, button.cancel));
 };
 
+function getDisplayedRangeTxt(context) {
+  var _context$rangeDialog$, _context$rangeDialog;
+  if (context.luckysheet_select_save) {
+    var range = context.luckysheet_select_save[context.luckysheet_select_save.length - 1];
+    return getRangetxt(context, context.currentSheetId, range, context.currentSheetId);
+  }
+  return (_context$rangeDialog$ = (_context$rangeDialog = context.rangeDialog) === null || _context$rangeDialog === void 0 ? void 0 : _context$rangeDialog.rangeTxt) !== null && _context$rangeDialog$ !== void 0 ? _context$rangeDialog$ : "";
+}
+
+var datepickerStyles = "\n  .datepicker-toggle {\n    display: inline-block;\n    position: relative;\n    width: 100%;\n  }\n  \n  .datepicker-toggle-button {\n    opacity: 0.3;\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 16px;\n    height: 16px;\n    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjE2IiB5MT0iMiIgeDI9IjE2IiB5Mj0iNiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMiIgeDI9IjgiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxMCIgeDI9IjIxIiB5Mj0iMTAiPjwvbGluZT48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-position: center;\n    pointer-events: none;\n  }\n  \n  .datepicker-input {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #1a202c;\n    background-color: #fff;\n    cursor: pointer;\n  }\n  \n  .datepicker-input::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n  }\n  \n  .datepicker-input:focus {\n    outline: none;\n    border-color: #4299e1;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);\n  }\n";
+if (typeof document !== "undefined") {
+  var styleSheet = document.createElement("style");
+  styleSheet.textContent = datepickerStyles;
+  document.head.appendChild(styleSheet);
+}
 var ConditionRules = function ConditionRules(_ref) {
   var type = _ref.type;
   var _useContext = useContext(WorkbookContext),
@@ -2847,12 +2910,23 @@ var ConditionRules = function ConditionRules(_ref) {
     protection = _locale.protection,
     generalDialog = _locale.generalDialog;
   var _useState = useState({
-      textColor: "#000000",
-      cellColor: "#000000"
+      textColor: "#FFFFFF",
+      cellColor: "#D82E2A"
     }),
     _useState2 = _slicedToArray(_useState, 2),
     colorRules = _useState2[0],
     setColorRules = _useState2[1];
+  var dataSelectRange = useCallback(function (selectType) {
+    hideDialog();
+    setContext(function (ctx) {
+      ctx.conditionRules.textColor.color = colorRules.textColor;
+      ctx.conditionRules.cellColor.color = colorRules.cellColor;
+      ctx.rangeDialog.show = true;
+      ctx.rangeDialog.type = selectType;
+      ctx.rangeDialog.rangeTxt = ctx.conditionRules.rulesValue;
+      ctx.rangeDialog.singleSelect = true;
+    });
+  }, [colorRules.cellColor, colorRules.textColor, hideDialog, setContext]);
   var close = useCallback(function (closeType) {
     if (closeType === "confirm") {
       setContext(function (ctx) {
@@ -2921,17 +2995,16 @@ var ConditionRules = function ConditionRules(_ref) {
       ctx.rangeDialog.rangeTxt = "";
     });
   }, []);
+  var titleType = type === "top10_percent" ? "top10" : type === "last10_percent" ? "last10" : type;
   return /*#__PURE__*/React.createElement("div", {
     className: "condition-rules"
+  }, !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-title"
-  }, conditionformat["conditionformat_".concat(type)]), /*#__PURE__*/React.createElement("div", {
-    className: "conditin-rules-value"
-  }, conditionformat["conditionformat_".concat(type, "_title")]), (type === "greaterThan" || type === "lessThan" || type === "equal" || type === "textContains") && (/*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-inpbox"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "condition-rules-input",
-    type: "text",
+    className: "condition-rules-value text-heading-xsm"
+  }, conditionformat["conditionformat_".concat(titleType, "_title")]), (type === "greaterThan" || type === "lessThan" || type === "equal" || type === "textContains") && (/*#__PURE__*/React.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(TextField, {
     value: context.conditionRules.rulesValue,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -2940,12 +3013,11 @@ var ConditionRules = function ConditionRules(_ref) {
       });
     }
   }))), type === "between" && (/*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-between-box"
+    className: "w-full flex gap-2 items-center"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-between-inpbox"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "condition-rules-between-input",
-    type: "text",
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    placeholder: "From",
     value: context.conditionRules.betweenValue.value1,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -2953,15 +3025,10 @@ var ConditionRules = function ConditionRules(_ref) {
         ctx.conditionRules.betweenValue.value1 = value;
       });
     }
-  })), /*#__PURE__*/React.createElement("span", {
-    style: {
-      margin: "0px 4px"
-    }
-  }, conditionformat.to), /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-between-inpbox"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "condition-rules-between-input",
-    type: "text",
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    placeholder: "To",
     value: context.conditionRules.betweenValue.value2,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -2970,10 +3037,10 @@ var ConditionRules = function ConditionRules(_ref) {
       });
     }
   })))), type === "occurrenceDate" && (/*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-inpbox"
+    className: "datepicker-toggle"
   }, /*#__PURE__*/React.createElement("input", {
     type: "date",
-    className: "condition-rules-date",
+    className: "datepicker-input",
     value: context.conditionRules.dateValue,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -2981,50 +3048,101 @@ var ConditionRules = function ConditionRules(_ref) {
         ctx.conditionRules.dateValue = value;
       });
     }
-  }))), type === "duplicateValue" && (/*#__PURE__*/React.createElement("select", {
-    className: "condition-rules-select",
-    onChange: function onChange(e) {
-      var value = e.target.value;
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "datepicker-toggle-button"
+  }))), type === "duplicateValue" && (/*#__PURE__*/React.createElement(Select$1, {
+    value: context.conditionRules.repeatValue,
+    onValueChange: function onValueChange(value) {
       setContext(function (ctx) {
         ctx.conditionRules.repeatValue = value;
       });
     }
-  }, /*#__PURE__*/React.createElement("option", {
+  }, /*#__PURE__*/React.createElement(SelectTrigger, null, /*#__PURE__*/React.createElement(SelectValue, null)), /*#__PURE__*/React.createElement(SelectContent, {
+    className: "condition-rules-select"
+  }, /*#__PURE__*/React.createElement(SelectItem$1, {
     value: "0"
-  }, conditionformat.duplicateValue), /*#__PURE__*/React.createElement("option", {
+  }, conditionformat.duplicateValue), /*#__PURE__*/React.createElement(SelectItem$1, {
     value: "1"
-  }, conditionformat.uniqueValue))), (type === "top10" || type === "top10_percent" || type === "last10" || type === "last10_percent") && (/*#__PURE__*/React.createElement("div", {
+  }, conditionformat.uniqueValue)))), (type === "top10" || type === "top10_percent" || type === "last10" || type === "last10_percent") && (/*#__PURE__*/React.createElement("div", {
     className: "condition-rules-project-box"
-  }, type === "top10" || type === "top10_percent" ? conditionformat.top : conditionformat.last, /*#__PURE__*/React.createElement("input", {
-    className: "condition-rules-project-input",
+  }, type === "top10" || type === "top10_percent" ? conditionformat.top : conditionformat.last, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: "Minus",
+    variant: "ghost",
+    className: "!bg-transparent",
+    disabled: Number(context.conditionRules.projectValue) <= 1,
+    onClick: function onClick() {
+      setContext(function (ctx) {
+        var current = Number(ctx.conditionRules.projectValue) || 0;
+        ctx.conditionRules.projectValue = String(Math.max(current - 1, 1));
+      });
+    }
+  }), /*#__PURE__*/React.createElement(TextField, {
+    className: "condition-rules-project-input pr-0",
     type: "number",
+    min: 1,
+    max: type === "top10" || type === "last10" ? 10 : 100,
     value: context.conditionRules.projectValue,
     onChange: function onChange(e) {
       var value = e.target.value;
       setContext(function (ctx) {
         ctx.conditionRules.projectValue = value;
       });
+    },
+    rightIcon: type === "top10" || type === "last10" ? (/*#__PURE__*/React.createElement("span", {
+      className: "color-icon-secondary"
+    }, conditionformat.oneself)) : (/*#__PURE__*/React.createElement("span", {
+      className: "color-icon-secondary"
+    }, "%"))
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: "Plus",
+    variant: "ghost",
+    className: "!bg-transparent",
+    disabled: Number(context.conditionRules.projectValue) >= (type === "top10" || type === "last10" ? 10 : 100),
+    onClick: function onClick() {
+      setContext(function (ctx) {
+        var current = Number(ctx.conditionRules.projectValue) || 0;
+        ctx.conditionRules.projectValue = String(current + 1);
+      });
+    }
+  })))))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "condition-rules-value text-heading-xsm"
+  }, conditionformat.applyRange), /*#__PURE__*/React.createElement(TextField, {
+    rightIcon: /*#__PURE__*/React.createElement(LucideIcon, {
+      name: "Grid2x2",
+      size: "sm"
+    }),
+    "aria-hidden": "true",
+    readOnly: true,
+    placeholder: conditionformat.selectRange,
+    value: getDisplayedRangeTxt(context),
+    onClick: function onClick() {
+      dataSelectRange("conditionRules".concat(type));
     }
-  }), type === "top10" || type === "last10" ? conditionformat.oneself : "%")), /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-set-title"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "condition-rules-set-title text-heading-xsm"
   }, "".concat(conditionformat.setAs, "\uFF1A")), /*#__PURE__*/React.createElement("div", {
     className: "condition-rules-setbox"
   }, /*#__PURE__*/React.createElement("div", {
     className: "condition-rules-set"
   }, /*#__PURE__*/React.createElement("div", {
     className: "condition-rules-color"
-  }, /*#__PURE__*/React.createElement("input", {
-    id: "checkTextColor",
-    type: "checkbox",
-    className: "condition-rules-check",
+  }, /*#__PURE__*/React.createElement("span", {
+    id: "checkTextColor"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
     checked: context.conditionRules.textColor.check,
-    onChange: function onChange(e) {
+    onCheckedChange: function onCheckedChange(e) {
       var checked = e.target.checked;
       setContext(function (ctx) {
         ctx.conditionRules.textColor.check = checked;
       });
     }
-  }), /*#__PURE__*/React.createElement("label", {
+  })), /*#__PURE__*/React.createElement("label", {
     htmlFor: "checkTextColor",
     className: "condition-rules-label"
   }, conditionformat.textColor), /*#__PURE__*/React.createElement("input", {
@@ -3041,18 +3159,17 @@ var ConditionRules = function ConditionRules(_ref) {
     className: "condition-rules-set"
   }, /*#__PURE__*/React.createElement("div", {
     className: "condition-rules-color"
-  }, /*#__PURE__*/React.createElement("input", {
-    id: "checkCellColor",
-    type: "checkbox",
-    className: "condition-rules-check",
+  }, /*#__PURE__*/React.createElement("span", {
+    id: "checkCellColor"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
     checked: context.conditionRules.cellColor.check,
-    onChange: function onChange(e) {
+    onCheckedChange: function onCheckedChange(e) {
       var checked = e.target.checked;
       setContext(function (ctx) {
         ctx.conditionRules.cellColor.check = checked;
       });
     }
-  }), /*#__PURE__*/React.createElement("label", {
+  })), /*#__PURE__*/React.createElement("label", {
     htmlFor: "checkCellColor",
     className: "condition-rules-label"
   }, conditionformat.cellColor), /*#__PURE__*/React.createElement("input", {
@@ -3065,23 +3182,32 @@ var ConditionRules = function ConditionRules(_ref) {
         draft.cellColor = value;
       }));
     }
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-primary",
+  }))))), /*#__PURE__*/React.createElement(Divider$2, {
+    className: "w-full border-t-[1px]"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 justify-end"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
     onClick: function onClick() {
-      close("confirm");
+      close("close");
     },
     tabIndex: 0
-  }, button.confirm), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-close",
+  }, button.cancel), /*#__PURE__*/React.createElement(Button$1, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
     onClick: function onClick() {
-      close("close");
+      close("confirm");
     },
     tabIndex: 0
-  }, button.cancel));
+  }, button.apply)));
 };
 
 var RangeDialog = function RangeDialog() {
-  var _context$rangeDialog$, _context$rangeDialog;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext;
@@ -3090,7 +3216,7 @@ var RangeDialog = function RangeDialog() {
   var _locale = locale(context),
     dataVerification = _locale.dataVerification,
     button = _locale.button;
-  var _useState = useState((_context$rangeDialog$ = (_context$rangeDialog = context.rangeDialog) === null || _context$rangeDialog === void 0 ? void 0 : _context$rangeDialog.rangeTxt) !== null && _context$rangeDialog$ !== void 0 ? _context$rangeDialog$ : ""),
+  var _useState = useState(getDisplayedRangeTxt(context)),
     _useState2 = _slicedToArray(_useState, 2),
     rangeTxt2 = _useState2[0],
     setRangeTxt2 = _useState2[1];
@@ -3104,30 +3230,24 @@ var RangeDialog = function RangeDialog() {
     if (rangeDialogType.indexOf("between") >= 0) {
       showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
         type: "between"
-      }));
+      }), undefined, locale(context).conditionformat.conditionformat_between);
       return;
     }
     if (rangeDialogType.indexOf("conditionRules") >= 0) {
       var rulesType = rangeDialogType.substring("conditionRules".length, rangeDialogType.length);
       showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
         type: rulesType
-      }));
+      }), undefined, locale(context).conditionformat["conditionformat_".concat(rulesType)]);
       return;
     }
     showDialog(/*#__PURE__*/React.createElement(DataVerification, null));
-  }, [context.rangeDialog, setContext, showDialog]);
+  }, [setContext, showDialog, context]);
   useEffect(function () {
-    setRangeTxt2(function (r) {
-      if (context.luckysheet_select_save) {
-        var range = context.luckysheet_select_save[context.luckysheet_select_save.length - 1];
-        r = getRangetxt(context, context.currentSheetId, range, context.currentSheetId);
-        return r;
-      }
-      return "";
-    });
+    setRangeTxt2(getDisplayedRangeTxt(context));
   }, [context, context.luckysheet_select_save]);
   return /*#__PURE__*/React.createElement("div", {
     id: "range-dialog",
+    className: "fortune-dialog",
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
@@ -3145,15 +3265,34 @@ var RangeDialog = function RangeDialog() {
     },
     tabIndex: 0
   }, /*#__PURE__*/React.createElement("div", {
-    className: "dialog-title"
-  }, dataVerification.selectCellRange), /*#__PURE__*/React.createElement("input", {
+    className: cn("flex items-center justify-between border-b color-border-default py-3 px-6")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-heading-sm"
+  }, dataVerification.selectCellRange), /*#__PURE__*/React.createElement(IconButton, {
+    icon: "X",
+    variant: "ghost",
+    onClick: close,
+    tabIndex: 0
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "px-6 pb-6 pt-4 text-body-sm"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    className: "w-full",
     readOnly: true,
     placeholder: dataVerification.selectCellRange2,
     value: rangeTxt2
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-primary",
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: close,
+    tabIndex: 0
+  }, button.close), /*#__PURE__*/React.createElement(Button$1, {
+    variant: "default",
     style: {
-      marginLeft: "6px"
+      minWidth: "80px"
     },
     onClick: function onClick() {
       setContext(function (ctx) {
@@ -3162,13 +3301,7 @@ var RangeDialog = function RangeDialog() {
       close();
     },
     tabIndex: 0
-  }, button.confirm), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-close",
-    onClick: function onClick() {
-      close();
-    },
-    tabIndex: 0
-  }, button.close));
+  }, button.confirm)));
 };
 
 function useOutsideClick(containerRef, handler, deps, optionalContainerRef) {
@@ -4087,7 +4220,6 @@ var Combo = function Combo(_ref) {
   var openState = useRef(false);
   var triggerRef = useRef(null);
   useOutsideClick(popupRef, function () {
-    console.log("Combo useOutsideClick", openState.current);
     setOpen(false);
     openState.current = false;
   }, [], triggerRef);
@@ -4119,10 +4251,8 @@ var Combo = function Combo(_ref) {
     ref: triggerRef,
     className: "fortune-toolbar-combo-button",
     onClick: function onClick(e) {
-      console.log("Combo onClick pop ref", popupRef.current, "ll", document.getElementsByClassName("fortune-toolbar-combo-popup"));
       openState.current = !openState.current;
       setOpen(openState.current);
-      console.log("Combo onClick", iconId, _onClick, open, openState.current, e, e.target);
       if (_onClick) _onClick(e);else setOpen(openState.current);
     },
     tabIndex: 0,
@@ -4138,7 +4268,7 @@ var Combo = function Combo(_ref) {
     className: "fortune-tooltip"
   }, tooltip)), open && (/*#__PURE__*/React.createElement("div", {
     ref: popupRef,
-    className: "fortune-toolbar-combo-popup",
+    className: "fortune-toolbar-combo-popup color-text-default",
     style: popupPosition
   }, children === null || children === void 0 ? void 0 : children(setOpen))));
 };
@@ -4170,7 +4300,7 @@ var Option = function Option(_ref2) {
   }, iconId && /*#__PURE__*/React.createElement(SVGIcon, {
     name: iconId
   }), /*#__PURE__*/React.createElement("div", {
-    className: "fortuen-toolbar-text"
+    className: "fortuen-toolbar-text color-text-default text-body-sm"
   }, children));
 };
 
@@ -4416,7 +4546,7 @@ var SplitColumn = function SplitColumn() {
       }
     }
     if (dataCover) {
-      showDialog(splitText.splitConfirmToExe, "yesno", function () {
+      showDialog(splitText.splitConfirmToExe, "yesno", undefined, function () {
         hideDialog();
         setContext(function (ctx) {
           updateMoreCell(r, c, dataArr, ctx);
@@ -4739,33 +4869,53 @@ var ConditionalFormat = function ConditionalFormat(_ref) {
     showDialog = _useDialog.showDialog;
   var _locale = locale(context),
     conditionformat = _locale.conditionformat;
-  var showSubMenu = useCallback(function (e) {
-    var target = e.target;
-    var menuItem = target.className === "fortune-toolbar-menu-line" ? target.parentElement : target;
+  var activeSubMenuRef = useRef(null);
+  var updateSubMenuPosition = useCallback(function (subMenu, menuItem) {
     var menuItemRect = menuItem.getBoundingClientRect();
     var workbookContainerRect = refs.workbookContainer.current.getBoundingClientRect();
-    var subMenu = menuItem.querySelector(".condition-format-sub-menu");
-    if (_.isNil(subMenu)) return;
-    var menuItemStyle = window.getComputedStyle(menuItem);
-    var menuItemPaddingRight = parseFloat(menuItemStyle.getPropertyValue("padding-right").replace("px", ""));
-    if (workbookContainerRect.right - menuItemRect.right < parseFloat(subMenu.style.width.replace("px", ""))) {
-      subMenu.style.display = "block";
-      subMenu.style.right = "".concat(menuItemRect.width - menuItemPaddingRight, "px");
+    var subMenuWidth = subMenu.offsetWidth;
+    var availableSpace = workbookContainerRect.right - menuItemRect.right;
+    if (availableSpace < subMenuWidth) {
+      subMenu.style.right = "108%";
     } else {
-      subMenu.style.display = "block";
-      subMenu.style.right = "".concat(-(parseFloat(subMenu.style.width.replace("px", "")) + menuItemPaddingRight), "px");
+      subMenu.style.right = "-100%";
     }
   }, [refs.workbookContainer]);
+  var showSubMenu = useCallback(function (e) {
+    var target = e.target;
+    var menuItem = target.className === "fortune-toolbar-menu-line" ? target.parentElement : target;
+    var subMenu = menuItem.querySelector(".condition-format-sub-menu");
+    if (_.isNil(subMenu)) return;
+    subMenu.style.display = "block";
+    activeSubMenuRef.current = subMenu;
+    updateSubMenuPosition(subMenu, menuItem);
+  }, [updateSubMenuPosition]);
   var hideSubMenu = useCallback(function (e) {
     var target = e.target;
     if (target.className === "condition-format-sub-menu") {
       target.style.display = "none";
+      activeSubMenuRef.current = null;
       return;
     }
     var subMenu = target.className === "condition-format-item" ? target.parentElement : target.querySelector(".condition-format-sub-menu");
     if (_.isNil(subMenu)) return;
     subMenu.style.display = "none";
+    activeSubMenuRef.current = null;
   }, []);
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      if (activeSubMenuRef.current) {
+        var menuItem = activeSubMenuRef.current.parentElement;
+        if (menuItem) {
+          updateSubMenuPosition(activeSubMenuRef.current, menuItem);
+        }
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [updateSubMenuPosition]);
   var getConditionFormatItem = useCallback(function (name) {
     if (name === "-") {
       return /*#__PURE__*/React.createElement(MenuDivider, {
@@ -4786,8 +4936,7 @@ var ConditionalFormat = function ConditionalFormat(_ref) {
       }), /*#__PURE__*/React.createElement("div", {
         className: "condition-format-sub-menu",
         style: {
-          display: "none",
-          width: 150
+          display: "none"
         }
       }, [{
         text: "greaterThan",
@@ -4812,13 +4961,13 @@ var ConditionalFormat = function ConditionalFormat(_ref) {
         value: "##"
       }].map(function (v) {
         return /*#__PURE__*/React.createElement("div", {
-          className: "condition-format-item",
+          className: "condition-format-item text-body-sm color-text-default",
           key: v.text,
           onClick: function onClick() {
-            setOpen(false);
+            setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
             showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
               type: v.text
-            }));
+            }), undefined, conditionformat["conditionformat_".concat(v.text)]);
           },
           tabIndex: 0
         }, conditionformat[v.text], /*#__PURE__*/React.createElement("span", null, v.value));
@@ -4837,8 +4986,7 @@ var ConditionalFormat = function ConditionalFormat(_ref) {
       }), /*#__PURE__*/React.createElement("div", {
         className: "condition-format-sub-menu",
         style: {
-          display: "none",
-          width: 180
+          display: "none"
         }
       }, [{
         text: "top10",
@@ -4860,13 +5008,13 @@ var ConditionalFormat = function ConditionalFormat(_ref) {
         value: conditionformat.below
       }].map(function (v) {
         return /*#__PURE__*/React.createElement("div", {
-          className: "condition-format-item",
+          className: "condition-format-item text-body-sm color-text-default",
           key: v.text,
           onClick: function onClick() {
-            setOpen(false);
+            setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
             showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
               type: v.text
-            }));
+            }), undefined, conditionformat["conditionformat_".concat(v.text)]);
           },
           tabIndex: 0
         }, conditionformat[v.text], /*#__PURE__*/React.createElement("span", null, v.value));
@@ -4915,12 +5063,11 @@ var ConditionalFormat = function ConditionalFormat(_ref) {
       }), /*#__PURE__*/React.createElement("div", {
         className: "condition-format-sub-menu",
         style: {
-          display: "none",
-          width: 150
+          display: "none"
         }
       }, ["deleteSheetRule"].map(function (v) {
         return /*#__PURE__*/React.createElement("div", {
-          className: "condition-format-item",
+          className: "condition-format-item text-body-sm color-text-default",
           key: v,
           style: {
             padding: "6px 10px"
@@ -6486,7 +6633,11 @@ var Toolbar = function Toolbar(_ref) {
         key: name,
         tooltip: toolbar.sortAndFilter
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, _items8.map(function (_ref11, index) {
+        return /*#__PURE__*/React.createElement(Select, {
+          style: {
+            minWidth: "11.25rem"
+          }
+        }, _items8.map(function (_ref11, index) {
           var text = _ref11.text,
             iconId = _ref11.iconId,
             value = _ref11.value,
@@ -6498,10 +6649,13 @@ var Toolbar = function Toolbar(_ref) {
               setOpen(false);
             }
           }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
+            className: "fortune-toolbar-menu-line gap-1",
+            style: {
+              justifyContent: "start"
+            }
+          }, /*#__PURE__*/React.createElement(SVGIcon, {
             name: iconId
-          })))) : (/*#__PURE__*/React.createElement(MenuDivider, {
+          }), text))) : (/*#__PURE__*/React.createElement(MenuDivider, {
             key: "divider-".concat(index)
           }));
         }));
@@ -7259,132 +7413,18 @@ var Menu = function Menu(_ref) {
   }, children));
 };
 
-var CustomSort = function CustomSort() {
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    rangeColChar = _useState2[0],
-    setRangeColChar = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    ascOrDesc = _useState4[0],
-    setAscOrDesc = _useState4[1];
+var ContextMenu = function ContextMenu() {
+  var _useDialog = useDialog(),
+    showDialog = _useDialog.showDialog;
+  var containerRef = useRef(null);
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
-    setContext = _useContext.setContext;
-  var _useState5 = useState("0"),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedValue = _useState6[0],
-    setSelectedValue = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isTitleChange = _useState8[0],
-    setIstitleChange = _useState8[1];
-  var _locale = locale(context),
-    sort = _locale.sort;
-  var _useDialog = useDialog(),
-    hideDialog = _useDialog.hideDialog;
-  var col_start = context.luckysheet_select_save[0].column[0];
-  var col_end = context.luckysheet_select_save[0].column[1];
-  var row_start = context.luckysheet_select_save[0].row[0];
-  var row_end = context.luckysheet_select_save[0].row[1];
-  var sheetIndex = getSheetIndex(context, context.currentSheetId);
-  var handleSelectChange = function handleSelectChange(event) {
-    setSelectedValue(event.target.value);
-  };
-  var handleRadioChange = useCallback(function (e) {
-    var sortValue = e.target.value;
-    setAscOrDesc(sortValue === "asc");
-  }, []);
-  var handleTitleChange = useCallback(function (e) {
-    var value = e.target.checked;
-    setIstitleChange(value);
-  }, []);
-  useEffect(function () {
-    var list = [];
-    if (isTitleChange) {
-      for (var i = col_start; i <= col_end; i += 1) {
-        var _context$luckysheetfi, _context$luckysheetfi2;
-        var cell = (_context$luckysheetfi = context.luckysheetfile[sheetIndex].data) === null || _context$luckysheetfi === void 0 ? void 0 : (_context$luckysheetfi2 = _context$luckysheetfi[row_start]) === null || _context$luckysheetfi2 === void 0 ? void 0 : _context$luckysheetfi2[i];
-        var colHeaderValue = (cell === null || cell === void 0 ? void 0 : cell.m) || (cell === null || cell === void 0 ? void 0 : cell.v);
-        if (colHeaderValue) {
-          list.push(colHeaderValue);
-        } else {
-          var ColumnChar = indexToColumnChar(i);
-          list.push("".concat(sort.columnOperation, " ").concat(ColumnChar));
-        }
-      }
-    } else {
-      for (var _i = col_start; _i <= col_end; _i += 1) {
-        var _ColumnChar = indexToColumnChar(_i);
-        list.push(_ColumnChar);
-      }
-    }
-    setRangeColChar(list);
-  }, [col_end, col_start, context.luckysheetfile, isTitleChange, row_start, sheetIndex, sort.columnOperation]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "fortune-sort"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-sort-title"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, sort.sortRangeTitle), indexToColumnChar(col_start), row_start + 1, /*#__PURE__*/React.createElement("span", null, sort.sortRangeTitleTo), indexToColumnChar(col_end), row_end + 1)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-sort-modal"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    id: "fortune-sort-haveheader",
-    onChange: handleTitleChange
-  }), /*#__PURE__*/React.createElement("span", null, sort.hasTitle)), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-sort-tablec"
-  }, /*#__PURE__*/React.createElement("table", {
-    cellSpacing: "0"
-  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-    style: {
-      width: "190px"
-    }
-  }, sort.sortBy, /*#__PURE__*/React.createElement("select", {
-    name: "sort_0",
-    onChange: handleSelectChange
-  }, rangeColChar.map(function (col, index) {
-    return /*#__PURE__*/React.createElement("option", {
-      value: index,
-      key: index
-    }, col);
-  }))), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-    type: "radio",
-    value: "asc",
-    defaultChecked: true,
-    name: "sort_0",
-    onChange: handleRadioChange
-  }), /*#__PURE__*/React.createElement("span", null, sort.asc)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-    type: "radio",
-    value: "desc",
-    name: "sort_0",
-    onChange: handleRadioChange
-  }), /*#__PURE__*/React.createElement("span", null, sort.desc))))))))), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-sort-button"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-primary",
-    onClick: function onClick() {
-      setContext(function (draftCtx) {
-        sortSelection(draftCtx, ascOrDesc, parseInt(selectedValue, 10));
-        draftCtx.contextMenu = {};
-      });
-      hideDialog();
-    },
-    tabIndex: 0
-  }, sort.confirm)));
-};
-
-var ContextMenu = function ContextMenu() {
-  var _useDialog = useDialog(),
-    showDialog = _useDialog.showDialog;
-  var containerRef = useRef(null);
-  var _useContext = useContext(WorkbookContext),
-    context = _useContext.context,
-    setContext = _useContext.setContext,
-    settings = _useContext.settings,
-    refs = _useContext.refs;
-  var contextMenu = context.contextMenu;
-  var _useAlert = useAlert(),
-    showAlert = _useAlert.showAlert;
+    setContext = _useContext.setContext,
+    settings = _useContext.settings,
+    refs = _useContext.refs;
+  var contextMenu = context.contextMenu;
+  var _useAlert = useAlert(),
+    showAlert = _useAlert.showAlert;
   var _locale = locale(context),
     rightclick = _locale.rightclick,
     drag = _locale.drag,
@@ -7398,6 +7438,65 @@ var ContextMenu = function ContextMenu() {
         key: "divider-".concat(i)
       });
     }
+    if (name === "freeze-row") {
+      var freezeState = getFreezeState(context);
+      var isFrozen = freezeState.isRowFrozen;
+      var isEntireRowSelected = (selection === null || selection === void 0 ? void 0 : selection.row_select) === true;
+      if (!isEntireRowSelected) return null;
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: "freeze-row",
+        onClick: function onClick() {
+          setContext(function (draftCtx) {
+            if (isFrozen) {
+              toggleFreeze(draftCtx, "unfreeze-row");
+            } else {
+              toggleFreeze(draftCtx, "row");
+            }
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "freeze-flv",
+        width: 18,
+        height: 18,
+        style: {
+          marginTop: "4px",
+          marginRight: "4px"
+        }
+      }), isFrozen ? "Unfreeze row" : "Freeze to current row"));
+    }
+    if (name === "freeze-column") {
+      var _freezeState = getFreezeState(context);
+      var _isFrozen = _freezeState.isColFrozen;
+      var isEntireColumnSelected = (selection === null || selection === void 0 ? void 0 : selection.column_select) === true;
+      if (!isEntireColumnSelected) return null;
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: "freeze-column",
+        onClick: function onClick() {
+          setContext(function (draftCtx) {
+            if (_isFrozen) {
+              toggleFreeze(draftCtx, "unfreeze-column");
+            } else {
+              toggleFreeze(draftCtx, "column");
+              jfrefreshgrid(draftCtx, null, undefined, false);
+            }
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "freeze-flv",
+        width: 18,
+        height: 18,
+        style: {
+          marginTop: "4px",
+          marginRight: "4px"
+        }
+      }), /*#__PURE__*/React.createElement("p", null, _isFrozen ? "Unfreeze column" : "Freeze to current column")));
+    }
     if (name === "comment") {
       return /*#__PURE__*/React.createElement(Menu, {
         key: name,
@@ -7516,19 +7615,14 @@ var ContextMenu = function ContextMenu() {
         }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SVGIcon, {
           name: "insert-flv",
           width: 18,
-          height: 18,
-          style: {
-            marginRight: "8px",
-            position: "relative",
-            top: "3px"
-          }
-        }), _.startsWith((_context$lang = context.lang) !== null && _context$lang !== void 0 ? _context$lang : "", "zh") && (/*#__PURE__*/React.createElement(React.Fragment, null, rightclick.to, /*#__PURE__*/React.createElement("span", {
+          height: 18
+        }), /*#__PURE__*/React.createElement("div", null, _.startsWith((_context$lang = context.lang) !== null && _context$lang !== void 0 ? _context$lang : "", "zh") && (/*#__PURE__*/React.createElement(React.Fragment, null, rightclick.to, /*#__PURE__*/React.createElement("span", {
           className: "luckysheet-cols-rows-shift-".concat(dir)
         }, rightclick[dir]))), "".concat(rightclick.insert, "  "), "1", /*#__PURE__*/React.createElement("span", {
           className: "luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel"
         }, " ".concat(rightclick.column, "  ")), !_.startsWith((_context$lang2 = context.lang) !== null && _context$lang2 !== void 0 ? _context$lang2 : "", "zh") && (/*#__PURE__*/React.createElement("span", {
           className: "luckysheet-cols-rows-shift-".concat(dir)
-        }, rightclick[dir]))));
+        }, rightclick[dir])))));
       });
     }
     if (name === "insert-row") {
@@ -7564,19 +7658,14 @@ var ContextMenu = function ContextMenu() {
         }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SVGIcon, {
           name: "insert-flv",
           width: 18,
-          height: 18,
-          style: {
-            marginRight: "8px",
-            position: "relative",
-            top: "3px"
-          }
-        }), _.startsWith((_context$lang3 = context.lang) !== null && _context$lang3 !== void 0 ? _context$lang3 : "", "zh") && (/*#__PURE__*/React.createElement(React.Fragment, null, rightclick.to, /*#__PURE__*/React.createElement("span", {
+          height: 18
+        }), /*#__PURE__*/React.createElement("div", null, _.startsWith((_context$lang3 = context.lang) !== null && _context$lang3 !== void 0 ? _context$lang3 : "", "zh") && (/*#__PURE__*/React.createElement(React.Fragment, null, rightclick.to, /*#__PURE__*/React.createElement("span", {
           className: "luckysheet-cols-rows-shift-".concat(dir)
         }, rightclick[dir]))), "".concat(rightclick.insert, "  "), "1", /*#__PURE__*/React.createElement("span", {
           className: "luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel"
         }, " ".concat(rightclick.row, "  ")), !_.startsWith((_context$lang4 = context.lang) !== null && _context$lang4 !== void 0 ? _context$lang4 : "", "zh") && (/*#__PURE__*/React.createElement("span", {
           className: "luckysheet-cols-rows-shift-".concat(dir)
-        }, rightclick[dir]))));
+        }, rightclick[dir])))));
       });
     }
     if (name === "delete-column") {
@@ -7838,49 +7927,152 @@ var ContextMenu = function ContextMenu() {
         }
       }), /*#__PURE__*/React.createElement("p", null, rightclick.clearContent)));
     }
-    if (name === "orderAZ") {
-      return /*#__PURE__*/React.createElement(Menu, {
-        key: name,
-        onClick: function onClick() {
-          setContext(function (draftCtx) {
-            sortSelection(draftCtx, true);
-            draftCtx.contextMenu = {};
-          });
-        }
-      }, rightclick.orderAZ);
-    }
-    if (name === "orderZA") {
-      return /*#__PURE__*/React.createElement(Menu, {
-        key: name,
-        onClick: function onClick() {
-          setContext(function (draftCtx) {
-            sortSelection(draftCtx, false);
-            draftCtx.contextMenu = {};
-          });
-        }
-      }, rightclick.orderZA);
-    }
     if (name === "sort") {
-      return /*#__PURE__*/React.createElement(Menu, {
+      var _locale2 = locale(context),
+        sort = _locale2.sort;
+      return /*#__PURE__*/React.createElement(Tippy, {
         key: name,
-        onClick: function onClick() {
-          setContext(function (draftCtx) {
-            showDialog(/*#__PURE__*/React.createElement(CustomSort, null));
-            draftCtx.contextMenu = {};
-          });
+        placement: "right-start",
+        interactive: true,
+        interactiveBorder: 50,
+        offset: [0, 0],
+        arrow: false,
+        zIndex: 3000,
+        appendTo: document.body,
+        content: /*#__PURE__*/React.createElement("div", {
+          className: "fortune-toolbar-select",
+          style: {
+            minWidth: "11.25rem"
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "flex flex-col color-text-default text-body-sm"
+        }, /*#__PURE__*/React.createElement(Menu, {
+          onClick: function onClick() {
+            setContext(function (draftCtx) {
+              sortSelection(draftCtx, true);
+              draftCtx.contextMenu = {};
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item p-2 w-full",
+          style: {
+            height: "40px"
+          }
+        }, /*#__PURE__*/React.createElement(SVGIcon, {
+          name: "sort-asc",
+          width: 22,
+          style: {
+            marginRight: "4px"
+          }
+        }), /*#__PURE__*/React.createElement("p", null, sort.asc))), /*#__PURE__*/React.createElement(Menu, {
+          onClick: function onClick() {
+            setContext(function (draftCtx) {
+              sortSelection(draftCtx, false);
+              draftCtx.contextMenu = {};
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item p-2 w-full",
+          style: {
+            height: "40px"
+          }
+        }, /*#__PURE__*/React.createElement(SVGIcon, {
+          name: "sort-desc",
+          width: 22,
+          style: {
+            marginRight: "4px"
+          }
+        }), /*#__PURE__*/React.createElement("p", null, sort.desc))))),
+        trigger: "mouseenter focus",
+        hideOnClick: false
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between w-full"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "sort-flv",
+        width: 18,
+        height: 18,
+        style: {
+          marginRight: "8px"
         }
-      }, rightclick.sortSelection);
+      }), /*#__PURE__*/React.createElement("p", null, rightclick.sortSelection)), /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "rightArrow",
+        width: 18
+      })))));
     }
     if (name === "filter") {
-      return /*#__PURE__*/React.createElement(Menu, {
+      var _locale3 = locale(context),
+        filter = _locale3.filter;
+      return /*#__PURE__*/React.createElement(Tippy, {
         key: name,
-        onClick: function onClick() {
-          setContext(function (draftCtx) {
-            createFilter(draftCtx);
-            draftCtx.contextMenu = {};
-          });
+        placement: "right-start",
+        interactive: true,
+        interactiveBorder: 50,
+        offset: [0, 0],
+        arrow: false,
+        zIndex: 3000,
+        appendTo: document.body,
+        content: /*#__PURE__*/React.createElement("div", {
+          className: "fortune-toolbar-select",
+          style: {
+            minWidth: "11.25rem"
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "flex flex-col color-text-default text-body-sm"
+        }, /*#__PURE__*/React.createElement(Menu, {
+          onClick: function onClick() {
+            setContext(function (draftCtx) {
+              createFilter(draftCtx);
+              draftCtx.contextMenu = {};
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item p-2 w-full",
+          style: {
+            height: "40px"
+          }
+        }, /*#__PURE__*/React.createElement(SVGIcon, {
+          name: "filter",
+          width: 22,
+          style: {
+            marginRight: "4px"
+          }
+        }), /*#__PURE__*/React.createElement("p", null, filter.filter))), /*#__PURE__*/React.createElement(Menu, {
+          onClick: function onClick() {
+            setContext(function (draftCtx) {
+              clearFilter(draftCtx);
+              draftCtx.contextMenu = {};
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item p-2 w-full",
+          style: {
+            height: "40px"
+          }
+        }, /*#__PURE__*/React.createElement(SVGIcon, {
+          name: "eraser",
+          width: 22,
+          style: {
+            marginRight: "4px"
+          }
+        }), /*#__PURE__*/React.createElement("p", null, filter.clearFilter))))),
+        trigger: "mouseenter focus",
+        hideOnClick: false
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between w-full"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "filter",
+        width: 22,
+        style: {
+          marginRight: "4px"
         }
-      }, rightclick.filterSelection);
+      }), /*#__PURE__*/React.createElement("p", null, rightclick.filterSelection)), /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "rightArrow",
+        width: 18
+      })))));
     }
     if (name === "image") {
       return /*#__PURE__*/React.createElement(Menu, {
@@ -7904,8 +8096,45 @@ var ContextMenu = function ContextMenu() {
         }
       }, rightclick.link);
     }
+    if (name === "conditionFormat") {
+      var closeContextMenu = function closeContextMenu() {
+        return setContext(function (ctx) {
+          ctx.contextMenu = {};
+        });
+      };
+      return /*#__PURE__*/React.createElement(Tippy, {
+        key: name,
+        placement: "right-start",
+        interactive: true,
+        interactiveBorder: 50,
+        offset: [0, 0],
+        arrow: false,
+        zIndex: 3000,
+        appendTo: document.body,
+        content: /*#__PURE__*/React.createElement("div", {
+          style: {
+            minWidth: 220
+          }
+        }, /*#__PURE__*/React.createElement(ConditionalFormat, {
+          items: ["highlightCellRules", "itemSelectionRules", "-", "deleteRule"],
+          setOpen: closeContextMenu
+        })),
+        trigger: "mouseenter focus",
+        hideOnClick: false
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between w-full"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center gap-2"
+      }, /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "conditionFormat",
+        width: 18
+      }), /*#__PURE__*/React.createElement("p", null, rightclick.conditionFormat || "Conditional Format")), /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "rightArrow",
+        width: 18
+      })))));
+    }
     return null;
-  }, [context.currentSheetId, context.lang, context.luckysheet_select_save, context.defaultrowlen, context.defaultcollen, rightclick, info, setContext, showAlert, showDialog, drag, generalDialog]);
+  }, [context, setContext, refs.globalCache, rightclick, showAlert, showDialog, drag.noMulti, info.tipRowHeightLimit, info.tipColumnWidthLimit, generalDialog.partiallyError, generalDialog.readOnlyError, generalDialog.dataNullError]);
   useLayoutEffect(function () {
     var _refs$workbookContain;
     if (!containerRef.current) {
@@ -9173,31 +9402,41 @@ var SVGDefines = function SVGDefines(_ref) {
     stroke: "#535A68",
     strokeWidth: "1.5"
   })), /*#__PURE__*/React.createElement("symbol", {
-    viewBox: "0 0 1024 1024",
-    fill: "#535A68",
-    id: "sort-desc"
+    id: "sort-desc",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M839.6 433.8L749 150.5c-1.2-3.9-4.8-6.5-8.9-6.5h-77.4c-4.1 0-7.6 2.6-8.9 6.5l-91.3 283.3c-0.3 0.9-0.5 1.9-0.5 2.9 0 5.1 4.2 9.3 9.3 9.3h56.4c4.2 0 7.8-2.8 9-6.8l17.5-61.6h89l17.3 61.5c1.1 4 4.8 6.8 9 6.8h61.2c1 0 1.9-0.1 2.8-0.4 2.4-0.8 4.3-2.4 5.5-4.6 1.1-2.2 1.3-4.7 0.6-7.1zM663.3 325.5l32.8-116.9h6.3l32.1 116.9h-71.2z",
-    "p-id": "2016"
+    d: "M6.75 12.75C7.16421 12.75 7.5 13.0858 7.5 13.5C7.5 13.9142 7.16421 14.25 6.75 14.25H5.25C4.83579 14.25 4.5 13.9142 4.5 13.5C4.5 13.0858 4.83579 12.75 5.25 12.75H6.75Z",
+    fill: "#363B3F"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M806.8 818.4H677.2v-0.4l132.6-188.9c1.1-1.6 1.7-3.4 1.7-5.4v-36.4c0-5.1-4.2-9.3-9.3-9.3h-204c-5.1 0-9.3 4.2-9.3 9.3v43c0 5.1 4.2 9.3 9.3 9.3h122.6v0.4L587.7 828.9c-1.1 1.6-1.7 3.4-1.7 5.4v36.4c0 5.1 4.2 9.3 9.3 9.3h211.4c5.1 0 9.3-4.2 9.3-9.3v-43c0.1-5.1-4.1-9.3-9.2-9.3z",
-    "p-id": "2017"
+    d: "M9 9.75C9.41421 9.75 9.75 10.0858 9.75 10.5C9.75 10.9142 9.41421 11.25 9 11.25H5.25C4.83579 11.25 4.5 10.9142 4.5 10.5C4.5 10.0858 4.83579 9.75 5.25 9.75H9Z",
+    fill: "#363B3F"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M416 702h-76V172c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v530h-76c-6.7 0-10.5 7.8-6.3 13l112 141.9c3.2 4.1 9.4 4.1 12.6 0l112-141.9c4.1-5.2 0.4-13-6.3-13z",
-    "p-id": "2018"
-  })), /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 1024 1024",
-    fill: "#535A68",
-    id: "sort-asc"
+    d: "M11.25 6.75C11.6642 6.75 12 7.08579 12 7.5C12 7.91421 11.6642 8.25 11.25 8.25H5.25C4.83579 8.25 4.5 7.91421 4.5 7.5C4.5 7.08579 4.83579 6.75 5.25 6.75H11.25Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.5 3.75C13.9142 3.75 14.25 4.08579 14.25 4.5C14.25 4.91421 13.9142 5.25 13.5 5.25H5.25C4.83579 5.25 4.5 4.91421 4.5 4.5C4.5 4.08579 4.83579 3.75 5.25 3.75H13.5Z",
+    fill: "#363B3F"
+  })), /*#__PURE__*/React.createElement("symbol", {
+    id: "sort-asc",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M839.6 433.8L749 150.5c-1.2-3.9-4.8-6.5-8.9-6.5h-77.4c-4.1 0-7.6 2.6-8.9 6.5l-91.3 283.3c-0.3 0.9-0.5 1.9-0.5 2.9 0 5.1 4.2 9.3 9.3 9.3h56.4c4.2 0 7.8-2.8 9-6.8l17.5-61.6h89l17.3 61.5c1.1 4 4.8 6.8 9 6.8h61.2c1 0 1.9-0.1 2.8-0.4 2.4-0.8 4.3-2.4 5.5-4.6 1.1-2.2 1.3-4.7 0.6-7.1zM663.3 325.5l32.8-116.9h6.3l32.1 116.9h-71.2z",
-    "p-id": "2263"
+    d: "M13.5 12.75C13.9142 12.75 14.25 13.0858 14.25 13.5C14.25 13.9142 13.9142 14.25 13.5 14.25H5.25C4.83579 14.25 4.5 13.9142 4.5 13.5C4.5 13.0858 4.83579 12.75 5.25 12.75H13.5Z",
+    fill: "#363B3F"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M806.8 818.4H677.2v-0.4l132.6-188.9c1.1-1.6 1.7-3.4 1.7-5.4v-36.4c0-5.1-4.2-9.3-9.3-9.3h-204c-5.1 0-9.3 4.2-9.3 9.3v43c0 5.1 4.2 9.3 9.3 9.3h122.6v0.4L587.7 828.9c-1.1 1.6-1.7 3.4-1.7 5.4v36.4c0 5.1 4.2 9.3 9.3 9.3h211.4c5.1 0 9.3-4.2 9.3-9.3v-43c0.1-5.1-4.1-9.3-9.2-9.3z",
-    "p-id": "2264"
+    d: "M11.25 9.75C11.6642 9.75 12 10.0858 12 10.5C12 10.9142 11.6642 11.25 11.25 11.25H5.25C4.83579 11.25 4.5 10.9142 4.5 10.5C4.5 10.0858 4.83579 9.75 5.25 9.75H11.25Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9 6.75C9.41421 6.75 9.75 7.08579 9.75 7.5C9.75 7.91421 9.41421 8.25 9 8.25H5.25C4.83579 8.25 4.5 7.91421 4.5 7.5C4.5 7.08579 4.83579 6.75 5.25 6.75H9Z",
+    fill: "#363B3F"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M310.3 167.1c-3.2-4.1-9.4-4.1-12.6 0L185.7 309c-4.2 5.3-0.4 13 6.3 13h76v530c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V322h76c6.7 0 10.5-7.8 6.3-13l-112-141.9z",
-    "p-id": "2265"
+    d: "M6.75 3.75C7.16421 3.75 7.5 4.08579 7.5 4.5C7.5 4.91421 7.16421 5.25 6.75 5.25H5.25C4.83579 5.25 4.5 4.91421 4.5 4.5C4.5 4.08579 4.83579 3.75 5.25 3.75H6.75Z",
+    fill: "#363B3F"
   })), /*#__PURE__*/React.createElement("symbol", {
     viewBox: "0 0 1024 1024",
     fill: "#535A68",
@@ -9260,13 +9499,16 @@ var SVGDefines = function SVGDefines(_ref) {
     d: "M4.66663 1.33334C4.66663 0.965149 4.36815 0.666672 3.99996 0.666672C3.63177 0.666672 3.33329 0.965149 3.33329 1.33334V3.33334H1.33329C0.965103 3.33334 0.666626 3.63182 0.666626 4C0.666626 4.36819 0.965103 4.66667 1.33329 4.66667H3.33329V10.6667C3.33329 11.1971 3.54401 11.7058 3.91908 12.0809C4.29415 12.456 4.80286 12.6667 5.33329 12.6667H11.3333V14.6667C11.3333 15.0349 11.6318 15.3333 12 15.3333C12.3681 15.3333 12.6666 15.0349 12.6666 14.6667V12.6667H14.6666C15.0348 12.6667 15.3333 12.3682 15.3333 12C15.3333 11.6318 15.0348 11.3333 14.6666 11.3333H12.6666V5.33334C12.6666 4.8029 12.4559 4.2942 12.0808 3.91912C11.7058 3.54405 11.1971 3.33334 10.6666 3.33334H4.66663V1.33334ZM4.66663 4.66667V10.6667C4.66663 10.8435 4.73686 11.0131 4.86189 11.1381C4.98691 11.2631 5.15648 11.3333 5.33329 11.3333H11.3333V5.33334C11.3333 5.15653 11.2631 4.98696 11.138 4.86193C11.013 4.73691 10.8434 4.66667 10.6666 4.66667H4.66663Z",
     fill: "#363B3F"
   }))), /*#__PURE__*/React.createElement("symbol", {
-    viewBox: "0 0 1024 1024",
-    fill: "#535A68",
-    id: "conditionFormat",
-    width: "20"
+    width: "20",
+    height: "24",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    id: "conditionFormat"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M128 128h768v768H128V128z m64 512v128h128v-128H192z m256 0v128h192v-128H448zM192 448v128h128V448H192z m0-192v128h128V256H192z m192 0v128h192V256H384z m320 384v128h128v-128h-128z m0-192v128h128V448h-128z m0-192v128h128V256h-128z",
-    "p-id": "1955"
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M11.4661 0.673182C11.7715 0.703436 12.0585 0.838439 12.2773 1.0573C12.5274 1.30735 12.668 1.64638 12.668 2.00001V7.51303C12.7678 7.57076 12.861 7.64098 12.944 7.72396C13.1941 7.97401 13.3346 8.31305 13.3346 8.66667V9.33334C13.3346 9.86377 13.1238 10.3723 12.7487 10.7474C12.3736 11.1225 11.8651 11.3333 11.3346 11.3333H10.0013V13.2669C10.0012 13.7973 9.79038 14.306 9.41536 14.681C9.0403 15.056 8.53167 15.2669 8.0013 15.2669C7.47093 15.2669 6.9623 15.056 6.58724 14.681C6.21223 14.306 6.00137 13.7973 6.0013 13.2669V11.3333H4.66797C4.13754 11.3333 3.62898 11.1225 3.25391 10.7474C2.92577 10.4193 2.72324 9.98901 2.67773 9.53125L2.66797 9.33334V8.66667C2.66797 8.31305 2.80855 7.97401 3.05859 7.72396C3.14158 7.64098 3.23477 7.57076 3.33464 7.51303V2.00001C3.33464 1.64638 3.47521 1.30734 3.72526 1.0573C3.97531 0.807248 4.31435 0.666672 4.66797 0.666672H11.3346L11.4661 0.673182ZM4.0013 8.66667V9.33334L4.00456 9.39909C4.01968 9.55176 4.08719 9.69526 4.19661 9.80469C4.32164 9.92972 4.49116 10 4.66797 10H6.0013C6.35492 10 6.69396 10.1406 6.94401 10.3906C7.19406 10.6407 7.33464 10.9797 7.33464 11.3333V13.2669C7.3347 13.4436 7.40498 13.6133 7.52995 13.7383C7.65496 13.8632 7.82455 13.9336 8.0013 13.9336C8.17805 13.9336 8.34764 13.8632 8.47266 13.7383C8.59762 13.6133 8.6679 13.4436 8.66797 13.2669V11.3333C8.66797 10.9797 8.80855 10.6407 9.05859 10.3906C9.30864 10.1406 9.64768 10 10.0013 10H11.3346C11.5114 10 11.681 9.92972 11.806 9.80469C11.931 9.67967 12.0013 9.51015 12.0013 9.33334V8.66667H4.0013ZM4.66797 7.33334H11.3346V2.00001H10.0013V4C10.0013 4.36819 9.70283 4.66667 9.33463 4.66667C8.96644 4.66667 8.66797 4.36819 8.66797 4V2.00001H7.33464V2.66667C7.33464 3.03486 7.03616 3.33334 6.66797 3.33334C6.29978 3.33334 6.0013 3.03486 6.0013 2.66667V2.00001H4.66797V7.33334Z",
+    fill: "#363B3F"
   })), /*#__PURE__*/React.createElement("symbol", {
     viewBox: "0 0 1024 1024",
     fill: "#535A68",
@@ -9372,19 +9614,29 @@ var SVGDefines = function SVGDefines(_ref) {
     d: "M0.728617 1.71942C0.837856 1.48397 1.07381 1.33333 1.33336 1.33333H14.6667C14.9262 1.33333 15.1622 1.48397 15.2714 1.71942C15.3807 1.95486 15.3433 2.2323 15.1757 2.43048L10 8.55077V14C10 14.2311 9.88039 14.4456 9.68385 14.5671C9.48731 14.6886 9.24188 14.6996 9.03522 14.5963L6.36855 13.263C6.1427 13.15 6.00003 12.9192 6.00003 12.6667V8.55077L0.824316 2.43048C0.656718 2.2323 0.619379 1.95486 0.728617 1.71942ZM2.77023 2.66667L7.17574 7.87618C7.27752 7.99653 7.33336 8.14905 7.33336 8.30667V12.2546L8.6667 12.9213V8.30667C8.6667 8.14905 8.72254 7.99653 8.82432 7.87618L13.2298 2.66667H2.77023Z",
     fill: "#363B3F"
   }))), /*#__PURE__*/React.createElement("symbol", {
-    viewBox: "0 0 1024 1024",
-    fill: "#535A68",
-    id: "filter1"
+    id: "filter1",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M608 864C588.8 864 576 851.2 576 832L576 448c0-6.4 6.4-19.2 12.8-25.6L787.2 256c6.4-6.4 6.4-19.2 0-19.2 0-6.4-6.4-12.8-19.2-12.8L256 224c-12.8 0-19.2 6.4-19.2 12.8 0 6.4-6.4 12.8 6.4 19.2l198.4 166.4C441.6 428.8 448 441.6 448 448l0 256c0 19.2-12.8 32-32 32S384 723.2 384 704L384 460.8 198.4 307.2c-25.6-25.6-32-64-19.2-96C185.6 179.2 217.6 160 256 160L768 160c32 0 64 19.2 76.8 51.2 12.8 32 6.4 70.4-19.2 89.6l-192 160L633.6 832C640 851.2 627.2 864 608 864z",
-    "p-id": "43727"
+    d: "M10.0149 1.5C10.4291 1.5 10.7649 1.83579 10.7649 2.25C10.7649 2.66421 10.4291 3 10.0149 3H2.24975L7.66821 8.99121L7.80004 9.15161C8.09041 9.53914 8.24953 10.0121 8.24975 10.5V15.0007L9.74902 15.75L9.74975 10.5C9.75 9.9426 9.95667 9.4046 10.3306 8.99121L11.2439 7.98047L11.2988 7.92627C11.5809 7.67149 12.0156 7.66669 12.3037 7.927C12.6108 8.20473 12.6348 8.67881 12.3572 8.98608L11.4438 9.99683L11.4431 9.99756C11.3186 10.1353 11.2499 10.3143 11.2498 10.5V15.75L11.2468 15.8452C11.2327 16.0677 11.1689 16.2847 11.0601 16.4802C10.9356 16.7036 10.756 16.8914 10.5386 17.0259C10.3211 17.1604 10.0726 17.237 9.81713 17.2485C9.5937 17.2586 9.37132 17.2188 9.16601 17.1321L9.07885 17.0918L7.57885 16.3418C7.32961 16.2172 7.11961 16.0259 6.97314 15.7888C6.84501 15.5814 6.77019 15.3462 6.75341 15.104L6.74975 15V10.5C6.7496 10.3375 6.69633 10.1801 6.5996 10.051L6.55566 9.99756L1.13647 4.00562C0.94211 3.79026 0.81445 3.52231 0.768793 3.23584C0.723182 2.94943 0.760896 2.65567 0.878656 2.39062C0.996448 2.12559 1.18922 1.90053 1.43237 1.74243C1.67547 1.58442 1.95908 1.50014 2.24902 1.5H10.0149Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.2498 1.5C14.6638 1.50014 14.9998 1.83587 14.9998 2.25V3.75H16.4998C16.9138 3.75014 17.2498 4.08587 17.2498 4.5C17.2498 4.91413 16.9138 5.24986 16.4998 5.25H14.9998V6.75C14.9998 7.16413 14.6638 7.49986 14.2498 7.5C13.8355 7.5 13.4998 7.16421 13.4998 6.75V5.25H11.9998C11.5855 5.25 11.2498 4.91421 11.2498 4.5C11.2498 4.08579 11.5855 3.75 11.9998 3.75H13.4998V2.25C13.4998 1.83579 13.8355 1.5 14.2498 1.5Z",
+    fill: "#363B3F"
   })), /*#__PURE__*/React.createElement("symbol", {
-    viewBox: "0 0 1024 1024",
-    fill: "#535A68",
-    id: "eraser"
+    id: "eraser",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M596.437333 85.333333a42.837333 42.837333 0 0 0-30.549333 13.824l-469.333333 512a42.666667 42.666667 0 0 0 1.28 59.008l170.666666 170.666667A42.496 42.496 0 0 0 298.666667 853.333333h512v-85.333333h-195.669334l311.168-311.168a42.538667 42.538667 0 0 0 0-60.330667l-298.666666-298.666666A43.221333 43.221333 0 0 0 596.437333 85.333333z m-102.144 682.666667H316.330667l-129.28-129.28 268.8-293.205333 230.485333 230.485333-192.042667 192z m252.373334-252.330667l-233.130667-233.130666 85.12-92.842667L835.669333 426.666667 746.666667 515.669333z",
-    "p-id": "50819"
+    d: "M9.39746 1.5C9.81167 1.5 10.1475 1.83579 10.1475 2.25C10.1475 2.66421 9.81167 3 9.39746 3H2.24975L7.66821 8.99121L7.80004 9.15161C8.09041 9.53914 8.24953 10.0121 8.24975 10.5V15.0007L9.74902 15.75L9.74975 10.5C9.75 9.94243 9.95719 9.40465 10.3313 8.99121L10.6506 8.63672L10.7048 8.58252C10.9867 8.32757 11.4214 8.32258 11.7097 8.58252C12.0172 8.86008 12.0415 9.33487 11.7639 9.64233L11.4438 9.99683L11.4431 9.99756C11.3186 10.1353 11.2499 10.3143 11.2498 10.5V15.75L11.2468 15.8452C11.2327 16.0677 11.1689 16.2847 11.0601 16.4802C10.9356 16.7036 10.756 16.8914 10.5386 17.0259C10.3211 17.1604 10.0726 17.237 9.81713 17.2485C9.5937 17.2586 9.37132 17.2188 9.16601 17.1321L9.07885 17.0918L7.57885 16.3418C7.32961 16.2172 7.11961 16.0259 6.97314 15.7888C6.84501 15.5814 6.77019 15.3462 6.75341 15.104L6.74975 15V10.5C6.7496 10.3375 6.69633 10.1801 6.5996 10.051L6.55566 9.99756L1.13647 4.00562C0.94211 3.79026 0.81445 3.52231 0.768793 3.23584C0.723182 2.94943 0.760896 2.65567 0.878656 2.39062C0.996448 2.12559 1.18922 1.90053 1.43237 1.74243C1.67547 1.58442 1.95908 1.50014 2.24902 1.5H9.39746Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.8445 2.09473C12.1191 1.82027 12.5534 1.80323 12.8479 2.04346L12.905 2.09473L14.2498 3.43945L15.5945 2.09473L15.6516 2.04346C15.9462 1.80333 16.3805 1.82019 16.655 2.09473C16.9294 2.36928 16.9464 2.80361 16.7063 3.09814L16.655 3.15527L15.3103 4.5L16.655 5.84473L16.7063 5.90186C16.9464 6.19639 16.9294 6.63072 16.655 6.90527C16.3805 7.17981 15.9462 7.19667 15.6516 6.95654L15.5945 6.90527L14.2498 5.56055L12.905 6.90527C12.6122 7.19812 12.1374 7.19804 11.8445 6.90527C11.5516 6.61238 11.5516 6.13762 11.8445 5.84473L13.1892 4.5L11.8445 3.15527L11.7932 3.09814C11.5529 2.80356 11.5699 2.36931 11.8445 2.09473Z",
+    fill: "#363B3F"
   })), /*#__PURE__*/React.createElement("symbol", {
     viewBox: "0 0 1057 1024",
     fill: "#535A68",
@@ -9438,12 +9690,16 @@ var SVGDefines = function SVGDefines(_ref) {
     fill: "",
     "p-id": "5612"
   })), /*#__PURE__*/React.createElement("symbol", {
-    viewBox: "0 0 1024 1024",
-    fill: "#A8ABB0",
+    width: "16",
+    height: "24",
+    viewBox: "0 0 16 16",
+    fill: "none",
     id: "rightArrow"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M781.963636 495.709091l-418.909091-323.490909c-20.945455-16.290909-37.236364-9.309091-37.236363 16.290909v646.981818c0 25.6 16.290909 32.581818 37.236363 16.290909l418.909091-323.490909c11.636364-9.309091 11.636364-23.272727 0-32.581818z",
-    "p-id": "5380"
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M5.52729 3.52859C5.78764 3.26824 6.20975 3.26824 6.4701 3.52859L10.4701 7.52859C10.7305 7.78894 10.7305 8.21105 10.4701 8.4714L6.4701 12.4714C6.20975 12.7317 5.78764 12.7317 5.52729 12.4714C5.26694 12.2111 5.26694 11.7889 5.52729 11.5286L9.05589 8L5.52729 4.4714C5.26694 4.21105 5.26694 3.78894 5.52729 3.52859Z",
+    fill: "#77818A"
   })), /*#__PURE__*/React.createElement("symbol", {
     viewBox: "0 0 1024 1024",
     id: "downArrow"
@@ -9533,6 +9789,20 @@ var SVGDefines = function SVGDefines(_ref) {
     "clip-rule": "evenodd",
     d: "M3.75 1.5C3.15326 1.5 2.58097 1.73705 2.15901 2.15901C1.73705 2.58097 1.5 3.15326 1.5 3.75V15.75C1.5 16.0533 1.68273 16.3268 1.96299 16.4429C2.24324 16.559 2.56583 16.4948 2.78033 16.2803L5.56066 13.5H14.25C14.8467 13.5 15.419 13.2629 15.841 12.841C16.2629 12.419 16.5 11.8467 16.5 11.25V3.75C16.5 3.15326 16.2629 2.58097 15.841 2.15901C15.419 1.73705 14.8467 1.5 14.25 1.5H3.75ZM3.21967 3.21967C3.36032 3.07902 3.55109 3 3.75 3H14.25C14.4489 3 14.6397 3.07902 14.7803 3.21967C14.921 3.36032 15 3.55109 15 3.75V11.25C15 11.4489 14.921 11.6397 14.7803 11.7803C14.6397 11.921 14.4489 12 14.25 12H5.25C5.05109 12 4.86032 12.079 4.71967 12.2197L3 13.9393V3.75C3 3.55109 3.07902 3.36032 3.21967 3.21967Z",
     fill: "#363B3F"
+  }))), /*#__PURE__*/React.createElement("symbol", {
+    id: "freeze-flv",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "18",
+    height: "16",
+    viewBox: "0 0 18 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M13.4208 1.58557C13.6061 1.21509 13.4559 0.764586 13.0854 0.579344C12.7149 0.394102 12.2644 0.54427 12.0792 0.914754L11.4375 2.19811L11.1708 1.66475C10.9856 1.29427 10.5351 1.1441 10.1646 1.32934C9.79411 1.51459 9.64394 1.96509 9.82918 2.33557L10.599 3.87516L10.0365 5.00016H7.96353L7.40103 3.87516L8.17083 2.33557C8.35607 1.96509 8.2059 1.51459 7.83541 1.32934C7.46493 1.1441 7.01443 1.29427 6.82918 1.66475L6.5625 2.19811L5.92082 0.914754C5.73558 0.54427 5.28508 0.394102 4.91459 0.579344C4.54411 0.764586 4.39394 1.21509 4.57918 1.58557L5.22086 2.86893L4.63417 2.76226C4.22664 2.68817 3.8362 2.95847 3.7621 3.366C3.688 3.77353 3.95831 4.16397 4.36584 4.23807L6.05939 4.54598L6.66148 5.75016L5.91147 7.25016H4.49999L3.6 6.05018C3.35147 5.71881 2.88137 5.65165 2.55 5.90018C2.21863 6.14871 2.15147 6.61881 2.4 6.95018L2.62499 7.25016H1.5C1.08579 7.25016 0.75 7.58595 0.75 8.00016C0.75 8.41438 1.08579 8.75016 1.5 8.75016H2.62501L2.4 9.05018C2.15147 9.38155 2.21863 9.85165 2.55 10.1002C2.88137 10.3487 3.35147 10.2816 3.6 9.95018L4.50001 8.75016H5.91148L6.66148 10.2502L6.05938 11.4544L4.36584 11.7623C3.95831 11.8364 3.688 12.2268 3.7621 12.6344C3.8362 13.0419 4.22664 13.3122 4.63417 13.2381L5.22085 13.1314L4.57918 14.4148C4.39394 14.7852 4.54411 15.2357 4.91459 15.421C5.28508 15.6062 5.73558 15.4561 5.92082 15.0856L6.5625 13.8022L6.82918 14.3356C7.01443 14.7061 7.46493 14.8562 7.83541 14.671C8.2059 14.4858 8.35607 14.0353 8.17083 13.6648L7.40102 12.1252L7.96352 11.0002H10.0365L10.599 12.1252L9.82918 13.6648C9.64394 14.0353 9.79411 14.4858 10.1646 14.671C10.5351 14.8562 10.9856 14.7061 11.1708 14.3356L11.4375 13.8022L12.0792 15.0856C12.2644 15.4561 12.7149 15.6062 13.0854 15.421C13.4559 15.2358 13.6061 14.7853 13.4208 14.4148L12.7791 13.1314L13.3658 13.2381C13.7734 13.3122 14.1638 13.0419 14.2379 12.6344C14.312 12.2268 14.0417 11.8364 13.6342 11.7623L11.9406 11.4544L11.3385 10.2502L12.0885 8.75018H13.5L14.4 9.95018C14.6485 10.2816 15.1186 10.3487 15.45 10.1002C15.7814 9.85165 15.8485 9.38155 15.6 9.05018L15.375 8.75018H16.5C16.9142 8.75018 17.25 8.4144 17.25 8.00018C17.25 7.58597 16.9142 7.25018 16.5 7.25018H15.375L15.6 6.95018C15.8485 6.61881 15.7814 6.14871 15.45 5.90018C15.1186 5.65165 14.6485 5.71881 14.4 6.05018L13.5 7.25018H12.0885L11.3385 5.75016L11.9406 4.54599L13.6342 4.23807C14.0417 4.16397 14.312 3.77353 14.2379 3.366C14.1638 2.95847 13.7734 2.68817 13.3658 2.76226L12.7791 2.86893L13.4208 1.58557ZM7.96353 6.50016L7.21353 8.00016L7.96354 9.50018H10.0365L10.7865 8.00018L10.0365 6.50016H7.96353Z",
+    fill: "#363B3F"
   }))), /*#__PURE__*/React.createElement("symbol", {
     viewBox: "0 0 1024 1024",
     id: "tab"
@@ -9547,6 +9817,32 @@ var SVGDefines = function SVGDefines(_ref) {
     d: "M844.8 896c25.6 0 51.2-19.2 51.2-51.2v-185.6h-51.2c-44.8 0-83.2-38.4-83.2-83.2s38.4-83.2 83.2-83.2h51.2V313.6c0-25.6-19.2-51.2-51.2-51.2h-134.4c0-70.4-57.6-128-128-128S448 185.6 448 256H313.6c-25.6 0-51.2 19.2-51.2 51.2V448C185.6 448 128 505.6 128 576s57.6 128 128 128v134.4c0 25.6 19.2 51.2 51.2 51.2h185.6v-51.2c0-44.8 38.4-83.2 83.2-83.2 44.8 0 83.2 38.4 83.2 83.2v57.6h185.6zM576 710.4c-70.4 0-128 57.6-128 128H307.2v-185.6H256c-44.8 0-83.2-38.4-83.2-83.2S211.2 492.8 256 492.8h51.2V307.2h185.6V256c0-44.8 38.4-83.2 83.2-83.2 44.8 0 83.2 38.4 83.2 83.2v51.2h185.6V448c-70.4 0-128 57.6-128 128s57.6 128 128 128v140.8H704c6.4-70.4-51.2-134.4-128-134.4z",
     fill: "",
     "p-id": "36983"
+  })), /*#__PURE__*/React.createElement("symbol", {
+    id: "sort-flv",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M1.71967 11.4697C2.01256 11.1768 2.48744 11.1768 2.78033 11.4697L5.25 13.9393L7.71967 11.4697C8.01256 11.1768 8.48744 11.1768 8.78033 11.4697C9.07322 11.7626 9.07322 12.2374 8.78033 12.5303L5.78033 15.5303C5.48744 15.8232 5.01256 15.8232 4.71967 15.5303L1.71967 12.5303C1.42678 12.2374 1.42678 11.7626 1.71967 11.4697Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M5.25 2.25C5.66421 2.25 6 2.58579 6 3V15C6 15.4142 5.66421 15.75 5.25 15.75C4.83579 15.75 4.5 15.4142 4.5 15V3C4.5 2.58579 4.83579 2.25 5.25 2.25Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M12.2197 2.46967C12.5126 2.17678 12.9874 2.17678 13.2803 2.46967L16.2803 5.46967C16.5732 5.76256 16.5732 6.23744 16.2803 6.53033C15.9874 6.82322 15.5126 6.82322 15.2197 6.53033L12.75 4.06066L10.2803 6.53033C9.98744 6.82322 9.51256 6.82322 9.21967 6.53033C8.92678 6.23744 8.92678 5.76256 9.21967 5.46967L12.2197 2.46967Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M12.75 2.25C13.1642 2.25 13.5 2.58579 13.5 3V15C13.5 15.4142 13.1642 15.75 12.75 15.75C12.3358 15.75 12 15.4142 12 15V3C12 2.58579 12.3358 2.25 12.75 2.25Z",
+    fill: "#363B3F"
   }))));
 };
 
@@ -9841,7 +10137,7 @@ var MoreItemsContaier = function MoreItemsContaier(_ref) {
   }, children);
 };
 
-function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cellInput, scrollbarX, scrollbarY, globalCache) {
+function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cellInput, scrollbarX, scrollbarY) {
   return {
     applyOp: function applyOp(ops) {
       setContext(function (ctx_) {
@@ -10142,50 +10438,6 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
     },
     celldataToData: function celldataToData(celldata, rowCount, colCount) {
       return api.celldataToData(celldata, rowCount, colCount);
-    },
-    insertFunction: function insertFunction(selectedFuncIndex, filteredFunctionList, callback) {
-      var _context$luckysheet_s2;
-      var last = (_context$luckysheet_s2 = context.luckysheet_select_save) === null || _context$luckysheet_s2 === void 0 ? void 0 : _context$luckysheet_s2[context.luckysheet_select_save.length - 1];
-      var row_index = last === null || last === void 0 ? void 0 : last.row_focus;
-      var col_index = last === null || last === void 0 ? void 0 : last.column_focus;
-      if (!last) {
-        row_index = 0;
-        col_index = 0;
-      } else {
-        if (row_index == null) {
-          var _last$row2 = _slicedToArray(last.row, 1);
-          row_index = _last$row2[0];
-        }
-        if (col_index == null) {
-          var _last$column2 = _slicedToArray(last.column, 1);
-          col_index = _last$column2[0];
-        }
-      }
-      var formulaTxt = "<span dir=\"auto\" class=\"luckysheet-formula-text-color\">=</span><span dir=\"auto\" class=\"luckysheet-formula-text-color\">".concat(filteredFunctionList[selectedFuncIndex].n.toUpperCase(), "</span><span dir=\"auto\" class=\"luckysheet-formula-text-color\">(</span>");
-      var _locale2 = locale(context),
-        functionlist = _locale2.functionlist;
-      setContext(function (ctx) {
-        if (cellInput != null && globalCache != null) {
-          ctx.luckysheetCellUpdate = [row_index, col_index];
-          globalCache.doNotUpdateCell = true;
-          cellInput.innerHTML = formulaTxt;
-          var spans = cellInput.childNodes;
-          if (!_.isEmpty(spans)) {
-            setCaretPosition(ctx, spans[spans.length - 1], 0, 1);
-          }
-          ctx.functionHint = filteredFunctionList[selectedFuncIndex].n.toUpperCase();
-          ctx.functionCandidates = [];
-          if (_.isEmpty(ctx.formulaCache.functionlistMap)) {
-            for (var i = 0; i < functionlist.length; i += 1) {
-              ctx.formulaCache.functionlistMap[functionlist[i].n] = functionlist[i];
-            }
-          }
-          callback === null || callback === void 0 ? void 0 : callback();
-        }
-      });
-    },
-    getLocaleContext: function getLocaleContext() {
-      return locale(context);
     }
   };
 }
@@ -11393,8 +11645,8 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   }, [onPaste]);
   useImperativeHandle(ref, function () {
-    return generateAPIs(context, setContextWithProduce, handleUndo, handleRedo, mergedSettings, cellInput.current, scrollbarX.current, scrollbarY.current, globalCache.current);
-  }, [context, setContextWithProduce, handleUndo, handleRedo, mergedSettings, globalCache]);
+    return generateAPIs(context, setContextWithProduce, handleUndo, handleRedo, mergedSettings, cellInput.current, scrollbarX.current, scrollbarY.current);
+  }, [context, setContextWithProduce, handleUndo, handleRedo, mergedSettings]);
   var i = getSheetIndex(context, context.currentSheetId);
   if (i == null) {
     return null;