@fileverse-dev/fortune-react 1.1.99-patch-2 → 1.2.0-patch-1

package/lib/components/DataVerification/RangeDialog.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _fortuneCore = require("@fileverse-dev/fortune-core");
 var _ui = require("@fileverse/ui");
 var _react = _interopRequireWildcard(require("react"));
-var _ = _interopRequireDefault(require("."));
 var _context = _interopRequireDefault(require("../../context"));
 var _useDialog = require("../../hooks/useDialog");
 var _ConditionRules = _interopRequireDefault(require("../ConditionFormat/ConditionRules"));
@@ -23,8 +22,7 @@ var RangeDialog = function RangeDialog() {
   var showDialog = (0, _useDialog.useDialog)().showDialog;
   var _b = (0, _fortuneCore.locale)(context),
     dataVerification = _b.dataVerification,
-    button = _b.button,
-    toolbar = _b.toolbar;
+    button = _b.button;
   var _c = (0, _react.useState)((0, _getDisplayedRangeTxt.getDisplayedRangeTxt)(context)),
     rangeTxt2 = _c[0],
     setRangeTxt2 = _c[1];
@@ -46,9 +44,7 @@ var RangeDialog = function RangeDialog() {
       showDialog(/*#__PURE__*/_react.default.createElement(_ConditionRules.default, {
         type: rulesType
       }), undefined, (0, _fortuneCore.locale)(context).conditionformat["conditionformat_".concat(rulesType)]);
-      return;
     }
-    showDialog(/*#__PURE__*/_react.default.createElement(_.default, null), undefined, toolbar.dataVerification);
   }, [setContext, showDialog, context]);
   (0, _react.useEffect)(function () {
     setRangeTxt2((0, _getDisplayedRangeTxt.getDisplayedRangeTxt)(context));

package/lib/components/DataVerification/index.css

@@ -202,5 +202,25 @@
 }
 
 .color-picker:hover {
-  background: hsl(var(--color-bg-default-hover, #F2F4F5));
+  background: hsl(var(--color-bg-default-hover, #F2F4F5))!important;
+}
+
+.color-picker-container {
+  border: 1px solid hsl(var(--color-border-default, #E8EBEC)) !important;
+  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.15);
+  width: 230px !important;
+}
+
+.color-picker-reset {
+  min-width: 0px !important;
+  padding-left: 0px !important;
+  margin-left: 0px !important;
+}
+
+.color-picker-reset:hover {
+  background-color: white!important;
+}
+
+.color-picker-icon:hover {
+  background-color: white!important;
 }

package/lib/components/DataVerification/index.js

@@ -93,6 +93,14 @@ var DataVerification = function DataVerification() {
       }));
     }
   }, []);
+  var dataSelectRange = (0, _react.useCallback)(function (type, value) {
+    hideDialog();
+    setContext(function (ctx) {
+      ctx.rangeDialog.show = true;
+      ctx.rangeDialog.type = type;
+      ctx.rangeDialog.rangeTxt = value;
+    });
+  }, [hideDialog, setContext]);
   var btn = (0, _react.useCallback)(function (type) {
     if (type === "confirm") {
       setContext(function (ctx) {
@@ -219,7 +227,7 @@ var DataVerification = function DataVerification() {
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "fortune-data-verification"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex flex-col gap-4",
+    className: "flex flex-col gap-4 h-[calc(100vh-270px)] overflow-y-auto no-scrollbar",
     style: {
       width: "345px",
       padding: "16px"
@@ -235,7 +243,19 @@ var DataVerification = function DataVerification() {
     }),
     "aria-hidden": "true",
     readOnly: true,
-    value: (_a = context.dataVerification.dataRegulation) === null || _a === void 0 ? void 0 : _a.rangeTxt
+    value: (_a = context.dataVerification.dataRegulation) === null || _a === void 0 ? void 0 : _a.rangeTxt,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.dataVerification.dataRegulation.rangeTxt = value;
+      });
+    },
+    onClick: function onClick() {
+      var _a;
+      (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
+      hideDialog();
+      dataSelectRange("rangeTxt", context.dataVerification.dataRegulation.value1);
+    }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -280,7 +300,7 @@ var DataVerification = function DataVerification() {
       });
     }
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "ml-2"
+    className: "ml-2 text-body-sm"
   }, dataVerification.allowMultiSelect)))), ((_e = (_d = context.dataVerification) === null || _d === void 0 ? void 0 : _d.dataRegulation) === null || _e === void 0 ? void 0 : _e.type) === "checkbox" && (/*#__PURE__*/_react.default.createElement("div", {
     className: "mt-4 space-y-2"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -396,7 +416,7 @@ var DataVerification = function DataVerification() {
         });
       }
     }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "ml-2"
