@fileverse-dev/fortune-react 1.0.2-mod-28-patch-2 → 1.0.2-mod-34

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-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, 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, setCaretPosition, 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, goToLink, replaceHtml, removeHyperlink, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, getRangetxt, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, insertRowCol, drawArrow, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, 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, setCaretPosition, 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';
@@ -894,7 +894,10 @@ var FormulaHint = function FormulaHint(props) {
     className: "fa fa-angle-up",
     "aria-hidden": "true"
   })), /*#__PURE__*/React.createElement("div", {
-    className: "flex roun items-center justify-between",
+    onClick: function onClick() {
+      setShouldShowFunctionBody(!showFunctionBody);
+    },
+    className: "flex cursor-pointer items-center justify-between",
     style: {
       backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
       padding: "10px",
@@ -956,12 +959,8 @@ var FormulaHint = function FormulaHint(props) {
       width: "12px",
       height: "12px"
     }
-  }))), /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      setShouldShowFunctionBody(!showFunctionBody);
-    }
-  }, /*#__PURE__*/React.createElement(LucideIcon, {
-    name: "ChevronDown",
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: showFunctionBody ? "ChevronUp" : "ChevronDown",
     width: 16,
     height: 16
   })))), showFunctionBody && (/*#__PURE__*/React.createElement("div", {
@@ -992,7 +991,7 @@ var FormulaHint = function FormulaHint(props) {
     },
     className: "text-heading-xsm color-text-default"
   }, isKeyAdded ? "API key provided" : "API key is required"), /*#__PURE__*/React.createElement(LucideIcon, {
-    name: "ChevronDown",
+    name: showAPInput ? "ChevronUp" : "ChevronDown",
     width: 24,
     height: 24
   })), showAPInput && (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
@@ -1905,8 +1904,7 @@ var LinkEditCard = function LinkEditCard(_ref) {
     originType = _ref.originType,
     originAddress = _ref.originAddress,
     isEditing = _ref.isEditing,
-    position = _ref.position,
-    selectingCellRange = _ref.selectingCellRange;
+    position = _ref.position;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
@@ -1925,29 +1923,24 @@ var LinkEditCard = function LinkEditCard(_ref) {
     setLinkType = _useState6[1];
   var _locale = locale(context),
     insertLink = _locale.insertLink,
-    linkTypeList = _locale.linkTypeList,
-    button = _locale.button;
-  var lastCell = useRef(normalizeSelection(context, [{
-    row: [r, r],
-    column: [c, c]
-  }]));
-  var skipCellRangeSet = useRef(true);
+    linkTypeList = _locale.linkTypeList;
   var isLinkAddressValid = isLinkValid(context, linkType, linkAddress);
-  var tooltip = /*#__PURE__*/React.createElement("div", {
-    className: "validation-input-tip"
-  }, isLinkAddressValid.tooltip);
+  var isButtonDisabled = useMemo(function () {
+    if (!linkText.trim()) return true;
+    if (linkType === "webpage") {
+      return !linkAddress.trim() || !isLinkAddressValid.isValid;
+    }
+    if (linkType === "sheet") {
+      return !linkAddress.trim();
+    }
+    return false;
+  }, [linkText, linkAddress, linkType, isLinkAddressValid.isValid]);
   var hideLinkCard = useCallback(function () {
     _.set(refs.globalCache, "linkCard.mouseEnter", false);
     setContext(function (draftCtx) {
       draftCtx.linkCard = undefined;
     });
   }, [refs.globalCache, setContext]);
-  var setRangeModalVisible = useCallback(function (visible) {
-    return setContext(function (draftCtx) {
-      draftCtx.luckysheet_select_save = lastCell.current;
-      if (draftCtx.linkCard != null) draftCtx.linkCard.selectingCellRange = visible;
-    });
-  }, [setContext]);
   var containerEvent = useMemo(function () {
     return {
       onMouseEnter: function onMouseEnter() {
@@ -1973,19 +1966,6 @@ var LinkEditCard = function LinkEditCard(_ref) {
       }
     };
   }, [refs.globalCache]);
-  var renderBottomButton = useCallback(function (onOk, onCancel) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "button-group"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "button-basic button-default",
-      onClick: onCancel,
-      tabIndex: 0
-    }, button.cancel), /*#__PURE__*/React.createElement("div", {
-      className: "button-basic button-primary",
-      onClick: onOk,
-      tabIndex: 0
-    }, button.confirm));
-  }, [button]);
   var renderToolbarButton = useCallback(function (iconId, onClick) {
     return /*#__PURE__*/React.createElement("div", {
       className: "fortune-toolbar-button",
@@ -2004,23 +1984,6 @@ var LinkEditCard = function LinkEditCard(_ref) {
     setLinkText(originText);
     setLinkType(originType);
   }, [rc, originAddress, originText, originType]);
-  useLayoutEffect(function () {
-    if (selectingCellRange) {
-      skipCellRangeSet.current = true;
-    }
-  }, [selectingCellRange]);
-  useLayoutEffect(function () {
-    if (skipCellRangeSet.current) {
-      skipCellRangeSet.current = false;
-      return;
-    }
-    if (selectingCellRange) {
-      var len = _.size(context.luckysheet_select_save);
-      if (len > 0) {
-        setLinkAddress(getRangetxt(context, context.currentSheetId, context.luckysheet_select_save[len - 1], ""));
-      }
-    }
-  }, [context, selectingCellRange]);
   if (!isEditing) {
     return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
       onKeyDown: function onKeyDown(e) {
@@ -2061,69 +2024,16 @@ var LinkEditCard = function LinkEditCard(_ref) {
       });
     }));
   }
