@fileverse-dev/fortune-react 1.0.2-mod-32 → 1.0.2-mod-28-patch-1

package/dist/index.js

@@ -813,49 +813,43 @@ var FormulaSearch = function FormulaSearch(props) {
         justifyContent: "space-between"
       }
     }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "luckysheet-formula-search-func"
+      className: "luckysheet-formula-search-func text-body-sm"
     }, v.n), /*#__PURE__*/React__default['default'].createElement("div", {
       style: {
         display: "flex",
+        justifyContent: "end",
+        width: "68px",
+        height: "20px",
+        alignItems: "center",
         gap: "4px"
       }
     }, v.LOGO && (/*#__PURE__*/React__default['default'].createElement("img", {
       src: v.LOGO,
       alt: "Service Logo",
-      width: 32,
-      height: 32
+      style: {
+        width: "20px"
+      }
     })), v.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
       style: {
         borderRadius: "4px",
-        width: "20px",
-        height: "20px",
-        backgroundColor: "".concat(localStorage.getItem(v.API_KEY) ? "#177E23" : "#F9A92B")
-      }
+        backgroundColor: "".concat(localStorage.getItem(v.API_KEY) ? "#177E23" : "#F9A92B"),
+        width: "16px",
+        height: "16px"
+      },
+      className: "flex justify-center"
     }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
       name: "Key",
       style: {
-        color: "white"
+        color: localStorage.getItem(v.API_KEY) ? "white" : "#77818A",
+        width: "12px",
+        height: "12px"
       }
     }))))), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "luckysheet-formula-search-detail"
+      className: "luckysheet-formula-search-detail mt-1 text-helper-text-sm"
     }, v.d));
   }));
 };
 
-function lightenHexColor(hex) {
-  var amount = 100;
-  if (hex.startsWith("#")) {
-    hex = hex.slice(1);
-  }
-  var r = parseInt(hex.slice(0, 2), 16);
-  var g = parseInt(hex.slice(2, 4), 16);
-  var b = parseInt(hex.slice(4, 6), 16);
-  r = Math.min(255, r + amount);
-  g = Math.min(255, g + amount);
-  b = Math.min(255, b + amount);
-  var newHex = "#".concat((1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1).toUpperCase());
-  return newHex;
-}
 var FormulaHint = function FormulaHint(props) {
   var _useContext = React.useContext(WorkbookContext),
     context = _useContext.context;
@@ -870,13 +864,26 @@ var FormulaHint = function FormulaHint(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     showAPInput = _useState4[0],
     setShowAPInput = _useState4[1];
+  var _useState5 = React.useState(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isKeyAdded = _useState6[0],
+    setApiKeyAdded = _useState6[1];
+  React.useEffect(function () {
+    if (fn) {
+      setApiKeyAdded(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY));
+      setAPI_KEY(localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY) || "");
+      setShowAPInput(!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY));
+    }
+  }, [fn]);
   if (!fn) return null;
   return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
     id: "luckysheet-formula-help-c",
     className: "luckysheet-formula-help-c",
     style: {
       border: "1px solid ".concat(fn.BRAND_COLOR),
-      backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      width: "340px",
+      padding: "0px"
     }
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-close",
@@ -891,17 +898,21 @@ var FormulaHint = function FormulaHint(props) {
     className: "fa fa-angle-up",
     "aria-hidden": "true"
   })), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-formula-help-title formula-title",
+    className: "flex items-center justify-between",
     style: {
-      backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      padding: "10px"
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-formula-help-title-formula"
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "luckysheet-formula-help-title-formula  color-text-default"
+  }, /*#__PURE__*/React__default['default'].createElement("code", {
+    style: {
+      fontWeight: 500
+    },
     className: "luckysheet-arguments-help-function-name"
-  }, fn.n), /*#__PURE__*/React__default['default'].createElement("span", {
+  }, fn.n), /*#__PURE__*/React__default['default'].createElement("code", {
     className: "luckysheet-arguments-paren"
-  }, "("), /*#__PURE__*/React__default['default'].createElement("span", {
+  }, "("), /*#__PURE__*/React__default['default'].createElement("code", {
     className: "luckysheet-arguments-parameter-holder"
   }, fn.p.map(function (param, i) {
     var name = param.name;
@@ -911,43 +922,51 @@ var FormulaHint = function FormulaHint(props) {
     if (param.require === "o") {
       name = "[".concat(name, "]");
     }
-    return /*#__PURE__*/React__default['default'].createElement("span", {
+    return /*#__PURE__*/React__default['default'].createElement("code", {
       className: "luckysheet-arguments-help-parameter",
       dir: "auto",
       key: name
     }, name, i !== fn.p.length - 1 && ", ");
-  })), /*#__PURE__*/React__default['default'].createElement("span", {
+  })), /*#__PURE__*/React__default['default'].createElement("code", {
     className: "luckysheet-arguments-paren"
   }, ")")), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       display: "flex",
+      justifyContent: "end",
+      width: "68px",
+      height: "20px",
+      alignItems: "center",
       gap: "4px"
     }
   }, fn.LOGO && (/*#__PURE__*/React__default['default'].createElement("img", {
     src: fn.LOGO,
     alt: "Service Logo",
-    width: 32,
-    height: 32
+    style: {
+      width: "20px"
+    }
   })), fn.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       borderRadius: "4px",