+      className: "ml-2 text-body-sm"
     }, dataVerification[v]));
   }), ((_o = (_m = context.dataVerification) === null || _m === void 0 ? void 0 : _m.dataRegulation) === null || _o === void 0 ? void 0 : _o.hintShow) && (/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
     placeholder: dataVerification.placeholder5,
@@ -408,7 +428,11 @@ var DataVerification = function DataVerification() {
       });
     }
   }))))), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
-    className: "w-full border-t-[1px] my-4"
+    className: "border-t-[1px]",
+    style: {
+      width: "315px",
+      margin: "0 16px 16px 16px"
+    }
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "flex gap-2 justify-between items-center",
     style: {
@@ -432,7 +456,9 @@ var DataVerification = function DataVerification() {
       minWidth: "80px"
     },
     onClick: function onClick() {
+      var _a;
       btn("confirm");
+      (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
     }
   }, button.confirm))));
 };

package/lib/components/SheetOverlay/ColumnHeader.js

@@ -82,13 +82,13 @@ var ColumnHeader = function ColumnHeader() {
     }]);
   }, [context, hoverLocation.col_index, refs.globalCache.freezen]);
   var onMouseDown = (0, _react.useCallback)(function (e) {
-    if (e.button === 0 && e.target.tagName === "use") {
+    if (e.button === 0 && e.target.tagName === "use" || e.button === 2) {
       var nativeEvent_1 = e.nativeEvent;
       setContext(function (draft) {
         (0, _fortuneCore.handleColumnHeaderMouseDown)(draft, refs.globalCache, nativeEvent_1, containerRef.current, refs.cellInput.current, refs.fxInput.current);
       });
     }
-    if (e.button !== 0) return;
+    if (e.button !== 0 || context.isFlvReadOnly) return;
     var targetEl = e.target;
     if (targetEl.closest(".fortune-cols-change-size") || targetEl.closest(".fortune-cols-freeze-handle") || targetEl.closest(".header-arrow")) return;
     var headerEl = containerRef.current;
@@ -163,6 +163,44 @@ var ColumnHeader = function ColumnHeader() {
     }
     setSelectedLocation(selects);
   }, [context.luckysheet_select_save, context.visibledatacolumn]);
+  var _g = (0, _react.useState)([]),
+    hiddenPointers = _g[0],
+    setHiddenPointers = _g[1];
+  (0, _react.useEffect)(function () {
+    var _a, _b;
+    if (sheetIndex == null) return;
+    var tempPointers = [];
+    var colhidden = (_b = (_a = context.luckysheetfile[sheetIndex]) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.colhidden;
+    if (colhidden) {
+      Object.keys(colhidden).forEach(function (key) {
+        var item = {
+          col: key,
+          left: context.visibledatacolumn[Number(key) - 1]
+        };
+        tempPointers.push(item);
+      });
+      console.log(tempPointers);
+      setHiddenPointers(tempPointers);
+    } else {
+      setHiddenPointers([]);
+    }
+  }, [context.visibledatacolumn, sheetIndex]);
+  var showColumn = function showColumn(e, item) {
+    if (context.isFlvReadOnly) return;
+    e.stopPropagation();
+    setContext(function (ctx) {
+      var _a;
+      _fortuneCore.api.setSelection(ctx, [{
+        row: [0, (_a = context.visibledatarow) === null || _a === void 0 ? void 0 : _a.length],
+        column: [Number(item.col) - 1, Number(item.col) + 1]
+      }], {
+        id: context.currentSheetId
+      });
+    });
+    setContext(function (ctx) {
+      (0, _fortuneCore.showSelected)(ctx, "column");
+    });
+  };
   (0, _react.useEffect)(function () {
     containerRef.current.scrollLeft = context.scrollLeft;
   }, [context.scrollLeft]);
@@ -185,7 +223,51 @@ var ColumnHeader = function ColumnHeader() {
         };
       });
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, hiddenPointers.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "flex gap-4 cursor-pointer hide-btn align-center",
+      style: {
+        height: context.columnHeaderHeight - 12,
+        left: "".concat(item.left - 12, "px")
+      },
+      onClick: function onClick(e) {
+        return showColumn(e, item);
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: ""
+    }, /*#__PURE__*/_react.default.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "5",
+      height: "8",
+      viewBox: "0 0 5 8",
+      fill: "none"
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M0.164574 4.20629L3.54376 7.58548C3.7275 7.76922 4.04167 7.63909 4.04167 7.37924L4.04167 0.620865C4.04167 0.361018 3.7275 0.230885 3.54376 0.414625L0.164575 3.79381C0.0506717 3.90772 0.0506715 4.09239 0.164574 4.20629Z",
+      fill: "#363B3F"
+    }))));
+  }), hiddenPointers.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "flex gap-4 cursor-pointer hide-btn align-center",
+      style: {
+        height: context.columnHeaderHeight - 12,
+        left: "".concat(item.left + 6, "px")
+      },
+      onClick: function onClick(e) {
+        return showColumn(e, item);
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: ""
+    }, /*#__PURE__*/_react.default.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "5",
+      height: "8",
+      viewBox: "0 0 5 8",
+      fill: "none"
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M4.68811 4.35359L1.81188 7.22982C1.4969 7.5448 0.958328 7.32172 0.958328 6.87627L0.958328 1.12381C0.958328 0.678362 1.4969 0.455279 1.81188 0.770261L4.68811 3.64649C4.88337 3.84175 4.88337 4.15833 4.68811 4.35359Z",
+      fill: "#363B3F"
+    }))));
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "fortune-cols-freeze-handle",
     onMouseDown: onColFreezeHandleMouseDown,
     style: {
@@ -208,7 +290,7 @@ var ColumnHeader = function ColumnHeader() {
       display: "block"
     }, (0, _fortuneCore.fixColumnStyleOverflowInFreeze)(context, hoverLocation.col_index, hoverLocation.col_index, (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId]))
   }, allowEditRef.current && (/*#__PURE__*/_react.default.createElement("span", {
-    className: "header-arrow",
+    className: "header-arrow mr-2",
     onClick: function onClick(e) {
       setContext(function (ctx) {
         ctx.contextMenu = {
@@ -232,13 +314,12 @@ var ColumnHeader = function ColumnHeader() {
       c1 = _a.c1,
       c2 = _a.c2;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "fortune-col-header-selected",
+      className: "fortune-col-header-selected color-bg-tertiary",
       key: i,
       style: _lodash.default.assign({
         left: col_pre,
         width: col - col_pre - 1,
         display: "block",
-        backgroundColor: "#EFC703",
         mixBlendMode: "multiply"
       }, (0, _fortuneCore.fixColumnStyleOverflowInFreeze)(context, c1, c2, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]))
     });

package/lib/components/SheetOverlay/FormulaHint/index.js

@@ -75,6 +75,17 @@ var FormulaHint = function FormulaHint(props) {
     var divOffset = ((_d = hintRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
     setTop(hintAbove ? selectionHeight - (divOffset + 30) : selectionHeight + 4);
   };
+  var hexToRgbString = function hexToRgbString(hex) {
+    hex = hex.replace("#", "");
+    var r = parseInt(hex.substring(0, 2), 16);
+    var g = parseInt(hex.substring(2, 4), 16);
+    var b = parseInt(hex.substring(4, 6), 16);
+    return "".concat(r, ", ").concat(g, ", ").concat(b);
+  };
+  var bgColor = function bgColor(BRAND_SECONDARY_COLOR) {
+    var bg = BRAND_SECONDARY_COLOR ? "rgb(".concat(hexToRgbString(BRAND_SECONDARY_COLOR), ", 0.4)") : "#FFDF0A";
+    return bg;
+  };
   (0, _react.useEffect)(function () {
     calcuatePopUpPlacement();
   }, []);
@@ -198,7 +209,7 @@ var FormulaHint = function FormulaHint(props) {
       dir: "auto",
       key: name,
       style: {
-        backgroundColor: commaCount === i ? (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) || "#FFDF0A" : "transparent"
+        backgroundColor: commaCount === i ? bgColor(fn.BRAND_SECONDARY_COLOR) : "transparent"
       }
     }, name, i !== fn.p.length - 1 && ", ");
   })), /*#__PURE__*/_react.default.createElement("code", {
@@ -374,7 +385,7 @@ var FormulaHint = function FormulaHint(props) {
     }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("code", {
       className: "font-family-mono mb-1 mt-2 color-text-default font-family-mono",
       style: {
-        backgroundColor: commaCount === index ? (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) || "#FFDF0A" : "transparent"
+        backgroundColor: commaCount === index ? bgColor(fn.BRAND_SECONDARY_COLOR) : "transparent"
       }
     }, param.name, param.repeat === "y" && (/*#__PURE__*/_react.default.createElement("span", {
       className: "luckysheet-arguments-help-argument-info example-value",

package/lib/components/SheetOverlay/FormulaSearch/index.css

@@ -6,7 +6,6 @@
   background: #fff;
   z-index: 1003;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  border: 1px solid lavender;
   border-radius: 10px;
 }
 

package/lib/components/SheetOverlay/FormulaSearch/index.js

@@ -62,7 +62,7 @@ var FormulaSearch = function FormulaSearch(props) {
   });
   if (_lodash.default.isEmpty(context.functionCandidates) && _lodash.default.isEmpty(context.defaultCandidates)) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex flex-col luckysheet-formula-search-c-p custom-scroll",
+    className: "flex color-border-default border flex-col luckysheet-formula-search-c-p custom-scroll",
     id: "luckysheet-formula-search-c-p",
     style: {
       top: top

package/lib/components/SheetOverlay/RowHeader.js

@@ -76,7 +76,13 @@ var RowHeader = function RowHeader() {
     getRowIndexClicked = _f.getRowIndexClicked,
     isRowDoubleClicked = _f.isRowDoubleClicked;
   var onMouseDown = (0, _react.useCallback)(function (e) {
-    if (e.button !== 0) return;
+    if (e.button === 0 && e.target.tagName === "use" || e.button === 2) {
+      var nativeEvent_1 = e.nativeEvent;
+      setContext(function (draft) {
+        (0, _fortuneCore.handleRowHeaderMouseDown)(draft, refs.globalCache, nativeEvent_1, containerRef.current, refs.cellInput.current, refs.fxInput.current);
+      });
+    }
+    if (e.button !== 0 || context.isFlvReadOnly) return;
     var targetEl = e.target;
     if (targetEl.closest(".fortune-rows-change-size") || targetEl.closest(".fortune-rows-freeze-handle")) return;
     var headerEl = containerRef.current;
@@ -88,9 +94,9 @@ var RowHeader = function RowHeader() {
         draft.luckysheet_scroll_status = true;
       });
     } else {
-      var nativeEvent_1 = e.nativeEvent;
+      var nativeEvent_2 = e.nativeEvent;
       setContext(function (draft) {
-        (0, _fortuneCore.handleRowHeaderMouseDown)(draft, refs.globalCache, nativeEvent_1, containerRef.current, refs.cellInput.current, refs.fxInput.current);
+        (0, _fortuneCore.handleRowHeaderMouseDown)(draft, refs.globalCache, nativeEvent_2, containerRef.current, refs.cellInput.current, refs.fxInput.current);
       });
       return;
     }
@@ -156,6 +162,43 @@ var RowHeader = function RowHeader() {
     }
     setSelectedLocation(selects);
   }, [context.luckysheet_select_save, context.visibledatarow]);
+  var _g = (0, _react.useState)([]),
+    hiddenPointers = _g[0],
+    setHiddenPointers = _g[1];
+  (0, _react.useEffect)(function () {
+    var _a, _b;
+    if (sheetIndex == null) return;
+    var tempPointers = [];
+    var rowhidden = (_b = (_a = context.luckysheetfile[sheetIndex]) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.rowhidden;
+    if (rowhidden) {
+      Object.keys(rowhidden).forEach(function (key) {
+        var item = {
+          row: key,
+          top: context.visibledatarow[Number(key) - 1]
+        };
+        tempPointers.push(item);
+      });
+      setHiddenPointers(tempPointers);
+    } else {
+      setHiddenPointers([]);
+    }
+  }, [context.visibledatarow, sheetIndex]);
+  var showRow = function showRow(e, item) {
+    if (context.isFlvReadOnly) return;
+    e.stopPropagation();
+    setContext(function (ctx) {
+      var _a;
+      _fortuneCore.api.setSelection(ctx, [{
+        row: [Number(item.row) - 1, Number(item.row) + 1],
+        column: [0, (_a = context.visibledatacolumn) === null || _a === void 0 ? void 0 : _a.length]
+      }], {
+        id: context.currentSheetId
+      });
+    });
+    setContext(function (ctx) {
+      (0, _fortuneCore.showSelected)(ctx, "row");
+    });
+  };
   (0, _react.useEffect)(function () {
     containerRef.current.scrollTop = context.scrollTop;
   }, [context.scrollTop]);
@@ -170,7 +213,40 @@ var RowHeader = function RowHeader() {
     onMouseDown: onMouseDown,
     onMouseLeave: onMouseLeave,
     onContextMenu: onContextMenu
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, hiddenPointers.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "flex flex-col gap-4 cursor-pointer align-center hide-btn-row hide-btn",
+      style: {
+        top: "".concat(item.top - 16, "px"),
+        zIndex: 100
+      },
+      onClick: function onClick(e) {
+        return showRow(e, item);
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "rotate-row-icon"
+    }, /*#__PURE__*/_react.default.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "5",
+      height: "8",
+      viewBox: "0 0 5 8",
+      fill: "none"
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M0.164574 4.20629L3.54376 7.58548C3.7275 7.76922 4.04167 7.63909 4.04167 7.37924L4.04167 0.620865C4.04167 0.361018 3.7275 0.230885 3.54376 0.414625L0.164575 3.79381C0.0506717 3.90772 0.0506715 4.09239 0.164574 4.20629Z",
+      fill: "#363B3F"
+    }))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "rotate-90"
+    }, /*#__PURE__*/_react.default.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "5",
+      height: "8",
+      viewBox: "0 0 5 8",
+      fill: "none"
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M0.164574 4.20629L3.54376 7.58548C3.7275 7.76922 4.04167 7.63909 4.04167 7.37924L4.04167 0.620865C4.04167 0.361018 3.7275 0.230885 3.54376 0.414625L0.164575 3.79381C0.0506717 3.90772 0.0506715 4.09239 0.164574 4.20629Z",
+      fill: "#363B3F"
+    }))));
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "fortune-rows-freeze-handle",
     onMouseDown: onRowFreezeHandleMouseDown,
     style: {
@@ -198,13 +274,12 @@ var RowHeader = function RowHeader() {
       r1 = _a.r1,
       r2 = _a.r2;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "fortune-row-header-selected",
+      className: "fortune-row-header-selected color-bg-tertiary",
       key: i,
       style: _lodash.default.assign({
         top: row_pre,
         height: row - row_pre - 1,
         display: "block",
-        backgroundColor: "#EFC703",
         mixBlendMode: "multiply"
       }, (0, _fortuneCore.fixRowStyleOverflowInFreeze)(context, r1, r2, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]))
     });