-  return selectingCellRange ? (/*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({
-    className: "fortune-link-modify-modal range-selection-modal",
-    style: {
-      left: position.cellLeft,
-      top: position.cellBottom + 5
-    }
-  }, _.omit(containerEvent, ["onMouseDown", "onMouseMove", "onMouseUp"])), {}, {
-    onMouseDown: function onMouseDown(e) {
-      var nativeEvent = e.nativeEvent;
-      onRangeSelectionModalMoveStart(context, refs.globalCache, nativeEvent);
-      e.stopPropagation();
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "modal-icon-close",
-    onClick: function onClick() {
-      return setRangeModalVisible(false);
-    },
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "close"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "modal-title"
-  }, insertLink.selectCellRange), /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
-    className: "range-selection-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
-    placeholder: insertLink.cellRangePlaceholder,
-    onChange: function onChange(e) {
-      return setLinkAddress(e.target.value);
-    },
-    value: linkAddress
-  })), tooltip, /*#__PURE__*/React.createElement("div", {
-    className: "modal-footer"
-  }, renderBottomButton(function () {
-    if (isLinkAddressValid.isValid) setRangeModalVisible(false);
-  }, function () {
-    setLinkAddress(originAddress);
-    setRangeModalVisible(false);
-  })))) : (/*#__PURE__*/React.createElement("div", _objectSpread2({
-    className: "fortune-link-modify-modal",
+  return /*#__PURE__*/React.createElement("div", _objectSpread2({
+    className: "fortune-link-card",
     style: {
       left: position.cellLeft + 20,
       top: position.cellBottom
     }
-  }, containerEvent), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-link-modify-line"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-link-modify-title"
-  }, insertLink.linkText), /*#__PURE__*/React.createElement("input", {
-    className: "fortune-link-modify-input",
-    spellCheck: "false",
-    autoFocus: true,
-    value: linkText,
-    onChange: function onChange(e) {
-      return setLinkText(e.target.value);
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-link-modify-line"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-link-modify-title"
-  }, insertLink.linkType), /*#__PURE__*/React.createElement("select", {
-    className: "fortune-link-modify-select",
+  }, containerEvent), /*#__PURE__*/React.createElement(Select$1, {
     value: linkType,
-    onChange: function onChange(e) {
-      if (e.target.value === "sheet") {
+    onValueChange: function onValueChange(value) {
+      if (value === "sheet") {
         if (!linkText) {
           setLinkText(context.luckysheetfile[0].name);
         }
@@ -2131,65 +2041,79 @@ var LinkEditCard = function LinkEditCard(_ref) {
       } else {
         setLinkAddress("");
       }
-      if (e.target.value === "cellrange") setRangeModalVisible(true);
-      setLinkType(e.target.value);
-    }
-  }, linkTypeList.map(function (type) {
-    return /*#__PURE__*/React.createElement("option", {
+      setLinkType(value);
+    }
+  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+    className: "fortune-link-type-select"
+  }, /*#__PURE__*/React.createElement(SelectValue, null)), /*#__PURE__*/React.createElement(SelectContent, {
+    className: "fortune-link-type-dropdown"
+  }, linkTypeList.filter(function (type) {
+    return type.value !== "cellrange";
+  }).map(function (type) {
+    return /*#__PURE__*/React.createElement(SelectItem$1, {
       key: type.value,
       value: type.value
     }, type.text);
   }))), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-link-modify-line"
-  }, linkType === "webpage" && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-link-modify-title"
-  }, insertLink.linkAddress), /*#__PURE__*/React.createElement("input", {
-    className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
-    spellCheck: "false",
-    value: linkAddress,
+    className: "fortune-input-with-icon"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "input-icon"
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: "ALargeSmall"
+  })), /*#__PURE__*/React.createElement(TextField, {
+    placeholder: "Display text",
+    value: linkText,
     onChange: function onChange(e) {
-      return setLinkAddress(e.target.value);
-    }
-  }), tooltip)), linkType === "cellrange" && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-link-modify-title"
-  }, insertLink.linkCell), /*#__PURE__*/React.createElement("input", {
-    className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
-    spellCheck: "false",
+      return setLinkText(e.target.value);
+    },
+    className: "fortune-link-input"
+  })), linkType === "webpage" && (/*#__PURE__*/React.createElement("div", {
+    className: "fortune-input-with-icon"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "input-icon"
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "link"
+  })), /*#__PURE__*/React.createElement(TextField, {
+    placeholder: "Paste URL",
     value: linkAddress,
     onChange: function onChange(e) {
       return setLinkAddress(e.target.value);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-link-modify-cell-selector",
-    onClick: function onClick() {
-      return setRangeModalVisible(true);
     },
-    tabIndex: 0
+    className: "fortune-link-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input")
+  }))), linkType === "sheet" && (/*#__PURE__*/React.createElement("div", {
+    className: "fortune-input-with-icon"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "input-icon"
   }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "border-all"
-  })), tooltip)), linkType === "sheet" && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-link-modify-title"
-  }, insertLink.linkSheet), /*#__PURE__*/React.createElement("select", {
-    className: "fortune-link-modify-select",
-    onChange: function onChange(e) {
-      if (!linkText) setLinkText(e.target.value);
-      setLinkAddress(e.target.value);
+    name: "link"
+  })), /*#__PURE__*/React.createElement(Select$1, {
+    onValueChange: function onValueChange(value) {
+      if (!linkText) setLinkText(value);
+      setLinkAddress(value);
     },
     value: linkAddress
+  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+    className: "fortune-sheet-select"
+  }, /*#__PURE__*/React.createElement(SelectValue, {
+    placeholder: "[Sheet name]"
+  })), /*#__PURE__*/React.createElement(SelectContent, {
+    className: "fortune-sheet-dropdown"
   }, context.luckysheetfile.map(function (sheet) {
-    return /*#__PURE__*/React.createElement("option", {
+    return /*#__PURE__*/React.createElement(SelectItem$1, {
       key: sheet.id,
       value: sheet.name
     }, sheet.name);
-  })), tooltip))), /*#__PURE__*/React.createElement("div", {
-    className: "modal-footer"
-  }, renderBottomButton(function () {
-    if (!isLinkAddressValid.isValid) return;
-    _.set(refs.globalCache, "linkCard.mouseEnter", false);
-    setContext(function (draftCtx) {
-      return saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
-    });
-  }, hideLinkCard))));
+  }))))), /*#__PURE__*/React.createElement(Button$1, {
+    className: "fortune-insert-button",
+    disabled: isButtonDisabled,
+    onClick: function onClick() {
+      if (isButtonDisabled) return;
+      _.set(refs.globalCache, "linkCard.mouseEnter", false);
+      setContext(function (draftCtx) {
+        return saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
+      });
+    }
+  }, "Insert link"));
 };
 
 var FilterOptions = function FilterOptions(_ref) {
@@ -2291,15 +2215,11 @@ var FilterOptions = function FilterOptions(_ref) {
         width: undefined
       }),
       className: "luckysheet-filter-options ".concat(filterParam == null ? "" : "luckysheet-filter-options-active")