-      width: "20px",
-      height: "20px",
-      backgroundColor: "".concat(localStorage.getItem(fn.API_KEY) ? "#177E23" : "#F9A92B")
-    }
+      backgroundColor: "".concat(isKeyAdded ? "#177E23" : "#e8ebec"),
+      width: "16px",
+      height: "16px"
+    },
+    className: "flex justify-center"
   }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
     name: "Key",
     style: {
-      color: "white"
+      color: isKeyAdded ? "white" : "#77818A",
+      width: "12px",
+      height: "12px"
     }
   }))))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-content",
     style: {
-      backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA")
     }
   }, fn.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
     style: {
-      borderLeft: "4px solid ".concat(API_KEY ? "#177E23" : "#fb923c"),
+      borderLeft: "4px solid ".concat(isKeyAdded ? "#177E23" : "#fb923c"),
       backgroundColor: "white",
       padding: "16px",
       margin: "4px 4px 0px 4px",
@@ -964,25 +983,20 @@ var FormulaHint = function FormulaHint(props) {
     }
   }, /*#__PURE__*/React__default['default'].createElement("h3", {
     style: {
-      fontSize: "14px",
-      fontWeight: "600",
-      color: "#1f2937",
       margin: "0 0 8px 0"
-    }
-  }, "API key is required"), /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
+    },
+    className: "text-heading-xsm color-text-default"
+  }, isKeyAdded ? "API key provided" : "API key is required"), /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
     name: "ChevronDown",
     width: 24,
     height: 24
   })), showAPInput && (/*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("p", {
     style: {
-      color: "#6b7280",
       margin: "0 0 16px 0"
-    }
+    },
+    className: "text-body-sm color-text-default"
   }, "This function is require API key. Please paste it below and\n                  press 'Ok'."), /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      display: "flex",
-      gap: "12px"
-    }
+    className: "w-full"
   }, /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
     value: API_KEY,
     id: "function-api-key",
@@ -990,12 +1004,19 @@ var FormulaHint = function FormulaHint(props) {
     placeholder: "API key",
     onChange: function onChange(e) {
       setAPI_KEY(e.target.value);
+      setApiKeyAdded(false);
     }
-  }), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex justify-end mt-2"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
     onClick: function onClick() {
       localStorage.setItem(fn.API_KEY, API_KEY);
-    }
-  }, "Ok")))))), /*#__PURE__*/React__default['default'].createElement("div", {
+      setApiKeyAdded(true);
+      setShowAPInput(false);
+    },
+    disabled: !API_KEY,
+    className: "min-w-[80px]"
+  }, "Ok"))))))), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       backgroundColor: "white",
       padding: "6px",
@@ -1003,13 +1024,20 @@ var FormulaHint = function FormulaHint(props) {
       borderRadius: "4px"
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-formula-help-content-example"
+    className: ""
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-arguments-help-section-title example-title"
-  }, formulaMore.helpExample), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-arguments-help-formula"
+    style: {
+      lineHeight: "16px",
+      fontSize: "12px"
+    },
+    className: "text-body-sm-bold mb-1 color-text-secondary"
+  }, formulaMore.helpExample), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("code", {
+    style: {
+      overflowWrap: "break-word"
+    },
+    className: "example-value-code"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "luckysheet-arguments-help-function-name example-value"
+    className: "luckysheet-arguments-help-function-name"
   }, fn.n), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "luckysheet-arguments-paren"
   }, "("), /*#__PURE__*/React__default['default'].createElement("span", {
@@ -1022,26 +1050,32 @@ var FormulaHint = function FormulaHint(props) {
     }, param.example, i !== fn.p.length - 1 && ", ");
   })), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "luckysheet-arguments-paren"
-  }, ")"))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, ")")))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-content-detail",
     style: {
-      paddingBottom: "6px"
+      paddingBottom: "8px"
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-arguments-help-section"
+    className: ""
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-arguments-help-section-title luckysheet-arguments-help-parameter-name example-title"
+    style: {
+      lineHeight: "16px",
+      fontSize: "12px",
+      padding: "0px"
+    },
+    className: "text-body-sm-bold mb-1 mt-2 color-text-secondary"
   }, "About"), /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "luckysheet-arguments-help-parameter-content example-value"
+    className: "luckysheet-arguments-help-parameter-content text-helper-text-sm"
   }, fn.d))), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      paddingTop: "6px"