package/lib/components/SheetOverlay/index.css

@@ -45,12 +45,10 @@
 .fortune-row-header-selected {
   position: absolute;
   z-index: 10;
-  border-right: 1px solid #0188fb;
   right: 0;
   width: 100%;
   margin-top: 2px;
   display: none;
-  background-color: rgba(76, 76, 76, 0.1);
 }
 
 .fortune-col-header-wrap {
@@ -94,12 +92,10 @@
   cursor: default;
   position: absolute;
   z-index: 10;
-  border-bottom: 1px solid #0188fb;
   bottom: 0;
   height: 100%;
   margin-left: 0px;
   display: none;
-  background-color: rgba(76, 76, 76, 0.1);
 }
 
 .fortune-left-top {
@@ -137,7 +133,7 @@
   z-index: 14;
   /*border:1px solid #fff;*/
   margin: 0px 0 0 0px;
-  background: rgba(0, 80, 208, 0.15);
+  /* background: rgba(0, 80, 208, 0.15); */
   display: none;
 }
 
@@ -199,7 +195,7 @@
   z-index: 15;
   border: 2.5px solid #efc703;
   margin: -1px 0 0 -1px;
-  background: rgba(1, 136, 251, 0.15);
+  background: rgba(239, 199, 5, 0.02);
   display: none;
   box-sizing: content-box;
 }
