@fileverse-dev/fortune-react 1.0.2-mod-55-safe-patch-1 → 1.0.2-mod-57

package/dist/index.js

@@ -281,6 +281,15 @@ function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -4446,26 +4455,25 @@ var Button = function Button(_ref) {
     selected = _ref.selected,
     children = _ref.children,
     style = _ref.style;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement(ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "fortune-toolbar-button fortune-toolbar-item",
     onClick: onClick,
     tabIndex: 0,
-    "data-tips": tooltip,
     role: "button",
-    "aria-label": tooltip,
     style: selected ? {
       backgroundColor: "#E7E5EB"
     } : style
-  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-    name: iconId,
+  }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
+    name: getLucideIcon(iconId),
     width: 16,
     height: 16,
     style: disabled ? {
       opacity: 0.3
     } : {}
-  }), tooltip && /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "fortune-tooltip"
-  }, tooltip), children);
+  }), children));
 };
 
 var Divider = function Divider() {
@@ -4503,7 +4511,7 @@ var Combo = function Combo(_ref) {
   var popupRef = React.useRef(null);
   var buttonRef = React.useRef(null);
   var isLucideIcon = React.useMemo(function () {
-    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip"].includes(iconId);
+    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip", "font-color", "background", "border-all", "merge-all", "format", "conditionFormat", "filter", "comment", "image", "formula-sum", "dune", "template"].includes(iconId);
   }, [iconId]);
   useOutsideClick(popupRef, function () {
     setOpen(false);
@@ -4532,7 +4540,10 @@ var Combo = function Combo(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     ref: buttonRef,
     className: "fortune-toolbar-combo"
-  }, !isLucideIcon ? (/*#__PURE__*/React__default['default'].createElement("div", {
+  }, !isLucideIcon ? (/*#__PURE__*/React__default['default'].createElement(ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "fortune-toolbar-combo-button",
     onClick: function onClick(e) {
       if (_onClick) {
@@ -4543,9 +4554,7 @@ var Combo = function Combo(_ref) {
       }
     },
     tabIndex: 0,
-    "data-tips": tooltip,
     role: "button",
-    "aria-label": "".concat(tooltip, ": ").concat(text !== undefined ? text : ""),
     style: style
   }, iconId ? (/*#__PURE__*/React__default['default'].createElement(SVGIcon, {
     name: iconId,
@@ -4553,29 +4562,29 @@ var Combo = function Combo(_ref) {
     height: 16
   })) : (/*#__PURE__*/React__default['default'].createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text !== undefined ? text : "")))) : (/*#__PURE__*/React__default['default'].createElement(ui.IconButton, {
-    icon: getIcon(iconId),
+  }, text !== undefined ? text : ""))))) : (/*#__PURE__*/React__default['default'].createElement(ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.IconButton, {
+    icon: getLucideIcon(iconId),
     variant: "ghost",
     onClick: function onClick() {
       return setOpen(!open);
-    }
-  })), showArrow && (/*#__PURE__*/React__default['default'].createElement("div", {
+    },
+    className: showArrow ? "fortune-toolbar-combo-button show-arrow" : ""
+  }))), showArrow && (/*#__PURE__*/React__default['default'].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__default['default'].createElement(ui.LucideIcon, {
     name: "ChevronDown",
     width: 14,
     height: 14
-  }))), tooltip && /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "fortune-tooltip"
-  }, tooltip)), open && (/*#__PURE__*/React__default['default'].createElement("div", {
+  })))), open && (/*#__PURE__*/React__default['default'].createElement("div", {
     ref: popupRef,
     className: "fortune-toolbar-combo-popup",
     style: popupPosition
@@ -4731,7 +4740,8 @@ var SplitColumn = function SplitColumn() {
     tabIndex: 0
   }), /*#__PURE__*/React__default['default'].createElement("label", {
     htmlFor: "other"
-  }, "Custom"), /*#__PURE__*/React__default['default'].createElement("input", {
+  }, "Custom"), /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
+    placeholder: "Custom separator",
     id: "otherValue",
     name: "otherValue",
     type: "text",
@@ -5258,11 +5268,13 @@ var CustomButton = function CustomButton(_ref) {
     children = _ref.children,
     iconName = _ref.iconName,
     icon = _ref.icon;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement(ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "fortune-toolbar-button fortune-toolbar-item",
     onClick: onClick,
     tabIndex: 0,
-    "data-tips": tooltip,
     role: "button",
     style: selected ? {
       backgroundColor: "#E7E5EB"
@@ -5272,9 +5284,7 @@ var CustomButton = function CustomButton(_ref) {
     height: 16,
     iconName: iconName,
     content: icon
-  }), tooltip && /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "fortune-tooltip"
-  }, tooltip), children);
+  }), children));
 };
 
 var palette = [["#000000", "#444444", "#666666", "#999999", "#B7B7B7", "#cccccc", "#D9D9D9", "#EFEFEF", "#f3f3f3", "#ffffff"], ["#970007", "#FE0012", "#FE9728", "#FFFD40", "#27FD3C", "#21FFFF", "#4A89E4", "#0027F9", "#9726FA", "#FD23FA"], ["#E6B8B0", "#f4cccc", "#FCE5CF", "#FFF1CF", "#DAEAD4", "#D0E0E3", "#C9DBF7", "#CFE3F2", "#D9D3E8", "#EAD1DC"], ["#DC7D6D", "#E9999A", "#F9CAA0", "#FFE49F", "#B7D6AB", "#A3C4C9", "#A4C3F2", "#A0C6E6", "#B4A8D4", "#D5A7BC"], ["#CB402B", "#DF6668", "#F6B171", "#FFD871", "#95C382", "#77A6AF", "#6DA0E8", "#70AADA", "#8E7EC0", "#C17C9F"], ["#A51A0A", "#CB000C", "#E59043", "#F1C046", "#6CA756", "#46828D", "#3C7BD4", "#3E87C3", "#6651A4", "#A54E78"], ["#841F11", "#980007", "#B35E19", "#BF8F22", "#3A7527", "#15505B", "#0E5AC8", "#0B5592", "#0B5592", "#731C46"], ["#5B0E03", "#660003", "#783E0E", "#7F5F13", "#284E19", "#0D343D", "#1C4785", "#073961", "#1F154B", "#4C112F"]];