+    },
     className: "luckysheet-formula-help-content-param"
   }, fn.p.map(function (param) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "luckysheet-arguments-help-section",
+      className: "",
       key: param.name
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "luckysheet-arguments-help-section-title example-title"
-    }, param.name, param.repeat === "y" && (/*#__PURE__*/React__default['default'].createElement("span", {
+    }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("code", null, param.name, param.repeat === "y" && (/*#__PURE__*/React__default['default'].createElement("span", {
       className: "luckysheet-arguments-help-argument-info example-value",
       style: {
         marginTop: "2px"
@@ -1051,15 +1085,21 @@ var FormulaHint = function FormulaHint(props) {
       style: {
         marginTop: "2px"
       }
-    }, "-[", formulaMore.allowOptionText, "]"))), /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "luckysheet-arguments-help-parameter-content example-value",
+    }, "-[", formulaMore.allowOptionText, "]")))), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "luckysheet-arguments-help-parameter-content text-helper-text-sm",
       style: {
         marginTop: "2px"
       }
     }, param.detail));
   })))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-formula-help-foot"
-  }));
+    style: {
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      padding: "8px"
+    },
+    className: "w-full"
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "color-text-link text-helper-text-sm"
+  }, "Learn More")));
 };
 
 function usePrevious(value) {
@@ -1804,7 +1844,8 @@ var LinkEditCard = function LinkEditCard(_ref) {
     originType = _ref.originType,
     originAddress = _ref.originAddress,
     isEditing = _ref.isEditing,
-    position = _ref.position;
+    position = _ref.position,
+    selectingCellRange = _ref.selectingCellRange;
   var _useContext = React.useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
@@ -1823,24 +1864,29 @@ var LinkEditCard = function LinkEditCard(_ref) {
     setLinkType = _useState6[1];
   var _locale = fortuneCore.locale(context),
     insertLink = _locale.insertLink,
-    linkTypeList = _locale.linkTypeList;
+    linkTypeList = _locale.linkTypeList,
+    button = _locale.button;
+  var lastCell = React.useRef(fortuneCore.normalizeSelection(context, [{
+    row: [r, r],
+    column: [c, c]
+  }]));
+  var skipCellRangeSet = React.useRef(true);
   var isLinkAddressValid = fortuneCore.isLinkValid(context, linkType, linkAddress);
-  var isButtonDisabled = React.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 tooltip = /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "validation-input-tip"
+  }, isLinkAddressValid.tooltip);
   var hideLinkCard = React.useCallback(function () {
     ___default['default'].set(refs.globalCache, "linkCard.mouseEnter", false);
     setContext(function (draftCtx) {
       draftCtx.linkCard = undefined;
     });
   }, [refs.globalCache, setContext]);
+  var setRangeModalVisible = React.useCallback(function (visible) {
+    return setContext(function (draftCtx) {
+      draftCtx.luckysheet_select_save = lastCell.current;
+      if (draftCtx.linkCard != null) draftCtx.linkCard.selectingCellRange = visible;
+    });
+  }, [setContext]);
   var containerEvent = React.useMemo(function () {
     return {
       onMouseEnter: function onMouseEnter() {
@@ -1866,6 +1912,19 @@ var LinkEditCard = function LinkEditCard(_ref) {
       }
     };
   }, [refs.globalCache]);
+  var renderBottomButton = React.useCallback(function (onOk, onCancel) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "button-group"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "button-basic button-default",
+      onClick: onCancel,
+      tabIndex: 0
+    }, button.cancel), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "button-basic button-primary",
+      onClick: onOk,
+      tabIndex: 0
+    }, button.confirm));
+  }, [button]);
   var renderToolbarButton = React.useCallback(function (iconId, onClick) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
       className: "fortune-toolbar-button",
@@ -1884,6 +1943,23 @@ var LinkEditCard = function LinkEditCard(_ref) {
     setLinkText(originText);
     setLinkType(originType);
   }, [rc, originAddress, originText, originType]);
+  React.useLayoutEffect(function () {
+    if (selectingCellRange) {
+      skipCellRangeSet.current = true;
+    }
+  }, [selectingCellRange]);
+  React.useLayoutEffect(function () {
+    if (skipCellRangeSet.current) {
+      skipCellRangeSet.current = false;
+      return;
+    }
+    if (selectingCellRange) {
+      var len = ___default['default'].size(context.luckysheet_select_save);
+      if (len > 0) {
+        setLinkAddress(fortuneCore.getRangetxt(context, context.currentSheetId, context.luckysheet_select_save[len - 1], ""));
+      }
+    }
+  }, [context, selectingCellRange]);
   if (!isEditing) {
     return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, containerEvent), {}, {
       onKeyDown: function onKeyDown(e) {
@@ -1924,16 +2000,69 @@ var LinkEditCard = function LinkEditCard(_ref) {
       });
     }));
   }