-    }, filterParam == null ? (/*#__PURE__*/React.createElement("div", {
-      className: "caret down"
-    })) : (/*#__PURE__*/React.createElement(SVGIcon, {
-      name: "filter-fill-white",
-      style: {
-        width: 15,
-        height: 15
-      }
-    })));
+    }, /*#__PURE__*/React.createElement(SVGIcon, {
+      name: "filter",
+      width: 15,
+      height: 15
+    }));
   })));
 };
 
@@ -3397,6 +3317,7 @@ var ConditionRules = function ConditionRules(_ref) {
   }, /*#__PURE__*/React.createElement("span", {
     id: "checkTextColor"
   }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
     checked: context.conditionRules.textColor.check,
     onCheckedChange: function onCheckedChange(e) {
       var checked = e.target.checked;
@@ -3424,6 +3345,7 @@ var ConditionRules = function ConditionRules(_ref) {
   }, /*#__PURE__*/React.createElement("span", {
     id: "checkCellColor"
   }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
     checked: context.conditionRules.cellColor.check,
     onCheckedChange: function onCheckedChange(e) {
       var checked = e.target.checked;
@@ -4463,6 +4385,8 @@ var Combo = function Combo(_ref) {
     _onClick = _ref.onClick,
     text = _ref.text,
     iconId = _ref.iconId,
+    _ref$showArrow = _ref.showArrow,
+    showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
     children = _ref.children;
   var style = {
     userSelect: "none"
@@ -4479,12 +4403,9 @@ var Combo = function Combo(_ref) {
     setPopupPosition = _useState4[1];
   var popupRef = useRef(null);
   var buttonRef = useRef(null);
-  var openState = useRef(false);
-  var triggerRef = useRef(null);
   useOutsideClick(popupRef, function () {
     setOpen(false);
-    openState.current = false;
-  }, [], triggerRef);
+  });
   useLayoutEffect(function () {
     if (!popupRef.current) {
       return;
@@ -4510,27 +4431,43 @@ var Combo = function Combo(_ref) {
     ref: buttonRef,
     className: "fortune-toolbar-combo"
   }, /*#__PURE__*/React.createElement("div", {
-    ref: triggerRef,
     className: "fortune-toolbar-combo-button",
     onClick: function onClick(e) {
-      openState.current = !openState.current;
-      setOpen(openState.current);
-      if (_onClick) _onClick(e);else setOpen(openState.current);
+      if (_onClick) {
+        _onClick(e);
+        if (!showArrow) setOpen(!open);
+      } else {
+        setOpen(!open);
+      }
     },
     tabIndex: 0,
     "data-tips": tooltip,
     role: "button",
-    "aria-label": tooltip,
+    "aria-label": "".concat(tooltip, ": ").concat(text !== undefined ? text : ""),
     style: style
   }, iconId ? (/*#__PURE__*/React.createElement(SVGIcon, {
     name: iconId
   })) : (/*#__PURE__*/React.createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text))), tooltip && /*#__PURE__*/React.createElement("div", {
+  }, text !== undefined ? text : ""))), showArrow && (/*#__PURE__*/React.createElement("div", {
+    className: "fortune-toolbar-combo-arrow",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    tabIndex: 0,
+    "data-tips": tooltip,
+    role: "button",
+    "aria-label": tooltip,
+    style: style
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: "ChevronDown",
+    width: 14,
+    height: 14
+  }))), tooltip && /*#__PURE__*/React.createElement("div", {
     className: "fortune-tooltip"
   }, tooltip)), open && (/*#__PURE__*/React.createElement("div", {
     ref: popupRef,
-    className: "fortune-toolbar-combo-popup color-text-default",
+    className: "fortune-toolbar-combo-popup",
     style: popupPosition
   }, children === null || children === void 0 ? void 0 : children(setOpen))));
 };
@@ -5293,215 +5230,6 @@ var CustomColor = function CustomColor(_ref) {
   }));
 };
 