@@ -5540,8 +5550,33 @@ var DuneChartsInputModal = function DuneChartsInputModal(_ref) {
   }, submitText)))));
 };
 
-var getIcon = function getIcon(title) {
+var MoreItemsContaier = function MoreItemsContaier(_ref) {
+  var onClose = _ref.onClose,
+    children = _ref.children;
+  var containerRef = React.useRef(null);
+  useOutsideClick(containerRef, function () {
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [containerRef, onClose]);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: containerRef,
+    className: "fortune-toolbar-more-container"
+  }, children);
+};
+
+var getLucideIcon = function getLucideIcon(title) {
   switch (title) {
+    case "undo":
+      return "Undo";
+    case "redo":
+      return "Redo";
+    case "bold":
+      return "Bold";
+    case "italic":
+      return "Italic";
+    case "strike-through":
+      return "Strikethrough";
+    case "underline":
+      return "Underline";
     case "align-left":
       return "AlignLeft";
     case "align-center":
@@ -5560,6 +5595,44 @@ var getIcon = function getIcon(title) {
       return "WrapText";
     case "text-clip":
       return "TextClip";
+    case "font-color":
+      return "Baseline";
+    case "background":
+      return "PaintBucket";
+    case "border-all":
+      return "Border";
+    case "merge-all":
+      return "MergeHorizontal";
+    case "format":
+      return "JapaneseYen";
+    case "currency-format":
+      return "JapaneseYen";
+    case "percentage-format":
+      return "Percent";
+    case "number-decrease":
+      return "DecimalsArrowLeft";
+    case "number-increase":
+      return "DecimalsArrowRight";
+    case "conditionFormat":
+      return "PaintbrushVertical";
+    case "filter":
+      return "Filter";
+    case "link":
+      return "Link";
+    case "comment":
+      return "MessageSquarePlus";
+    case "image":
+      return "Image";
+    case "formula-sum":
+      return "Sigma";
+    case "dataVerification":
+      return "ShieldCheck";
+    case "search":
+      return "Search";
+    case "dune":
+      return "DuneChart";
+    case "Ellipsis":
+      return "Ellipsis";
     default:
       return "";
   }
@@ -5567,7 +5640,9 @@ var getIcon = function getIcon(title) {
 var Toolbar = function Toolbar(_ref) {
   var _context$luckysheet_s, _flowdata$row, _settings$customToolb;
   var setMoreItems = _ref.setMoreItems,
-    moreItemsOpen = _ref.moreItemsOpen;
+    moreItemsOpen = _ref.moreItemsOpen,
+    onMoreToolbarItemsClose = _ref.onMoreToolbarItemsClose,
+    moreToolbarItems = _ref.moreToolbarItems;
   var _useContext = React.useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
@@ -5940,7 +6015,7 @@ var Toolbar = function Toolbar(_ref) {
             isActive: ((_$find2 = ___default['default'].find(items, function (item) {
               return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.ht);
             })) === null || _$find2 === void 0 ? void 0 : _$find2.title) === title,
-            icon: getIcon(title),
+            icon: getLucideIcon(title),
             variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
@@ -5993,7 +6068,7 @@ var Toolbar = function Toolbar(_ref) {
             isActive: ((_$find4 = ___default['default'].find(_items, function (item) {
               return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
             })) === null || _$find4 === void 0 ? void 0 : _$find4.title) === title,
-            icon: getIcon(title),
+            icon: getLucideIcon(title),
             variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
@@ -6585,7 +6660,7 @@ var Toolbar = function Toolbar(_ref) {
           return /*#__PURE__*/React__default['default'].createElement(ui.IconButton, {
             key: value,
             isActive: _curr.value === value,
-            icon: getIcon(iconId),
+            icon: getLucideIcon(iconId),
             variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
@@ -6737,7 +6812,10 @@ var Toolbar = function Toolbar(_ref) {
         }));
       });
     }
-    return /*#__PURE__*/React__default['default'].createElement(Button, {
+    return /*#__PURE__*/React__default['default'].createElement(ui.Tooltip, {
+      text: tooltip,
+      placement: "bottom"
+    }, /*#__PURE__*/React__default['default'].createElement(Button, {
       iconId: name,
       tooltip: tooltip,
       key: name,
@@ -6748,7 +6826,7 @@ var Toolbar = function Toolbar(_ref) {
           (_toolbarItemClickHand = fortuneCore.toolbarItemClickHandler(name)) === null || _toolbarItemClickHand === void 0 ? void 0 : _toolbarItemClickHand(draftCtx, refs.cellInput.current, refs.globalCache);
         });
       }
-    });
+    }));
   }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDuneModal, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: containerRef,