-  return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2({
-    className: "fortune-link-card",
+  return selectingCellRange ? (/*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({
+    className: "fortune-link-modify-modal range-selection-modal",
+    style: {
+      left: position.cellLeft,
+      top: position.cellBottom + 5
+    }
+  }, ___default['default'].omit(containerEvent, ["onMouseDown", "onMouseMove", "onMouseUp"])), {}, {
+    onMouseDown: function onMouseDown(e) {
+      var nativeEvent = e.nativeEvent;
+      fortuneCore.onRangeSelectionModalMoveStart(context, refs.globalCache, nativeEvent);
+      e.stopPropagation();
+    }
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "modal-icon-close",
+    onClick: function onClick() {
+      return setRangeModalVisible(false);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+    name: "close"
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "modal-title"
+  }, insertLink.selectCellRange), /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
+    className: "modal-footer"
+  }, renderBottomButton(function () {
+    if (isLinkAddressValid.isValid) setRangeModalVisible(false);
+  }, function () {
+    setLinkAddress(originAddress);
+    setRangeModalVisible(false);
+  })))) : (/*#__PURE__*/React__default['default'].createElement("div", _objectSpread2({
+    className: "fortune-link-modify-modal",
     style: {
       left: position.cellLeft + 20,
       top: position.cellBottom
     }
-  }, containerEvent), /*#__PURE__*/React__default['default'].createElement(ui.Select, {
+  }, containerEvent), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-link-modify-line"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-link-modify-title"
+  }, insertLink.linkText), /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "fortune-link-modify-input",
+    spellCheck: "false",
+    autoFocus: true,
+    value: linkText,
+    onChange: function onChange(e) {
+      return setLinkText(e.target.value);
+    }
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-link-modify-line"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-link-modify-title"
+  }, insertLink.linkType), /*#__PURE__*/React__default['default'].createElement("select", {
+    className: "fortune-link-modify-select",
     value: linkType,
-    onValueChange: function onValueChange(value) {
-      if (value === "sheet") {
+    onChange: function onChange(e) {
+      if (e.target.value === "sheet") {
         if (!linkText) {
           setLinkText(context.luckysheetfile[0].name);
         }
@@ -1941,79 +2070,65 @@ var LinkEditCard = function LinkEditCard(_ref) {
       } else {
         setLinkAddress("");
       }
-      setLinkType(value);
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(ui.SelectTrigger, {
-    className: "fortune-link-type-select"
-  }, /*#__PURE__*/React__default['default'].createElement(ui.SelectValue, null)), /*#__PURE__*/React__default['default'].createElement(ui.SelectContent, {
-    className: "fortune-link-type-dropdown"
-  }, linkTypeList.filter(function (type) {
-    return type.value !== "cellrange";
-  }).map(function (type) {
-    return /*#__PURE__*/React__default['default'].createElement(ui.SelectItem, {
+      if (e.target.value === "cellrange") setRangeModalVisible(true);
+      setLinkType(e.target.value);
+    }
+  }, linkTypeList.map(function (type) {
+    return /*#__PURE__*/React__default['default'].createElement("option", {
       key: type.value,
       value: type.value
     }, type.text);
   }))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "fortune-input-with-icon"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "input-icon"
-  }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
-    name: "ALargeSmall"
-  })), /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
-    placeholder: "Display text",
-    value: linkText,
+    className: "fortune-link-modify-line"
+  }, linkType === "webpage" && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-link-modify-title"
+  }, insertLink.linkAddress), /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
+    spellCheck: "false",
+    value: linkAddress,
     onChange: function onChange(e) {
-      return setLinkText(e.target.value);
-    },
-    className: "fortune-link-input"
-  })), linkType === "webpage" && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "fortune-input-with-icon"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "input-icon"
-  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-    name: "link"
-  })), /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
-    placeholder: "Paste URL",
+      return setLinkAddress(e.target.value);
+    }
+  }), tooltip)), linkType === "cellrange" && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-link-modify-title"
+  }, insertLink.linkCell), /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "fortune-link-modify-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input"),
+    spellCheck: "false",
     value: linkAddress,
     onChange: function onChange(e) {
       return setLinkAddress(e.target.value);
+    }
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-link-modify-cell-selector",
+    onClick: function onClick() {
+      return setRangeModalVisible(true);
     },
-    className: "fortune-link-input ".concat(!linkAddress || isLinkAddressValid.isValid ? "" : "error-input")
-  }))), linkType === "sheet" && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "fortune-input-with-icon"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "input-icon"
+    tabIndex: 0
   }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-    name: "link"