-var size = [{
-  Text: "1",
-  value: "Thin",
-  strokeDasharray: "1,0",
-  strokeWidth: "1"
-}, {
-  Text: "2",
-  value: "Hair",
-  strokeDasharray: "1,5",
-  strokeWidth: "1"
-}, {
-  Text: "3",
-  value: "Dotted",
-  strokeDasharray: "2,5",
-  strokeWidth: "2"
-}, {
-  Text: "4",
-  value: "Dashed",
-  strokeDasharray: "5,5",
-  strokeWidth: "2"
-}, {
-  Text: "5",
-  value: "DashDot",
-  strokeDasharray: "20,5,5,10,5,5",
-  strokeWidth: "2"
-}, {
-  Text: "6",
-  value: "DashDotDot",
-  strokeDasharray: "20,5,5,5,5,10,5,5,5,5",
-  strokeWidth: "2"
-}, {
-  Text: "8",
-  value: "Medium",
-  strokeDasharray: "2,0",
-  strokeWidth: "2"
-}, {
-  Text: "9",
-  value: "MediumDashed",
-  strokeDasharray: "3,5",
-  strokeWidth: "3"
-}, {
-  Text: "10",
-  value: "MediumDashDot",
-  strokeDasharray: "20,5,5,10,5,5",
-  strokeWidth: "3"
-}, {
-  Text: "11",
-  value: "MediumDashDotDot",
-  strokeDasharray: "5,5,5,5,20,5,5,5,5,10",
-  strokeWidth: "3"
-}, {
-  Text: "13",
-  value: "Thick",
-  strokeDasharray: "2,0",
-  strokeWidth: "3"
-}];
-var CustomBorder = function CustomBorder(_ref) {
-  var onPick = _ref.onPick;
-  var _useContext = useContext(WorkbookContext),
-    context = _useContext.context,
-    refs = _useContext.refs;
-  var _locale = locale(context),
-    border = _locale.border;
-  var _useState = useState("#000000"),
-    _useState2 = _slicedToArray(_useState, 2),
-    changeColor = _useState2[0],
-    setchangeColor = _useState2[1];
-  var _useState3 = useState("1"),
-    _useState4 = _slicedToArray(_useState3, 2),
-    changeStyle = _useState4[0],
-    setchangeStyle = _useState4[1];
-  var colorRef = useRef(null);
-  var styleRef = useRef(null);
-  var colorPreviewRef = useRef(null);
-  var _useState5 = useState(""),
-    _useState6 = _slicedToArray(_useState5, 2),
-    previewWith = _useState6[0],
-    setPreviewWith = _useState6[1];
-  var _useState7 = useState(""),
-    _useState8 = _slicedToArray(_useState7, 2),
-    previewdasharry = _useState8[0],
-    setPreviewdasharray = _useState8[1];
-  var showBorderSubMenu = useCallback(function (e) {
-    var target = e.target;
-    var menuItemRect = target.getBoundingClientRect();
-    var subMenuItem = target.querySelector(".fortune-border-select-menu");
-    if (_.isNil(subMenuItem)) return;
-    subMenuItem.style.display = "block";
-    var workbookContainerRect = refs.workbookContainer.current.getBoundingClientRect();
-    if (workbookContainerRect.width - menuItemRect.right > parseFloat(subMenuItem.style.width.replace("px", ""))) {
-      subMenuItem.style.left = "".concat(menuItemRect === null || menuItemRect === void 0 ? void 0 : menuItemRect.width, "px");
-    } else {
-      subMenuItem.style.left = "-".concat(subMenuItem.style.width);
-    }
-  }, [refs.workbookContainer]);
-  var hideBorderSubMenu = useCallback(function () {
-    styleRef.current.style.display = "none";
-    colorRef.current.style.display = "none";
-  }, []);
-  var changePreviewStyle = useCallback(function (width, dasharray) {
-    setPreviewWith(width);
-    setPreviewdasharray(dasharray);
-  }, []);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-border-select-option",
-    key: "borderColor",
-    onMouseEnter: function onMouseEnter(e) {
-      showBorderSubMenu(e);
-    },
-    onMouseLeave: function onMouseLeave() {
-      hideBorderSubMenu();
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-toolbar-menu-line"
-  }, border.borderColor, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "rightArrow",
-    style: {
-      width: "14px"
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    ref: colorPreviewRef,
-    className: "fortune-border-color-preview",
-    style: {
-      backgroundColor: changeColor
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: colorRef,
-    className: "fortune-border-select-menu",
-    style: {
-      display: "none",
-      width: "166px"
-    }
-  }, /*#__PURE__*/React.createElement(CustomColor, {
-    onCustomPick: function onCustomPick(color) {
-      onPick(color, changeStyle);
-      colorPreviewRef.current.style.backgroundColor = changeColor;
-      setchangeColor(color);
-    },
-    onColorPick: function onColorPick(color) {
-      onPick(color, changeStyle);
-      setchangeColor(color);
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-border-select-option",
-    key: "borderStyle",
-    onMouseEnter: function onMouseEnter(e) {
-      showBorderSubMenu(e);
-    },
-    onMouseLeave: function onMouseLeave() {
-      hideBorderSubMenu();
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-toolbar-menu-line"
-  }, border.borderStyle, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "rightArrow",
-    style: {
-      width: "14px"
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-border-style-preview"
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "90"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    stroke: "black",
-    strokeWidth: previewWith
-  }, /*#__PURE__*/React.createElement("path", {
-    strokeDasharray: previewdasharry,
-    d: "M0 0 l90 0"
-  })))), /*#__PURE__*/React.createElement("div", {
-    ref: styleRef,
-    className: "fortune-border-select-menu fortune-toolbar-select",
-    style: {
-      display: "none",
-      width: "110px"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-border-style-picker-menu fortune-border-style-reset",
-    onClick: function onClick() {
-      onPick(changeColor, "1");
-      changePreviewStyle("1", "1,0");
-    },
-    tabIndex: 0
-  }, border.borderDefault), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-boder-style-picker"
-  }, size.map(function (items, i) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: i,
-      className: "fortune-border-style-picker-menu",
-      onClick: function onClick() {
-        onPick(changeColor, items.Text);
-        setchangeStyle(items.Text);
-        changePreviewStyle(items.strokeWidth, items.strokeDasharray);
-      },
-      tabIndex: 0
-    }, /*#__PURE__*/React.createElement("svg", {
-      height: "10",
-      width: "90"
-    }, /*#__PURE__*/React.createElement("g", {
-      fill: "none",
-      stroke: "black",
-      strokeWidth: items.strokeWidth
-    }, /*#__PURE__*/React.createElement("path", {
-      strokeDasharray: items.strokeDasharray,
-      d: "M0 5 l85 0"
-    }))));
-  })))));
-};
-
 var FormatSearch = function FormatSearch(_ref) {
   var type = _ref.type,
     _onCancel = _ref.onCancel;
@@ -5678,13 +5406,11 @@ var Toolbar = function Toolbar(_ref) {
   var currency = settings.currency;
   var defaultFormat = defaultFmt(currency);
   var _useState5 = useState("#000000"),
-    _useState6 = _slicedToArray(_useState5, 2),
-    customColor = _useState6[0],
-    setcustomColor = _useState6[1];
+    _useState6 = _slicedToArray(_useState5, 1),
+    customColor = _useState6[0];
   var _useState7 = useState("1"),
-    _useState8 = _slicedToArray(_useState7, 2),
-    customStyle = _useState8[0],
-    setcustomStyle = _useState8[1];
+    _useState8 = _slicedToArray(_useState7, 1),
+    customStyle = _useState8[0];
   var showSubMenu = useCallback(function (e, className) {
     var target = e.target;
     var menuItem = target.className === "fortune-toolbar-menu-line" ? target.parentElement : target;
@@ -5784,6 +5510,7 @@ var Toolbar = function Toolbar(_ref) {
       }), /*#__PURE__*/React.createElement(Combo, {
         iconId: name,
         tooltip: tooltip,
+        showArrow: false,
         onClick: function onClick() {
           var color = name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor;
           if (color) pick(color);
@@ -5816,7 +5543,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         text: currentFmt,
         key: name,
-        tooltip: tooltip
+        tooltip: tooltip,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, defaultFormat.map(function (_ref2, ii) {
           var text = _ref2.text,
@@ -5900,7 +5628,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         text: current,
         key: name,
-        tooltip: tooltip
+        tooltip: tooltip,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, fontarray.map(function (o) {
           return /*#__PURE__*/React.createElement(Option, {
@@ -5922,7 +5651,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         text: cell ? normalizedCellAttr(cell, "fs", context.defaultFontSize) : context.defaultFontSize.toString(),
         key: name,
-        tooltip: tooltip
+        tooltip: tooltip,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, [9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72].map(function (num) {
           return /*#__PURE__*/React.createElement(Option, {
@@ -5957,7 +5687,8 @@ var Toolbar = function Toolbar(_ref) {
           return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.ht);
         })) === null || _$find === void 0 ? void 0 : _$find.title) || "align-left",
         key: name,
-        tooltip: toolbar.horizontalAlign
+        tooltip: toolbar.horizontalAlign,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, items.map(function (_ref3) {
           var text = _ref3.text,
@@ -5998,7 +5729,8 @@ var Toolbar = function Toolbar(_ref) {
           return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
         })) === null || _$find2 === void 0 ? void 0 : _$find2.title) || "align-top",
         key: name,
-        tooltip: toolbar.verticalAlign
+        tooltip: toolbar.verticalAlign,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, _items.map(function (_ref4) {
           var text = _ref4.text,
@@ -6123,7 +5855,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: "locationCondition",
         key: name,
-        tooltip: findAndReplace.location
+        tooltip: findAndReplace.location,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, _items2.map(function (_ref5) {
           var text = _ref5.text,
@@ -6208,7 +5941,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: "conditionFormat",
         key: name,
-        tooltip: toolbar.conditionalFormat
+        tooltip: toolbar.conditionalFormat,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(ConditionalFormat, {
           items: _items3,
@@ -6305,7 +6039,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: name,
         key: name,
-        tooltip: tooltip
+        tooltip: tooltip,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, itemData.map(function (_ref6) {
           var key = _ref6.key,
@@ -6344,6 +6079,7 @@ var Toolbar = function Toolbar(_ref) {
         iconId: "formula-sum",
         key: name,
         tooltip: toolbar.autoSum,
+        showArrow: false,
         onClick: function onClick() {
           return setContext(function (ctx) {
             handleSum(ctx, refs.cellInput.current, refs.fxInput.current, refs.globalCache);
@@ -6415,12 +6151,13 @@ var Toolbar = function Toolbar(_ref) {
               setOpen(false);
             }
           }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: value,
             style: {
-              marginRight: 4
+              display: "flex",
+              alignItems: "center",
+              gap: 6
             }
+          }, /*#__PURE__*/React.createElement(SVGIcon, {
+            name: value
           }), text));
         }));
       });
@@ -6438,9 +6175,6 @@ var Toolbar = function Toolbar(_ref) {
       }, {
         text: border.borderRight,
         value: "border-right"
-      }, {
-        text: "",
-        value: "divider"
       }, {
         text: border.borderNone,
         value: "border-none"
@@ -6450,9 +6184,6 @@ var Toolbar = function Toolbar(_ref) {
       }, {
         text: border.borderOutside,
         value: "border-outside"
-      }, {
-        text: "",
-        value: "divider"
       }, {
         text: border.borderInside,
         value: "border-inside"
@@ -6465,44 +6196,35 @@ var Toolbar = function Toolbar(_ref) {
       }, {
         text: border.borderSlash,
         value: "border-slash"
-      }, {
-        text: "",
-        value: "divider"
       }];
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: "border-all",
         key: name,
         tooltip: tooltip,
         text: "\u8FB9\u6846\u8BBE\u7F6E",
+        showArrow: false,
         onClick: function onClick() {
           return setContext(function (ctx) {
             handleBorder(ctx, "border-all", customColor, customStyle);
           });
         }
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, _items4.map(function (_ref9, ii) {
-          var text = _ref9.text,
-            value = _ref9.value;
-          return value !== "divider" ? (/*#__PURE__*/React.createElement(Option, {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "fortune-toolbar-select fortune-border-grid"
+        }, _items4.map(function (_ref9) {
+          var value = _ref9.value;
+          return /*#__PURE__*/React.createElement("div", {
             key: value,
+            className: "fortune-border-grid-item",
             onClick: function onClick() {
               setContext(function (ctx) {
                 handleBorder(ctx, value, customColor, customStyle);
               });
               setOpen(false);
             }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
+          }, /*#__PURE__*/React.createElement(SVGIcon, {
             name: value
-          })))) : (/*#__PURE__*/React.createElement(MenuDivider, {
-            key: ii
           }));
-        }), /*#__PURE__*/React.createElement(CustomBorder, {
-          onPick: function onPick(color, style) {
-            setcustomColor(color);
-            setcustomStyle(style);
-          }
         }));
       });
     }
@@ -6524,6 +6246,7 @@ var Toolbar = function Toolbar(_ref) {
         iconId: "freeze-row-col",
         key: name,
         tooltip: tooltip,
+        showArrow: false,
         onClick: function onClick() {
           return setContext(function (ctx) {
             handleFreeze(ctx, "freeze-row-col");
@@ -6570,7 +6293,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: _curr.iconId,
         key: name,
-        tooltip: toolbar.textWrap
+        tooltip: toolbar.textWrap,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, _items6.map(function (_ref1) {
           var text = _ref1.text,
@@ -6627,7 +6351,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: _curr2.iconId,
         key: name,
-        tooltip: toolbar.textRotate
+        tooltip: toolbar.textRotate,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, null, _items7.map(function (_ref10) {
           var text = _ref10.text,
@@ -6695,7 +6420,8 @@ var Toolbar = function Toolbar(_ref) {
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: "filter",
         key: name,
-        tooltip: toolbar.sortAndFilter
+        tooltip: toolbar.sortAndFilter,
+        showArrow: false
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement(Select, {
           style: {
@@ -6718,7 +6444,9 @@ var Toolbar = function Toolbar(_ref) {
               justifyContent: "start"
             }
           }, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: iconId
+            name: iconId,
+            width: 24,
+            height: 18
           }), text))) : (/*#__PURE__*/React.createElement(MenuDivider, {
             key: "divider-".concat(index)
           }));
@@ -6743,7 +6471,7 @@ var Toolbar = function Toolbar(_ref) {
     className: "fortune-toolbar",
     "aria-label": toolbar.toolbar
   }, settings.customToolbarItems.filter(function (n) {
-    return n.key !== "templates";
+    return n.key === "import-export";
   }).map(function (n) {
     return /*#__PURE__*/React.createElement(CustomButton, {
       tooltip: n.tooltip,
@@ -6780,6 +6508,18 @@ var Toolbar = function Toolbar(_ref) {
       icon: n.icon,
       iconName: n.iconName
     }, n.children);
+  }), /*#__PURE__*/React.createElement(Divider, {
+    key: "customDivider"
+  }), settings.customToolbarItems.filter(function (n) {
+    return n.key !== "templates" && n.key !== "import-export";
+  }).map(function (n) {
+    return /*#__PURE__*/React.createElement(CustomButton, {
+      tooltip: n.tooltip,
+      onClick: n.onClick,
+      key: n.key,
+      icon: n.icon,
+      iconName: n.iconName
+    }, n.children);
   }));
 };
 
@@ -8024,7 +7764,8 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React.createElement(SVGIcon, {
           name: "sort-asc",
-          width: 22,
+          width: 24,
+          height: 18,
           style: {
             marginRight: "4px"
           }
@@ -8042,7 +7783,8 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React.createElement(SVGIcon, {
           name: "sort-desc",
-          width: 22,
+          width: 24,
+          height: 18,
           style: {
             marginRight: "4px"
           }
@@ -8098,7 +7840,7 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React.createElement(SVGIcon, {
           name: "filter",
-          width: 22,
+          width: 24,
           style: {
             marginRight: "4px"
           }
@@ -8116,9 +7858,11 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React.createElement(SVGIcon, {
           name: "eraser",
-          width: 22,
+          width: 24,
+          height: 22,
           style: {
-            marginRight: "4px"
+            marginRight: "4px",
+            marginLeft: "2px"
           }
         }), /*#__PURE__*/React.createElement("p", null, filter.clearFilter))))),
         trigger: "mouseenter focus",
@@ -8129,7 +7873,7 @@ var ContextMenu = function ContextMenu() {
         className: "context-item"
       }, /*#__PURE__*/React.createElement(SVGIcon, {
         name: "filter",
-        width: 22,
+        width: 24,
         style: {
           marginRight: "4px"
         }
@@ -10553,23 +10297,24 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
 var SelectItem = function SelectItem(_ref) {
   var item = _ref.item,
     isChecked = _ref.isChecked,
-    _onChange = _ref.onChange,
+    onChange = _ref.onChange,
     isItemVisible = _ref.isItemVisible;
   var checked = useMemo(function () {
     return isChecked(item.key);
   }, [isChecked, item.key]);
   return isItemVisible(item) ? (/*#__PURE__*/React.createElement("div", {
     className: "select-item"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "filter-checkbox",
-    type: "checkbox",
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
     checked: checked,
-    onChange: function onChange() {
-      _onChange(item, !checked);
+    onCheckedChange: function onCheckedChange(e) {
+      onChange(item, e.target.checked);
     }
-  }), /*#__PURE__*/React.createElement("div", null, item.text), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", null, item.text)), /*#__PURE__*/React.createElement("span", {
     className: "count"
-  }, "( ".concat(item.rows.length, " )")))) : null;
+  }, "".concat(item.rows.length)))) : null;
 };
 var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
   var item = _ref2.item,
@@ -10578,7 +10323,7 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
     initialExpand = _ref2.initialExpand,
     onExpand = _ref2.onExpand,
     isChecked = _ref2.isChecked,
-    _onChange2 = _ref2.onChange,
+    onChange = _ref2.onChange,
     isItemVisible = _ref2.isItemVisible;
   var _useState = useState(initialExpand(item.key)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -10587,39 +10332,43 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
   var checked = useMemo(function () {
     return isChecked(item.key);
   }, [isChecked, item.key]);
-  return isItemVisible(item) ? (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  return isItemVisible(item) ? (/*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "select-item",
     style: {
       marginLeft: -2 + depth * 20
     },
-    onClick: function onClick() {
-      onExpand === null || onExpand === void 0 ? void 0 : onExpand(item.key, !expand);
-      setExpand(!expand);
-    },
     tabIndex: 0
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2",
+    style: {
+      flex: 1
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
   }, _.isEmpty(item.children) ? (/*#__PURE__*/React.createElement("div", {
     style: {
       width: 10
     }
-  })) : (/*#__PURE__*/React.createElement("div", {
-    className: "filter-caret ".concat(expand ? "down" : "right"),
-    style: {
-      cursor: "pointer"
+  })) : (/*#__PURE__*/React.createElement(LucideIcon, {
+    name: expand ? "ChevronDown" : "ChevronRight",
+    className: "cursor-pointer",
+    size: "sm",
+    onClick: function onClick() {
+      onExpand === null || onExpand === void 0 ? void 0 : onExpand(item.key, !expand);
+      setExpand(!expand);
     }
-  })), /*#__PURE__*/React.createElement("input", {
-    className: "filter-checkbox",
-    type: "checkbox",
+  })), /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
     checked: checked,
-    onChange: function onChange() {
-      _onChange2(item, !checked);
-    },
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    tabIndex: 0
-  }), /*#__PURE__*/React.createElement("div", null, item.text), /*#__PURE__*/React.createElement("span", {
+    onCheckedChange: function onCheckedChange(e) {
+      onChange(item, e.target.checked);
+    }
+  }), /*#__PURE__*/React.createElement("span", null, item.text)), /*#__PURE__*/React.createElement("span", {
     className: "count"
-  }, "( ".concat(item.rows.length, " )"))), expand && item.children.map(function (v) {
+  }, "".concat(item.rows.length))), expand && item.children.map(function (v) {
     return /*#__PURE__*/React.createElement(_DateSelectTreeItem, _objectSpread2({
       key: v.key,
       item: v,
@@ -10628,7 +10377,7 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
       initialExpand: initialExpand,
       onExpand: onExpand,
       isChecked: isChecked,
-      onChange: _onChange2,
+      onChange: onChange,
       isItemVisible: isItemVisible
     }));
   }))) : null;
@@ -10677,8 +10426,7 @@ var FilterMenu = function FilterMenu() {
     startCol = _ref4.startCol,
     endRow = _ref4.endRow,
     endCol = _ref4.endCol,
-    col = _ref4.col,
-    listBoxMaxHeight = _ref4.listBoxMaxHeight;
+    col = _ref4.col;
   var _locale = locale(context),
     filter = _locale.filter;
   var _useState3 = useState({
@@ -10753,25 +10501,6 @@ var FilterMenu = function FilterMenu() {
       }));
     }, 300);
   }, [data.flattenValues]);
-  var selectAll = useCallback(function () {
-    setDatesUncheck([]);
-    setValuesUncheck([]);
-    hiddenRows.current = [];
-  }, []);
-  var clearAll = useCallback(function () {
-    setDatesUncheck(_.keys(data.dateRowMap));
-    setValuesUncheck(_.keys(data.valueRowMap));
-    hiddenRows.current = data.visibleRows;
-  }, [data.dateRowMap, data.valueRowMap, data.visibleRows]);
-  var inverseSelect = useCallback(function () {
-    setDatesUncheck(produce(function (draft) {
-      return _.xor(draft, _.keys(data.dateRowMap));
-    }));
-    setValuesUncheck(produce(function (draft) {
-      return _.xor(draft, _.keys(data.valueRowMap));
-    }));
-    hiddenRows.current = _.xor(hiddenRows.current, data.visibleRows);
-  }, [data.dateRowMap, data.valueRowMap, data.visibleRows]);
   var onColorSelectChange = useCallback(function (key, color, checked) {
     setFilterColors(produce(function (draft) {
       var colorData = _.find(_.get(draft, key), function (v) {
@@ -10901,11 +10630,12 @@ var FilterMenu = function FilterMenu() {
     ref: containerRef,
     style: {
       left: filterContextMenu.x,
-      top: filterContextMenu.y
+      top: filterContextMenu.y,
+      minWidth: "280px !important"
     }
   }, (_settings$filterConte = settings.filterContextMenu) === null || _settings$filterConte === void 0 ? void 0 : _settings$filterConte.map(function (name, i) {
     if (name === "|") {
-      return /*#__PURE__*/React.createElement(Divider$1, {
+      return /*#__PURE__*/React.createElement(Divider$2, {
         key: "divider-".concat(i)
       });
     }
@@ -10915,7 +10645,16 @@ var FilterMenu = function FilterMenu() {
         onClick: function onClick() {
           return sortData(true);
         }
-      }, filter.sortByAsc);
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item w-full"
+      }, /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "sort-asc",
+        width: 24,
+        height: 18,
+        style: {
+          marginRight: "4px"
+        }
+      }), /*#__PURE__*/React.createElement("p", null, filter.sortByAsc)));
     }
     if (name === "sort-by-desc") {
       return /*#__PURE__*/React.createElement(Menu, {
@@ -10923,7 +10662,16 @@ var FilterMenu = function FilterMenu() {
         onClick: function onClick() {
           return sortData(false);
         }
-      }, filter.sortByDesc);
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item w-full"
+      }, /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "sort-desc",
+        width: 24,
+        height: 18,
+        style: {
+          marginRight: "4px"
+        }
+      }), /*#__PURE__*/React.createElement("p", null, filter.sortByDesc)));
     }
     if (name === "filter-by-color") {
       return /*#__PURE__*/React.createElement("div", {
@@ -10951,72 +10699,22 @@ var FilterMenu = function FilterMenu() {
         className: "filter-caret right"
       }))));
     }
-    if (name === "filter-by-condition") {
-      return /*#__PURE__*/React.createElement("div", {
-        key: "name"
-      }, /*#__PURE__*/React.createElement(Menu, {
-        onClick: function onClick() {}
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "filter-caret right"
-      }), filter.filterByCondition), /*#__PURE__*/React.createElement("div", {
-        className: "luckysheet-\\${menuid}-bycondition",
-        style: {
-          display: "none"
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "luckysheet-flat-menu-button luckysheet-mousedown-cancel",
-        id: "luckysheet-\\${menuid}-selected"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "luckysheet-mousedown-cancel",
-        "data-value": "null",
-        "data-type": "0"
-      }, filter.filiterInputNone), /*#__PURE__*/React.createElement("div", {
-        className: "luckysheet-mousedown-cancel"
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "fa fa-sort",
-        "aria-hidden": "true"
-      })))));
-    }
     if (name === "filter-by-value") {
       return /*#__PURE__*/React.createElement("div", {
         key: name
-      }, /*#__PURE__*/React.createElement(Menu, {
-        onClick: function onClick() {}
       }, /*#__PURE__*/React.createElement("div", {
-        className: "filter-caret right"
-      }), filter.filterByValues), /*#__PURE__*/React.createElement("div", {
-        className: "luckysheet-filter-byvalue"
+        className: "luckysheet-filter-byvalue flex flex-col gap-2 mt-2"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "fortune-menuitem-row byvalue-btn-row"
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-        className: "fortune-byvalue-btn",
-        onClick: selectAll,
-        tabIndex: 0
-      }, filter.filterValueByAllBtn), " - ", /*#__PURE__*/React.createElement("span", {
-        className: "fortune-byvalue-btn",
-        onClick: clearAll,
-        tabIndex: 0
-      }, filter.filterValueByClearBtn), " - ", /*#__PURE__*/React.createElement("span", {
-        className: "fortune-byvalue-btn",
-        onClick: inverseSelect,
-        tabIndex: 0
-      }, filter.filterValueByInverseBtn)), /*#__PURE__*/React.createElement("div", {
-        className: "byvalue-filter-icon"
-      }, /*#__PURE__*/React.createElement(SVGIcon, {
-        name: "filter-fill",
-        style: {
-          width: 20,
-          height: 20
-        }
-      }))), /*#__PURE__*/React.createElement("div", {
         className: "filtermenu-input-container"
-      }, /*#__PURE__*/React.createElement("input", {
-        type: "text",
+      }, /*#__PURE__*/React.createElement(TextField, {
+        leftIcon: /*#__PURE__*/React.createElement(LucideIcon, {
+          name: "Search",
+          size: "sm"
+        }),
         onKeyDown: function onKeyDown(e) {
           return e.stopPropagation();
         },
         placeholder: filter.filterValueByTip,
-        className: "luckysheet-mousedown-cancel",
         id: "luckysheet-\\${menuid}-byvalue-input",
         value: searchText,
         onChange: function onChange(e) {
@@ -11024,10 +10722,7 @@ var FilterMenu = function FilterMenu() {
           searchValues(e.target.value);
         }
       })), /*#__PURE__*/React.createElement("div", {
-        id: "luckysheet-filter-byvalue-select",
-        style: {
-          maxHeight: listBoxMaxHeight
-        }
+        id: "luckysheet-filter-byvalue-select"
       }, /*#__PURE__*/React.createElement(DateSelectTree, {
         dates: data.dates,
         onExpand: onExpand,
@@ -11049,6 +10744,37 @@ var FilterMenu = function FilterMenu() {
             return v.match(item.key) != null;
           }) > -1;
         }
+      }), /*#__PURE__*/React.createElement(SelectItem, {
+        item: {
+          key: "all",
+          text: filter.filterValueByAllBtn,
+          value: "",
+          mask: "",
+          rows: data.values.filter(function (v) {
+            return showValues.includes(v.text);
+          }).flatMap(function (v) {
+            return v.rows;
+          })
+        },
+        isChecked: function isChecked() {
+          var allDatesChecked = datesUncheck.length === 0;
+          var allValuesChecked = valuesUncheck.length === 0;
+          return allDatesChecked && allValuesChecked;
+        },
+        onChange: function onChange(item, checked) {
+          if (checked) {
+            setDatesUncheck([]);
+            setValuesUncheck([]);
+            hiddenRows.current = [];
+          } else {
+            setDatesUncheck(_.keys(data.dateRowMap));
+            setValuesUncheck(_.keys(data.valueRowMap));
+            hiddenRows.current = data.visibleRows;
+          }
+        },
+        isItemVisible: function isItemVisible() {
+          return true;
+        }
       }), data.values.map(function (v) {
         return /*#__PURE__*/React.createElement(SelectItem, {
           key: v.key,
@@ -11058,14 +10784,17 @@ var FilterMenu = function FilterMenu() {
           },
           onChange: function onChange(item, checked) {
             var rows = hiddenRows.current;
-            hiddenRows.current = checked ? _.without.apply(_, [rows].concat(_toConsumableArray(item.rows))) : _.concat(rows, item.rows);
-            setValuesUncheck(produce(function (draft) {
-              if (checked) {
+            if (checked) {
+              hiddenRows.current = _.without.apply(_, [rows].concat(_toConsumableArray(item.rows)));
+              setValuesUncheck(produce(function (draft) {
                 _.pull(draft, item.key);
-              } else {
+              }));
+            } else {
+              hiddenRows.current = _.concat(rows, item.rows);
+              setValuesUncheck(produce(function (draft) {
                 draft.push(item.key);
-              }
-            }));
+              }));
+            }
           },
           isItemVisible: function isItemVisible(item) {
             return showValues.length === data.flattenValues.length ? true : _.includes(showValues, item.text);
@@ -11074,40 +10803,49 @@ var FilterMenu = function FilterMenu() {
       }))));
     }
     return null;
-  }), /*#__PURE__*/React.createElement(Divider$1, null), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-menuitem-row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-primary",
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-menuitem-row mt-2"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "ghost",
+    style: {
+      minWidth: "80px"
+    },
     onClick: function onClick() {
-      if (col == null) return;
       setContext(function (draftCtx) {
-        var rowHidden = _.reduce(hiddenRows.current, function (pre, curr) {
-          pre[curr] = 0;
-          return pre;
-        }, {});
-        saveFilter(draftCtx, hiddenRows.current.length > 0, rowHidden, {}, startRow, endRow, col, startCol, endCol);
-        hiddenRows.current = [];
-        draftCtx.filterContextMenu = undefined;
+        clearFilter(draftCtx);
       });
     },
     tabIndex: 0
-  }, filter.filterConform), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-default",
+  }, filter.clearFilter), /*#__PURE__*/React.createElement(Button$1, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
     onClick: function onClick() {
       setContext(function (draftCtx) {
         draftCtx.filterContextMenu = undefined;
       });
     },
     tabIndex: 0
-  }, filter.filterCancel), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-danger",
+  }, filter.filterCancel), /*#__PURE__*/React.createElement(Button$1, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
     onClick: function onClick() {
+      if (col == null) return;
       setContext(function (draftCtx) {
-        clearFilter(draftCtx);
+        var rowHidden = _.reduce(hiddenRows.current, function (pre, curr) {
+          pre[curr] = 0;
+          return pre;
+        }, {});
+        saveFilter(draftCtx, hiddenRows.current.length > 0, rowHidden, {}, startRow, endRow, col, startCol, endCol);
+        hiddenRows.current = [];
+        draftCtx.filterContextMenu = undefined;
       });
     },
     tabIndex: 0
-  }, filter.clearFilter))), showSubMenu && (/*#__PURE__*/React.createElement("div", {
+  }, filter.filterConfirm))), showSubMenu && (/*#__PURE__*/React.createElement("div", {
     ref: subMenuRef,
     className: "luckysheet-filter-bycolor-submenu",
     style: subMenuPos,
@@ -11147,7 +10885,7 @@ var FilterMenu = function FilterMenu() {
       });
     },
     tabIndex: 0
-  }, filter.filterConform))))));
+  }, filter.filterConfirm))))));
 };
 
 var SheetHiddenButton = function SheetHiddenButton(_ref) {