@@ -6771,7 +6849,7 @@ var Toolbar = function Toolbar(_ref) {
   })) : null, (toolbarWrapIndex === -1 ? settings.toolbarItems : settings.toolbarItems.slice(0, toolbarWrapIndex + 1)).map(function (name, i) {
     return getToolbarItem(name, i);
   }), toolbarWrapIndex !== -1 && toolbarWrapIndex < settings.toolbarItems.length - 1 ? (/*#__PURE__*/React__default['default'].createElement(Button, {
-    iconId: "more",
+    iconId: "Ellipsis",
     tooltip: toolbar.toolMore,
     onClick: function onClick() {
       if (moreItemsOpen) {
@@ -6782,7 +6860,9 @@ var Toolbar = function Toolbar(_ref) {
         }));
       }
     }
-  })) : null), /*#__PURE__*/React__default['default'].createElement("div", {
+  })) : null, moreToolbarItems && (/*#__PURE__*/React__default['default'].createElement(MoreItemsContaier, {
+    onClose: onMoreToolbarItemsClose
+  }, moreToolbarItems))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "fortune-toolbar-right"
   }, settings.customToolbarItems.filter(function (n) {
     return n.key === "templates";
@@ -6805,7 +6885,7 @@ var Toolbar = function Toolbar(_ref) {
       iconName: n.iconName
     }, n.children);
   }), /*#__PURE__*/React__default['default'].createElement(Button, {
-    iconId: "dune-logo",
+    iconId: "dune",
     tooltip: "Insert Dune Chart",
     key: "dune-charts",
     onClick: function onClick() {
@@ -7497,6 +7577,135 @@ var SheetTab = function SheetTab() {
   }, /*#__PURE__*/React__default['default'].createElement(ZoomControl, null)));
 };
 