-  })), /*#__PURE__*/React__default['default'].createElement(ui.Select, {
-    onValueChange: function onValueChange(value) {
-      if (!linkText) setLinkText(value);
-      setLinkAddress(value);
+    name: "border-all"
+  })), tooltip)), linkType === "sheet" && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-link-modify-title"
+  }, insertLink.linkSheet), /*#__PURE__*/React__default['default'].createElement("select", {
+    className: "fortune-link-modify-select",
+    onChange: function onChange(e) {
+      if (!linkText) setLinkText(e.target.value);
+      setLinkAddress(e.target.value);
     },
     value: linkAddress
-  }, /*#__PURE__*/React__default['default'].createElement(ui.SelectTrigger, {
-    className: "fortune-sheet-select"
-  }, /*#__PURE__*/React__default['default'].createElement(ui.SelectValue, {
-    placeholder: "[Sheet name]"
-  })), /*#__PURE__*/React__default['default'].createElement(ui.SelectContent, {
-    className: "fortune-sheet-dropdown"
   }, context.luckysheetfile.map(function (sheet) {
-    return /*#__PURE__*/React__default['default'].createElement(ui.SelectItem, {
+    return /*#__PURE__*/React__default['default'].createElement("option", {
       key: sheet.id,
       value: sheet.name
     }, sheet.name);
-  }))))), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
-    className: "fortune-insert-button",
-    disabled: isButtonDisabled,
-    onClick: function onClick() {
-      if (isButtonDisabled) return;
-      ___default['default'].set(refs.globalCache, "linkCard.mouseEnter", false);
-      setContext(function (draftCtx) {
-        return fortuneCore.saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
-      });
-    }
-  }, "Insert link"));
+  })), tooltip))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "modal-footer"
+  }, renderBottomButton(function () {
+    if (!isLinkAddressValid.isValid) return;
+    ___default['default'].set(refs.globalCache, "linkCard.mouseEnter", false);
+    setContext(function (draftCtx) {
+      return fortuneCore.saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
+    });
+  }, hideLinkCard))));
 };
 
 var FilterOptions = function FilterOptions(_ref) {
@@ -2115,11 +2230,15 @@ var FilterOptions = function FilterOptions(_ref) {
         width: undefined
       }),
       className: "luckysheet-filter-options ".concat(filterParam == null ? "" : "luckysheet-filter-options-active")
-    }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-      name: "filter",
-      width: 15,
-      height: 15
-    }));
+    }, filterParam == null ? (/*#__PURE__*/React__default['default'].createElement("div", {
+      className: "caret down"
+    })) : (/*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+      name: "filter-fill-white",
+      style: {
+        width: 15,
+        height: 15
+      }
+    })));
   })));
 };
 
@@ -3217,7 +3336,6 @@ var ConditionRules = function ConditionRules(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("span", {
     id: "checkTextColor"
   }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
-    className: "border-2",
     checked: context.conditionRules.textColor.check,
     onCheckedChange: function onCheckedChange(e) {
       var checked = e.target.checked;
@@ -3245,7 +3363,6 @@ var ConditionRules = function ConditionRules(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("span", {
     id: "checkCellColor"
   }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
-    className: "border-2",
     checked: context.conditionRules.cellColor.check,
     onCheckedChange: function onCheckedChange(e) {
       var checked = e.target.checked;
@@ -6540,9 +6657,7 @@ var Toolbar = function Toolbar(_ref) {
               justifyContent: "start"
             }
           }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-            name: iconId,
-            width: 24,
-            height: 18
+            name: iconId
           }), text))) : (/*#__PURE__*/React__default['default'].createElement(MenuDivider, {
             key: "divider-".concat(index)
           }));
@@ -6567,7 +6682,7 @@ var Toolbar = function Toolbar(_ref) {
     className: "fortune-toolbar",
     "aria-label": toolbar.toolbar
   }, settings.customToolbarItems.filter(function (n) {
-    return n.key === "import-export";
+    return n.key !== "templates";
   }).map(function (n) {
     return /*#__PURE__*/React__default['default'].createElement(CustomButton, {
       tooltip: n.tooltip,
@@ -6604,18 +6719,6 @@ var Toolbar = function Toolbar(_ref) {
       icon: n.icon,
       iconName: n.iconName
     }, n.children);
-  }), /*#__PURE__*/React__default['default'].createElement(Divider, {
-    key: "customDivider"
-  }), settings.customToolbarItems.filter(function (n) {
-    return n.key !== "templates" && n.key !== "import-export";
-  }).map(function (n) {
-    return /*#__PURE__*/React__default['default'].createElement(CustomButton, {
-      tooltip: n.tooltip,
-      onClick: n.onClick,
-      key: n.key,
-      icon: n.icon,
-      iconName: n.iconName
-    }, n.children);
   }));
 };
 
@@ -7860,8 +7963,7 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
           name: "sort-asc",
-          width: 24,
-          height: 18,
+          width: 22,
           style: {
             marginRight: "4px"
           }
@@ -7879,8 +7981,7 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
           name: "sort-desc",
-          width: 24,
-          height: 18,
+          width: 22,
           style: {
             marginRight: "4px"
           }
@@ -7936,7 +8037,7 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
           name: "filter",
-          width: 24,
+          width: 22,
           style: {
             marginRight: "4px"
           }
@@ -7954,11 +8055,9 @@ var ContextMenu = function ContextMenu() {
           }
         }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
           name: "eraser",
-          width: 24,
-          height: 22,
+          width: 22,
           style: {
-            marginRight: "4px",
-            marginLeft: "2px"
+            marginRight: "4px"
           }
         }), /*#__PURE__*/React__default['default'].createElement("p", null, filter.clearFilter))))),
         trigger: "mouseenter focus",