@@ -1010,4 +1006,27 @@
   background: #555;
   /* darker on hover */
   /* scrollbar */
-}
+}
+
+.hide-btn {
+  padding-top: 1px;
+  position: absolute;
+  right: 5;
+  top: 5px;
+  z-index: 200;
+  width: 9px;
+}
+
+.hide-btn:hover {
+  border: 1px solid #0188fb;
+}
+
+.rotate-row-icon {
+  transform: rotate(-90deg);
+}
+
+.hide-btn-row {
+  position: absolute;
+   left: 4px;
+  z-index: 200;
+}

package/lib/components/Toolbar/Combo.js

@@ -58,7 +58,10 @@ var Combo = function Combo(_a) {
     height: 16
   })) : (/*#__PURE__*/_react.default.createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text !== undefined ? text : ""))))) : (/*#__PURE__*/_react.default.createElement("span", null, iconId === "font-color" ? (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+  }, text !== undefined ? text : "")), /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    className: "w-[16px] h-[16px]",
+    name: "ChevronDown"
+  })))) : (/*#__PURE__*/_react.default.createElement("span", null, iconId === "font-color" ? (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
     text: tooltip,
     placement: "bottom"
   }, /*#__PURE__*/_react.default.createElement(_ui.Button, {

package/lib/components/Toolbar/index.css

@@ -141,12 +141,24 @@
 
 .fortune-toolbar-combo-button {
   font-size: 12px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 4px;
+  gap: 8px;
+}
+.fortune-toolbar-combo-button:hover {
+  background: hsl(var(--color-bg-default-hover));
 }
 
 .fortune-toolbar-select-option {
   font-size: 12px;
   min-width: 60px;
-  padding: 8px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 6px;
+  padding-bottom: 6px;
   cursor: pointer;
   user-select: none;
 }
@@ -171,6 +183,10 @@
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
+  max-width: 56px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .fortune-toolbar-color-picker-item {

package/lib/components/Toolbar/index.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { Cell } from "@fileverse-dev/fortune-core";
 import "./index.css";
-export declare const getLucideIcon: (title: string) => "Ethereum" | "DollarSign" | "" | "ChevronDown" | "Undo" | "Redo" | "Underline" | "Border" | "Filter" | "Link" | "Search" | "Percent" | "PaintRoller" | "Bold" | "Italic" | "Strikethrough" | "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "Baseline" | "PaintBucket" | "MergeHorizontal" | "DecimalsArrowLeft" | "DecimalsArrowRight" | "PaintbrushVertical" | "MessageSquarePlus" | "Image" | "Sigma" | "ShieldCheck" | "DuneChart" | "Ellipsis";
+export declare const getLucideIcon: (title: string) => "Ethereum" | "DollarSign" | "" | "ChevronDown" | "Undo" | "Redo" | "PaintRoller" | "Bold" | "Italic" | "Strikethrough" | "Underline" | "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "Baseline" | "PaintBucket" | "Border" | "MergeHorizontal" | "Percent" | "DecimalsArrowLeft" | "DecimalsArrowRight" | "PaintbrushVertical" | "Filter" | "Link" | "MessageSquarePlus" | "Image" | "Sigma" | "ShieldCheck" | "Search" | "DuneChart" | "Ellipsis";
 export declare const CurrencySelector: ({ cell, defaultTextFormat, toolTipText, }: {
     cell: Cell | null | undefined;
     defaultTextFormat: string;

package/lib/components/Toolbar/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.getLucideIcon = exports.default = exports.CurrencySelector = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _fortuneCore = require("@fileverse-dev/fortune-core");
-var _api = require("@fileverse-dev/fortune-core/src/api");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _ui = require("@fileverse/ui");
 var _dataVerificationPortal = _interopRequireDefault(require("./dataVerificationPortal"));
@@ -594,9 +593,35 @@ var Toolbar = function Toolbar(_a) {
       }
     }
   }, [itemLocations, setMoreItems, settings.toolbarItems.length, sheetWidth, isDesktop]);
+  (0, _react.useEffect)(function () {
+    setContext(function (ctx) {
+      ctx.dataVerification.dataRegulation.value1 = "value1";
+    });
+  }, []);
   var _o = (0, _react.useState)(false),
     showDataValidation = _o[0],
     setShowDataValidation = _o[1];
+  var dataVerificationClick = function dataVerificationClick() {
+    var _a;
+    var selection = _fortuneCore.api.getSelection(context);
+    if (!selection) {
+      setContext(function (ctx) {
+        _fortuneCore.api.setSelection(ctx, [{
+          row: [0, 0],
+          column: [0, 0]
+        }], {
+          id: context.currentSheetId
+        });
+      });
+    }
+    (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
+    setTimeout(function () {
+      setShowDataValidation(true);
+    }, 100);
+  };
+  (0, _react.useEffect)(function () {
+    window.dataVerificationClick = dataVerificationClick;
+  }, []);
   var getToolbarItem = (0, _react.useCallback)(function (name, i) {
     var _a, _b, _c, _d, _e, _f, _g;
     var tooltip = toolbar[name];
@@ -979,24 +1004,7 @@ var Toolbar = function Toolbar(_a) {
         iconId: name,
         tooltip: tooltip,
         key: name,
-        onClick: function onClick() {
-          var _a;
-          var selection = (0, _api.getSelection)(context);
-          if (!selection) {
-            setContext(function (ctx) {
-              (0, _api.setSelection)(ctx, [{
-                row: [0, 0],
-                column: [0, 0]
-              }], {
-                id: context.currentSheetId
-              });
-            });
-          }
-          (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
-          setTimeout(function () {
-            setShowDataValidation(true);
-          }, 100);
-        }
+        onClick: dataVerificationClick
       }));
     }
     if (name === "locationCondition") {