+var ResetColumnWidth = function ResetColumnWidth() {
+  var _useContext = React.useContext(WorkbookContext),
+    context = _useContext.context,
+    setContext = _useContext.setContext;
+  var _useAlert = useAlert(),
+    showAlert = _useAlert.showAlert;
+  var _locale = fortuneCore.locale(context),
+    button = _locale.button;
+  var _useDialog = useDialog(),
+    hideDialog = _useDialog.hideDialog;
+  var _useState = React.useState("number"),
+    _useState2 = _slicedToArray(_useState, 2),
+    radioValue = _useState2[0],
+    setRadioValue = _useState2[1];
+  var _useState3 = React.useState(100),
+    _useState4 = _slicedToArray(_useState3, 2),
+    numberValue = _useState4[0],
+    setNumberValue = _useState4[1];
+  var getMaxCellWidth = function getMaxCellWidth(col) {
+    var data = fortuneCore.getFlowdata(context);
+    var maxWidth = 100;
+    if (data) {
+      for (var i = 0; i < data.length; i += 1) {
+        var cellD = data[i][col];
+        if (typeof cellD === "string") {
+          if (cellD.length * 7 > maxWidth) {
+            maxWidth = cellD.length * 7;
+          }
+        } else if (_typeof(cellD) === "object" && cellD !== null) {
+          console.log(cellD, "cellD");
+          var cellText = cellD.v || cellD.m;
+          if (cellText.length * 7 > maxWidth) {
+            maxWidth = cellText.length * 7;
+          }
+        }
+      }
+    }
+    return maxWidth;
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "fortune-split-column"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: ""
+  }, /*#__PURE__*/React__default['default'].createElement(ui.RadioGroup, {
+    defaultValue: radioValue,
+    onValueChange: function onValueChange(value) {
+      setRadioValue(value);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex-col gap-4"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex items-center space-x-1"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.RadioGroupItem, {
+    id: "r1",
+    size: "lg",
+    value: "number"
+  }), /*#__PURE__*/React__default['default'].createElement(ui.Label, {
+    className: "text-heading-xsm",
+    htmlFor: "r1"
+  }, "Enter new column width in pixels. (Default: 80)")), /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
+    className: "w-1/3 my-4",
+    defaultValue: numberValue,
+    isValid: true,
+    onChange: function onChange(e) {
+      setNumberValue(e.target.value);
+    },
+    placeholder: "Number"
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex items-center space-x-1 mb-4"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.RadioGroupItem, {
+    id: "r2",
+    size: "lg",
+    value: "fit"
+  }), /*#__PURE__*/React__default['default'].createElement(ui.Label, {
+    className: "text-heading-xsm",
+    htmlFor: "r2"
+  }, "Fit to data")))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "flex justify-end gap-2"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    variant: "secondary",
+    onClick: function onClick() {
+      hideDialog();
+    },
+    tabIndex: 0
+  }, button.cancel), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    onClick: function onClick() {
+      if (radioValue === "number") {
+        var targetColWidth = numberValue;
+        setContext(function (draftCtx) {
+          if (___default['default'].isUndefined(targetColWidth) || targetColWidth === null || targetColWidth <= 0 || targetColWidth > 2038) {
+            showAlert("The column width must be between 0 ~ 2038", "ok");
+            draftCtx.contextMenu = {};
+            return;
+          }
+          var numColWidth = targetColWidth;
+          var colWidthList = {};
+          ___default['default'].forEach(draftCtx.luckysheet_select_save, function (section) {
+            for (var colNum = section.column[0]; colNum <= section.column[1]; colNum += 1) {
+              getMaxCellWidth(colNum);
+              colWidthList[colNum] = numColWidth;
+            }
+          });
+          fortuneCore.api.setColumnWidth(draftCtx, colWidthList, {}, true);
+          draftCtx.contextMenu = {};
+        });
+      } else {
+        var _targetColWidth = numberValue;
+        setContext(function (draftCtx) {
+          if (___default['default'].isUndefined(_targetColWidth) || _targetColWidth === null || _targetColWidth <= 0 || _targetColWidth > 2038) {
+            showAlert("The column width must be between 0 ~ 2038", "ok");
+            draftCtx.contextMenu = {};
+            return;
+          }
+          var colWidthList = {};
+          ___default['default'].forEach(draftCtx.luckysheet_select_save, function (section) {
+            for (var colNum = section.column[0]; colNum <= section.column[1]; colNum += 1) {
+              colWidthList[colNum] = getMaxCellWidth(colNum);
+            }
+          });
+          fortuneCore.api.setColumnWidth(draftCtx, colWidthList, {}, true);
+          draftCtx.contextMenu = {};
+        });
+      }
+      hideDialog();
+    },
+    tabIndex: 0
+  }, "Ok")));
+};
+
 var Divider$1 = function Divider() {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "fortune-context-menu-divider"
@@ -8206,32 +8415,14 @@ var ContextMenu = function ContextMenu() {
       }), "px")))) : null;
     }
     if (name === "set-column-width") {
-      var _context$luckysheet_s0, _context$luckysheet_s1;
-      var colWidth = (selection === null || selection === void 0 ? void 0 : selection.width) || context.defaultcollen;
-      var shownColWidth = ((_context$luckysheet_s0 = context.luckysheet_select_save) === null || _context$luckysheet_s0 === void 0 ? void 0 : _context$luckysheet_s0.some(function (section) {
-        return section.width_move !== (colWidth + 1) * (section.column[1] - section.column[0] + 1) - 1;
-      })) ? "" : colWidth;
-      return ((_context$luckysheet_s1 = context.luckysheet_select_save) === null || _context$luckysheet_s1 === void 0 ? void 0 : _context$luckysheet_s1.some(function (section) {
+      var _context$luckysheet_s0;
+      return ((_context$luckysheet_s0 = context.luckysheet_select_save) === null || _context$luckysheet_s0 === void 0 ? void 0 : _context$luckysheet_s0.some(function (section) {
         return section.column_select;
       })) ? (/*#__PURE__*/React__default['default'].createElement(Menu, {
         key: "set-column-width",
-        onClick: function onClick(e, container) {
-          var _container$querySelec2;
-          var targetColWidth = (_container$querySelec2 = container.querySelector("input")) === null || _container$querySelec2 === void 0 ? void 0 : _container$querySelec2.value;
+        onClick: function onClick() {
+          showDialog(/*#__PURE__*/React__default['default'].createElement(ResetColumnWidth, null), undefined, "Resize column");
           setContext(function (draftCtx) {
-            if (___default['default'].isUndefined(targetColWidth) || targetColWidth === "" || parseInt(targetColWidth, 10) <= 0 || parseInt(targetColWidth, 10) > 2038) {
-              showAlert(info.tipColumnWidthLimit, "ok");
-              draftCtx.contextMenu = {};
-              return;
-            }
-            var numColWidth = parseInt(targetColWidth, 10);
-            var colWidthList = {};
-            ___default['default'].forEach(draftCtx.luckysheet_select_save, function (section) {
-              for (var colNum = section.column[0]; colNum <= section.column[1]; colNum += 1) {
-                colWidthList[colNum] = numColWidth;
-              }
-            });
-            fortuneCore.api.setColumnWidth(draftCtx, colWidthList, {}, true);
             draftCtx.contextMenu = {};
           });
         }
@@ -8244,24 +8435,7 @@ var ContextMenu = function ContextMenu() {
         style: {
           marginRight: "8px"
         }
-      }), /*#__PURE__*/React__default['default'].createElement("div", null, "Resize column height", /*#__PURE__*/React__default['default'].createElement("input", {
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        },
-        onKeyDown: function onKeyDown(e) {
-          return e.stopPropagation();
-        },
-        tabIndex: 0,
-        type: "number",
-        min: 1,
-        max: 545,
-        className: "luckysheet-mousedown-cancel",
-        placeholder: rightclick.number,
-        defaultValue: shownColWidth,
-        style: {
-          width: "40px"
-        }
-      }), "px")))) : null;
+      }), /*#__PURE__*/React__default['default'].createElement("div", null, "Resize column width")))) : null;
     }
     if (name === "clear") {
       return /*#__PURE__*/React__default['default'].createElement(Menu, {
@@ -10797,19 +10971,6 @@ var SheetTabContextMenu = function SheetTabContextMenu() {
   }));
 };
 