@@ -7969,7 +8068,7 @@ var ContextMenu = function ContextMenu() {
         className: "context-item"
       }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
         name: "filter",
-        width: 24,
+        width: 22,
         style: {
           marginRight: "4px"
         }
@@ -10393,24 +10492,23 @@ 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 = React.useMemo(function () {
     return isChecked(item.key);
   }, [isChecked, item.key]);
   return isItemVisible(item) ? (/*#__PURE__*/React__default['default'].createElement("div", {
     className: "select-item"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex items-center gap-2"
-  }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
-    className: "border-2",
+  }, /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "filter-checkbox",
+    type: "checkbox",
     checked: checked,
-    onCheckedChange: function onCheckedChange(e) {
-      onChange(item, e.target.checked);
+    onChange: function onChange() {
+      _onChange(item, !checked);
     }
-  }), /*#__PURE__*/React__default['default'].createElement("span", null, item.text)), /*#__PURE__*/React__default['default'].createElement("span", {
+  }), /*#__PURE__*/React__default['default'].createElement("div", null, item.text), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "count"
-  }, "".concat(item.rows.length)))) : null;
+  }, "( ".concat(item.rows.length, " )")))) : null;
 };
 var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
   var item = _ref2.item,
@@ -10419,7 +10517,7 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
     initialExpand = _ref2.initialExpand,
     onExpand = _ref2.onExpand,
     isChecked = _ref2.isChecked,
-    onChange = _ref2.onChange,
+    _onChange2 = _ref2.onChange,
     isItemVisible = _ref2.isItemVisible;
   var _useState = React.useState(initialExpand(item.key)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -10428,43 +10526,39 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
   var checked = React.useMemo(function () {
     return isChecked(item.key);
   }, [isChecked, item.key]);
-  return isItemVisible(item) ? (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex flex-col gap-2"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  return isItemVisible(item) ? (/*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "select-item",
     style: {
       marginLeft: -2 + depth * 20
     },
-    tabIndex: 0
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex items-center gap-2",
-    style: {
-      flex: 1
+    onClick: function onClick() {
+      onExpand === null || onExpand === void 0 ? void 0 : onExpand(item.key, !expand);
+      setExpand(!expand);
     },
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
+    tabIndex: 0
   }, ___default['default'].isEmpty(item.children) ? (/*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       width: 10
     }
-  })) : (/*#__PURE__*/React__default['default'].createElement(ui.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__default['default'].createElement("div", {
+    className: "filter-caret ".concat(expand ? "down" : "right"),
+    style: {
+      cursor: "pointer"
     }
-  })), /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
-    className: "border-2",
+  })), /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "filter-checkbox",
+    type: "checkbox",
     checked: checked,
-    onCheckedChange: function onCheckedChange(e) {
-      onChange(item, e.target.checked);
-    }
-  }), /*#__PURE__*/React__default['default'].createElement("span", null, item.text)), /*#__PURE__*/React__default['default'].createElement("span", {
+    onChange: function onChange() {
+      _onChange2(item, !checked);
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    tabIndex: 0
+  }), /*#__PURE__*/React__default['default'].createElement("div", null, item.text), /*#__PURE__*/React__default['default'].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__default['default'].createElement(_DateSelectTreeItem, _objectSpread2({
       key: v.key,
       item: v,
@@ -10473,7 +10567,7 @@ var _DateSelectTreeItem = function DateSelectTreeItem(_ref2) {
       initialExpand: initialExpand,
       onExpand: onExpand,
       isChecked: isChecked,
-      onChange: onChange,
+      onChange: _onChange2,
       isItemVisible: isItemVisible
     }));
   }))) : null;
@@ -10522,7 +10616,8 @@ var FilterMenu = function FilterMenu() {
     startCol = _ref4.startCol,
     endRow = _ref4.endRow,
     endCol = _ref4.endCol,
-    col = _ref4.col;
+    col = _ref4.col,
+    listBoxMaxHeight = _ref4.listBoxMaxHeight;
   var _locale = fortuneCore.locale(context),
     filter = _locale.filter;
   var _useState3 = React.useState({
@@ -10597,6 +10692,25 @@ var FilterMenu = function FilterMenu() {
       }));
     }, 300);
   }, [data.flattenValues]);
+  var selectAll = React.useCallback(function () {
+    setDatesUncheck([]);
+    setValuesUncheck([]);
+    hiddenRows.current = [];
+  }, []);
+  var clearAll = React.useCallback(function () {
+    setDatesUncheck(___default['default'].keys(data.dateRowMap));
+    setValuesUncheck(___default['default'].keys(data.valueRowMap));
+    hiddenRows.current = data.visibleRows;
+  }, [data.dateRowMap, data.valueRowMap, data.visibleRows]);
+  var inverseSelect = React.useCallback(function () {
+    setDatesUncheck(produce__default['default'](function (draft) {
+      return ___default['default'].xor(draft, ___default['default'].keys(data.dateRowMap));
+    }));
+    setValuesUncheck(produce__default['default'](function (draft) {
+      return ___default['default'].xor(draft, ___default['default'].keys(data.valueRowMap));
+    }));
+    hiddenRows.current = ___default['default'].xor(hiddenRows.current, data.visibleRows);
+  }, [data.dateRowMap, data.valueRowMap, data.visibleRows]);
   var onColorSelectChange = React.useCallback(function (key, color, checked) {
     setFilterColors(produce__default['default'](function (draft) {
       var colorData = ___default['default'].find(___default['default'].get(draft, key), function (v) {
@@ -10726,12 +10840,11 @@ var FilterMenu = function FilterMenu() {
     ref: containerRef,
     style: {
       left: filterContextMenu.x,
-      top: filterContextMenu.y,
-      minWidth: "280px !important"
+      top: filterContextMenu.y
     }
   }, (_settings$filterConte = settings.filterContextMenu) === null || _settings$filterConte === void 0 ? void 0 : _settings$filterConte.map(function (name, i) {
     if (name === "|") {
-      return /*#__PURE__*/React__default['default'].createElement(ui.Divider, {
+      return /*#__PURE__*/React__default['default'].createElement(Divider$1, {
         key: "divider-".concat(i)
       });
     }
@@ -10741,16 +10854,7 @@ var FilterMenu = function FilterMenu() {
         onClick: function onClick() {
           return sortData(true);
         }
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "context-item w-full"
-      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-        name: "sort-asc",
-        width: 24,
-        height: 18,
-        style: {
-          marginRight: "4px"
-        }
-      }), /*#__PURE__*/React__default['default'].createElement("p", null, filter.sortByAsc)));
+      }, filter.sortByAsc);
     }
     if (name === "sort-by-desc") {
       return /*#__PURE__*/React__default['default'].createElement(Menu, {
@@ -10758,16 +10862,7 @@ var FilterMenu = function FilterMenu() {
         onClick: function onClick() {
           return sortData(false);
         }
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "context-item w-full"
-      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-        name: "sort-desc",
-        width: 24,
-        height: 18,
-        style: {
-          marginRight: "4px"
-        }
-      }), /*#__PURE__*/React__default['default'].createElement("p", null, filter.sortByDesc)));
+      }, filter.sortByDesc);
     }
     if (name === "filter-by-color") {
       return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -10795,22 +10890,72 @@ var FilterMenu = function FilterMenu() {
         className: "filter-caret right"
       }))));
     }