-var MoreItemsContaier = function MoreItemsContaier(_ref) {
-  var onClose = _ref.onClose,
-    children = _ref.children;
-  var containerRef = React.useRef(null);
-  useOutsideClick(containerRef, function () {
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [containerRef, onClose]);
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    ref: containerRef,
-    className: "fortune-toolbar-more-container"
-  }, children);
-};
-
 function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cellInput, scrollbarX, scrollbarY, globalCache) {
   return {
     applyOp: function applyOp(ops) {
@@ -12424,12 +12585,12 @@ var Workbook = /*#__PURE__*/React__default['default'].forwardRef(function (_ref,
     className: "fortune-workarea"
   }, mergedSettings.showToolbar && (/*#__PURE__*/React__default['default'].createElement(Toolbar, {
     moreItemsOpen: moreToolbarItems !== null,
-    setMoreItems: setMoreToolbarItems
+    setMoreItems: setMoreToolbarItems,
+    onMoreToolbarItemsClose: onMoreToolbarItemsClose,
+    moreToolbarItems: moreToolbarItems
   })), mergedSettings.showFormulaBar && /*#__PURE__*/React__default['default'].createElement(FxEditor, null)), /*#__PURE__*/React__default['default'].createElement(Sheet, {
     sheet: sheet
-  }), mergedSettings.showSheetTabs && /*#__PURE__*/React__default['default'].createElement(SheetTab, null), /*#__PURE__*/React__default['default'].createElement(ContextMenu, null), /*#__PURE__*/React__default['default'].createElement(FilterMenu, null), /*#__PURE__*/React__default['default'].createElement(SheetTabContextMenu, null), context.showSheetList && /*#__PURE__*/React__default['default'].createElement(SheetList, null), moreToolbarItems && (/*#__PURE__*/React__default['default'].createElement(MoreItemsContaier, {
-    onClose: onMoreToolbarItemsClose
-  }, moreToolbarItems)), !___default['default'].isEmpty(context.contextMenu) && (/*#__PURE__*/React__default['default'].createElement("div", {
+  }), mergedSettings.showSheetTabs && /*#__PURE__*/React__default['default'].createElement(SheetTab, null), /*#__PURE__*/React__default['default'].createElement(ContextMenu, null), /*#__PURE__*/React__default['default'].createElement(FilterMenu, null), /*#__PURE__*/React__default['default'].createElement(SheetTabContextMenu, null), context.showSheetList && /*#__PURE__*/React__default['default'].createElement(SheetList, null), !___default['default'].isEmpty(context.contextMenu) && (/*#__PURE__*/React__default['default'].createElement("div", {
     onMouseDown: function onMouseDown() {
       setContextWithProduce(function (draftCtx) {
         draftCtx.contextMenu = {};

package/dist/index.umd.css

@@ -2250,11 +2250,12 @@ input[type="number"].condition-rules-project-input {
   flex-direction: row;
   /* background: #fafafc; */
   position: relative;
-  padding: 10px 0px 8px 15px;
+  padding: 4px 8px;
   border-bottom: 1px solid #d4d4d4;
   white-space: nowrap;
   align-items: center;
   gap: 4px;
+  justify-content: space-between;
 }
 
 .fortune-toolbar-divider {
@@ -2313,8 +2314,11 @@ input[type="number"].condition-rules-project-input {
   align-items: center;
 }
 
-.fortune-toolbar-button:hover,
-.fortune-toolbar-combo:hover {
+.fortune-toolbar-combo-button.show-arrow {
+  border-radius: 4px 0px 0px 4px;
+}
+
+.fortune-toolbar-button:hover {
   background-color: #f2f4f5;
   cursor: pointer;
 }
@@ -2322,6 +2326,8 @@ input[type="number"].condition-rules-project-input {
 .fortune-toolbar-combo-arrow:hover {
   background-color: #f2f4f5;
   cursor: pointer;
+  height: 30px;
+  border-radius: 0px 4px 4px 0px;
 }
 
 .fortune-toolbar-button:active,
@@ -2452,8 +2458,8 @@ input[type="number"].condition-rules-project-input {
   flex-direction: row;
   align-items: center;
   align-self: flex-end;
-  margin-right: 40px;
   top: 40px;
+  right: 0px;
   max-width: 348px;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   background: white;
@@ -2641,6 +2647,7 @@ input[type="number"].condition-rules-project-input {
   flex-direction: row;
   align-items: center;
   gap: 4px;
+  position: relative;
 }
 
 .fortune-toolbar-right {