+    if (name === "filter-by-condition") {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        key: "name"
+      }, /*#__PURE__*/React__default['default'].createElement(Menu, {
+        onClick: function onClick() {}
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "filter-caret right"
+      }), filter.filterByCondition), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "luckysheet-\\${menuid}-bycondition",
+        style: {
+          display: "none"
+        }
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "luckysheet-flat-menu-button luckysheet-mousedown-cancel",
+        id: "luckysheet-\\${menuid}-selected"
+      }, /*#__PURE__*/React__default['default'].createElement("span", {
+        className: "luckysheet-mousedown-cancel",
+        "data-value": "null",
+        "data-type": "0"
+      }, filter.filiterInputNone), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "luckysheet-mousedown-cancel"
+      }, /*#__PURE__*/React__default['default'].createElement("i", {
+        className: "fa fa-sort",
+        "aria-hidden": "true"
+      })))));
+    }
     if (name === "filter-by-value") {
       return /*#__PURE__*/React__default['default'].createElement("div", {
         key: name
+      }, /*#__PURE__*/React__default['default'].createElement(Menu, {
+        onClick: function onClick() {}
       }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "luckysheet-filter-byvalue flex flex-col gap-2 mt-2"
+        className: "filter-caret right"
+      }), filter.filterByValues), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "luckysheet-filter-byvalue"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "fortune-menuitem-row byvalue-btn-row"
+      }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("span", {
+        className: "fortune-byvalue-btn",
+        onClick: selectAll,
+        tabIndex: 0
+      }, filter.filterValueByAllBtn), " - ", /*#__PURE__*/React__default['default'].createElement("span", {
+        className: "fortune-byvalue-btn",
+        onClick: clearAll,
+        tabIndex: 0
+      }, filter.filterValueByClearBtn), " - ", /*#__PURE__*/React__default['default'].createElement("span", {
+        className: "fortune-byvalue-btn",
+        onClick: inverseSelect,
+        tabIndex: 0
+      }, filter.filterValueByInverseBtn)), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "byvalue-filter-icon"
+      }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+        name: "filter-fill",
+        style: {
+          width: 20,
+          height: 20
+        }
+      }))), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "filtermenu-input-container"
-      }, /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
-        leftIcon: /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
-          name: "Search",
-          size: "sm"
-        }),
+      }, /*#__PURE__*/React__default['default'].createElement("input", {
+        type: "text",
         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) {
@@ -10818,7 +10963,10 @@ var FilterMenu = function FilterMenu() {
           searchValues(e.target.value);
         }
       })), /*#__PURE__*/React__default['default'].createElement("div", {
-        id: "luckysheet-filter-byvalue-select"
+        id: "luckysheet-filter-byvalue-select",
+        style: {
+          maxHeight: listBoxMaxHeight
+        }
       }, /*#__PURE__*/React__default['default'].createElement(DateSelectTree, {
         dates: data.dates,
         onExpand: onExpand,
@@ -10840,37 +10988,6 @@ var FilterMenu = function FilterMenu() {
             return v.match(item.key) != null;
           }) > -1;
         }
-      }), /*#__PURE__*/React__default['default'].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(___default['default'].keys(data.dateRowMap));
-            setValuesUncheck(___default['default'].keys(data.valueRowMap));
-            hiddenRows.current = data.visibleRows;
-          }
-        },
-        isItemVisible: function isItemVisible() {
-          return true;
-        }
       }), data.values.map(function (v) {
         return /*#__PURE__*/React__default['default'].createElement(SelectItem, {
           key: v.key,
@@ -10880,17 +10997,14 @@ var FilterMenu = function FilterMenu() {
           },
           onChange: function onChange(item, checked) {
             var rows = hiddenRows.current;
-            if (checked) {
-              hiddenRows.current = ___default['default'].without.apply(___default['default'], [rows].concat(_toConsumableArray(item.rows)));
-              setValuesUncheck(produce__default['default'](function (draft) {
+            hiddenRows.current = checked ? ___default['default'].without.apply(___default['default'], [rows].concat(_toConsumableArray(item.rows))) : ___default['default'].concat(rows, item.rows);
+            setValuesUncheck(produce__default['default'](function (draft) {
+              if (checked) {
                 ___default['default'].pull(draft, item.key);
-              }));
-            } else {
-              hiddenRows.current = ___default['default'].concat(rows, item.rows);
-              setValuesUncheck(produce__default['default'](function (draft) {
+              } else {
                 draft.push(item.key);
-              }));
-            }
+              }
+            }));
           },
           isItemVisible: function isItemVisible(item) {
             return showValues.length === data.flattenValues.length ? true : ___default['default'].includes(showValues, item.text);
@@ -10899,49 +11013,40 @@ var FilterMenu = function FilterMenu() {
       }))));
     }
     return null;
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "fortune-menuitem-row mt-2"
-  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
-    variant: "ghost",
-    style: {
-      minWidth: "80px"
-    },
+  }), /*#__PURE__*/React__default['default'].createElement(Divider$1, null), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-menuitem-row"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "button-basic button-primary",
     onClick: function onClick() {
+      if (col == null) return;
       setContext(function (draftCtx) {
-        fortuneCore.clearFilter(draftCtx);
+        var rowHidden = ___default['default'].reduce(hiddenRows.current, function (pre, curr) {
+          pre[curr] = 0;
+          return pre;
+        }, {});
+        fortuneCore.saveFilter(draftCtx, hiddenRows.current.length > 0, rowHidden, {}, startRow, endRow, col, startCol, endCol);
+        hiddenRows.current = [];
+        draftCtx.filterContextMenu = undefined;
       });
     },
     tabIndex: 0
-  }, filter.clearFilter), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
-    variant: "secondary",
-    style: {
-      minWidth: "80px"
-    },
+  }, filter.filterConform), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "button-basic button-default",
     onClick: function onClick() {
       setContext(function (draftCtx) {
         draftCtx.filterContextMenu = undefined;
       });
     },
     tabIndex: 0
-  }, filter.filterCancel), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
-    variant: "default",
-    style: {
-      minWidth: "80px"
-    },
+  }, filter.filterCancel), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "button-basic button-danger",
     onClick: function onClick() {
-      if (col == null) return;
       setContext(function (draftCtx) {
-        var rowHidden = ___default['default'].reduce(hiddenRows.current, function (pre, curr) {
-          pre[curr] = 0;
-          return pre;
-        }, {});
-        fortuneCore.saveFilter(draftCtx, hiddenRows.current.length > 0, rowHidden, {}, startRow, endRow, col, startCol, endCol);
-        hiddenRows.current = [];
-        draftCtx.filterContextMenu = undefined;
+        fortuneCore.clearFilter(draftCtx);
       });
     },
     tabIndex: 0
-  }, filter.filterConfirm))), showSubMenu && (/*#__PURE__*/React__default['default'].createElement("div", {
+  }, filter.clearFilter))), showSubMenu && (/*#__PURE__*/React__default['default'].createElement("div", {
     ref: subMenuRef,
     className: "luckysheet-filter-bycolor-submenu",
     style: subMenuPos,
@@ -10981,7 +11086,7 @@ var FilterMenu = function FilterMenu() {
       });
     },
     tabIndex: 0
-  }, filter.filterConfirm))))));
+  }, filter.filterConform))))));
 };
 
 var SheetHiddenButton = function SheetHiddenButton(_ref) {