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

package/dist/index.esm.js

@@ -1,8 +1,8 @@
-import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, locale, getStyleByCell, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, moveToEnd, isShowHidenCR, getrangeseleciton, cancelNormalSelected, moveHighlightCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, normalizeSelection, scrollToHighlightCell, isLinkValid, goToLink, replaceHtml, removeHyperlink, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, getRangetxt, setConditionRules, mergeBorder, setDropdownValue, onIframeMoveStart, onIframeResizeStart, onIframeMove, onIframeMoveEnd, onIframeResize, onIframeResizeEnd, handleCellAreaMouseDown, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, insertRowCol, drawArrow, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, sanitizeDuneUrl, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, insertDuneChart, handleTextColor, handleTextBackground, getInlineStringNoStyle, rangeHightlightselected, updateCell, editSheetName, cancelActiveImgItem, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, getFreezeState, toggleFreeze, jfrefreshgrid, handleCopy, removeActiveImage, deleteSelectedCellText, deleteRowCol, hideSelected, showSelected, api, sortSelection, handleLink, handlePasteByClick, deleteSheet, opToPatch, setCaretPosition, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, calcSelectionInfo, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePaste, groupValuesRefresh } from '@fileverse-dev/fortune-core';
+import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, locale, getStyleByCell, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, moveToEnd, isShowHidenCR, getrangeseleciton, cancelNormalSelected, moveHighlightCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, normalizeSelection, scrollToHighlightCell, isLinkValid, goToLink, replaceHtml, removeHyperlink, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, getRangetxt, setConditionRules, mergeBorder, setDropdownValue, onIframeMoveStart, onIframeResizeStart, onIframeMove, onIframeMoveEnd, onIframeResize, onIframeResizeEnd, handleCellAreaMouseDown, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, insertRowCol, drawArrow, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, sanitizeDuneUrl, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, insertDuneChart, handleTextColor, handleTextBackground, getInlineStringNoStyle, rangeHightlightselected, updateCell, editSheetName, cancelActiveImgItem, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, api, getFreezeState, toggleFreeze, jfrefreshgrid, handleCopy, removeActiveImage, deleteSelectedCellText, deleteRowCol, hideSelected, showSelected, sortSelection, handleLink, handlePasteByClick, deleteSheet, opToPatch, setCaretPosition, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, calcSelectionInfo, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePaste, groupValuesRefresh } from '@fileverse-dev/fortune-core';
 import React, { useContext, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import produce, { applyPatches, enablePatches, produceWithPatches } from 'immer';
 import _ from 'lodash';
-import { LucideIcon, TextField, Button as Button$1, cn, IconButton, Checkbox, Divider as Divider$2, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem as SelectItem$1 } from '@fileverse/ui';
+import { LucideIcon, TextField, Button as Button$1, cn, IconButton, Checkbox, Divider as Divider$2, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem as SelectItem$1, Tooltip, RadioGroup, RadioGroupItem, Label } from '@fileverse/ui';
 import regeneratorRuntime from 'regenerator-runtime';
 import Tippy from '@tippyjs/react';
 
@@ -269,6 +269,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);
@@ -4434,26 +4443,25 @@ var Button = function Button(_ref) {
     selected = _ref.selected,
     children = _ref.children,
     style = _ref.style;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.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.createElement(SVGIcon, {
-    name: iconId,
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: getLucideIcon(iconId),
     width: 16,
     height: 16,
     style: disabled ? {
       opacity: 0.3
     } : {}
-  }), tooltip && /*#__PURE__*/React.createElement("div", {
-    className: "fortune-tooltip"
-  }, tooltip), children);
+  }), children));
 };
 
 var Divider = function Divider() {
@@ -4491,7 +4499,7 @@ var Combo = function Combo(_ref) {
   var popupRef = useRef(null);
   var buttonRef = useRef(null);
   var isLucideIcon = 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);
@@ -4520,7 +4528,10 @@ var Combo = function Combo(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     ref: buttonRef,
     className: "fortune-toolbar-combo"
-  }, !isLucideIcon ? (/*#__PURE__*/React.createElement("div", {
+  }, !isLucideIcon ? (/*#__PURE__*/React.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-combo-button",
     onClick: function onClick(e) {
       if (_onClick) {
@@ -4531,9 +4542,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.createElement(SVGIcon, {
     name: iconId,
@@ -4541,29 +4550,29 @@ var Combo = function Combo(_ref) {
     height: 16
   })) : (/*#__PURE__*/React.createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text !== undefined ? text : "")))) : (/*#__PURE__*/React.createElement(IconButton, {
-    icon: getIcon(iconId),
+  }, text !== undefined ? text : ""))))) : (/*#__PURE__*/React.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: getLucideIcon(iconId),
     variant: "ghost",
     onClick: function onClick() {
       return setOpen(!open);
-    }
-  })), showArrow && (/*#__PURE__*/React.createElement("div", {
+    },
+    className: showArrow ? "fortune-toolbar-combo-button show-arrow" : ""
+  }))), showArrow && (/*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-combo-arrow",
     onClick: function onClick() {
       return setOpen(!open);
     },
     tabIndex: 0,
-    "data-tips": tooltip,
     role: "button",
-    "aria-label": tooltip,
     style: style
   }, /*#__PURE__*/React.createElement(LucideIcon, {
     name: "ChevronDown",
     width: 14,
     height: 14
-  }))), tooltip && /*#__PURE__*/React.createElement("div", {
-    className: "fortune-tooltip"
-  }, tooltip)), open && (/*#__PURE__*/React.createElement("div", {
+  })))), open && (/*#__PURE__*/React.createElement("div", {
     ref: popupRef,
     className: "fortune-toolbar-combo-popup",
     style: popupPosition
@@ -4719,7 +4728,8 @@ var SplitColumn = function SplitColumn() {
     tabIndex: 0
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: "other"
-  }, "Custom"), /*#__PURE__*/React.createElement("input", {
+  }, "Custom"), /*#__PURE__*/React.createElement(TextField, {
+    placeholder: "Custom separator",
     id: "otherValue",
     name: "otherValue",
     type: "text",
@@ -5246,11 +5256,13 @@ var CustomButton = function CustomButton(_ref) {
     children = _ref.children,
     iconName = _ref.iconName,
     icon = _ref.icon;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-button fortune-toolbar-item",
     onClick: onClick,
     tabIndex: 0,
-    "data-tips": tooltip,
     role: "button",
     style: selected ? {
       backgroundColor: "#E7E5EB"
@@ -5260,9 +5272,7 @@ var CustomButton = function CustomButton(_ref) {
     height: 16,
     iconName: iconName,
     content: icon
-  }), tooltip && /*#__PURE__*/React.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"]];
@@ -5528,8 +5538,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 = useRef(null);
+  useOutsideClick(containerRef, function () {
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [containerRef, onClose]);
+  return /*#__PURE__*/React.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":
@@ -5548,6 +5583,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 "";
   }
@@ -5555,7 +5628,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 = useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
@@ -5928,7 +6003,7 @@ var Toolbar = function Toolbar(_ref) {
             isActive: ((_$find2 = _.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) {
@@ -5981,7 +6056,7 @@ var Toolbar = function Toolbar(_ref) {
             isActive: ((_$find4 = _.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) {
@@ -6573,7 +6648,7 @@ var Toolbar = function Toolbar(_ref) {
           return /*#__PURE__*/React.createElement(IconButton, {
             key: value,
             isActive: _curr.value === value,
-            icon: getIcon(iconId),
+            icon: getLucideIcon(iconId),
             variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
@@ -6725,7 +6800,10 @@ var Toolbar = function Toolbar(_ref) {
         }));
       });
     }
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      text: tooltip,
+      placement: "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
       iconId: name,
       tooltip: tooltip,
       key: name,
@@ -6736,7 +6814,7 @@ var Toolbar = function Toolbar(_ref) {
           (_toolbarItemClickHand = 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.createElement("div", {
     ref: containerRef,
@@ -6759,7 +6837,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.createElement(Button, {
-    iconId: "more",
+    iconId: "Ellipsis",
     tooltip: toolbar.toolMore,
     onClick: function onClick() {
       if (moreItemsOpen) {
@@ -6770,7 +6848,9 @@ var Toolbar = function Toolbar(_ref) {
         }));
       }
     }
-  })) : null), /*#__PURE__*/React.createElement("div", {
+  })) : null, moreToolbarItems && (/*#__PURE__*/React.createElement(MoreItemsContaier, {
+    onClose: onMoreToolbarItemsClose
+  }, moreToolbarItems))), /*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-right"
   }, settings.customToolbarItems.filter(function (n) {
     return n.key === "templates";
@@ -6793,7 +6873,7 @@ var Toolbar = function Toolbar(_ref) {
       iconName: n.iconName
     }, n.children);
   }), /*#__PURE__*/React.createElement(Button, {
-    iconId: "dune-logo",
+    iconId: "dune",
     tooltip: "Insert Dune Chart",
     key: "dune-charts",
     onClick: function onClick() {
@@ -7485,6 +7565,135 @@ var SheetTab = function SheetTab() {
   }, /*#__PURE__*/React.createElement(ZoomControl, null)));
 };
 
+var ResetColumnWidth = function ResetColumnWidth() {
+  var _useContext = useContext(WorkbookContext),
+    context = _useContext.context,
+    setContext = _useContext.setContext;
+  var _useAlert = useAlert(),
+    showAlert = _useAlert.showAlert;
+  var _locale = locale(context),
+    button = _locale.button;
+  var _useDialog = useDialog(),
+    hideDialog = _useDialog.hideDialog;
+  var _useState = useState("number"),
+    _useState2 = _slicedToArray(_useState, 2),
+    radioValue = _useState2[0],
+    setRadioValue = _useState2[1];
+  var _useState3 = useState(100),
+    _useState4 = _slicedToArray(_useState3, 2),
+    numberValue = _useState4[0],
+    setNumberValue = _useState4[1];
+  var getMaxCellWidth = function getMaxCellWidth(col) {
+    var data = 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.createElement("div", {
+    id: "fortune-split-column"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ""
+  }, /*#__PURE__*/React.createElement(RadioGroup, {
+    defaultValue: radioValue,
+    onValueChange: function onValueChange(value) {
+      setRadioValue(value);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-col gap-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-1"
+  }, /*#__PURE__*/React.createElement(RadioGroupItem, {
+    id: "r1",
+    size: "lg",
+    value: "number"
+  }), /*#__PURE__*/React.createElement(Label, {
+    className: "text-heading-xsm",
+    htmlFor: "r1"
+  }, "Enter new column width in pixels. (Default: 80)")), /*#__PURE__*/React.createElement(TextField, {
+    className: "w-1/3 my-4",
+    defaultValue: numberValue,
+    isValid: true,
+    onChange: function onChange(e) {
+      setNumberValue(e.target.value);
+    },
+    placeholder: "Number"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-1 mb-4"
+  }, /*#__PURE__*/React.createElement(RadioGroupItem, {
+    id: "r2",
+    size: "lg",
+    value: "fit"
+  }), /*#__PURE__*/React.createElement(Label, {
+    className: "text-heading-xsm",
+    htmlFor: "r2"
+  }, "Fit to data")))), /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-end gap-2"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "secondary",
+    onClick: function onClick() {
+      hideDialog();
+    },
+    tabIndex: 0
+  }, button.cancel), /*#__PURE__*/React.createElement(Button$1, {
+    onClick: function onClick() {
+      if (radioValue === "number") {
+        var targetColWidth = numberValue;
+        setContext(function (draftCtx) {
+          if (_.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 = {};
+          _.forEach(draftCtx.luckysheet_select_save, function (section) {
+            for (var colNum = section.column[0]; colNum <= section.column[1]; colNum += 1) {
+              getMaxCellWidth(colNum);
+              colWidthList[colNum] = numColWidth;
+            }
+          });
+          api.setColumnWidth(draftCtx, colWidthList, {}, true);
+          draftCtx.contextMenu = {};
+        });
+      } else {
+        var _targetColWidth = numberValue;
+        setContext(function (draftCtx) {
+          if (_.isUndefined(_targetColWidth) || _targetColWidth === null || _targetColWidth <= 0 || _targetColWidth > 2038) {
+            showAlert("The column width must be between 0 ~ 2038", "ok");
+            draftCtx.contextMenu = {};
+            return;
+          }
+          var colWidthList = {};
+          _.forEach(draftCtx.luckysheet_select_save, function (section) {
+            for (var colNum = section.column[0]; colNum <= section.column[1]; colNum += 1) {
+              colWidthList[colNum] = getMaxCellWidth(colNum);
+            }
+          });
+          api.setColumnWidth(draftCtx, colWidthList, {}, true);
+          draftCtx.contextMenu = {};
+        });
+      }
+      hideDialog();
+    },
+    tabIndex: 0
+  }, "Ok")));
+};
+
 var Divider$1 = function Divider() {
   return /*#__PURE__*/React.createElement("div", {
     className: "fortune-context-menu-divider"
@@ -8194,32 +8403,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.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.createElement(ResetColumnWidth, null), undefined, "Resize column");
           setContext(function (draftCtx) {
-            if (_.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 = {};
-            _.forEach(draftCtx.luckysheet_select_save, function (section) {
-              for (var colNum = section.column[0]; colNum <= section.column[1]; colNum += 1) {
-                colWidthList[colNum] = numColWidth;
-              }
-            });
-            api.setColumnWidth(draftCtx, colWidthList, {}, true);
             draftCtx.contextMenu = {};
           });
         }
@@ -8232,24 +8423,7 @@ var ContextMenu = function ContextMenu() {
         style: {
           marginRight: "8px"
         }
-      }), /*#__PURE__*/React.createElement("div", null, "Resize column height", /*#__PURE__*/React.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.createElement("div", null, "Resize column width")))) : null;
     }
     if (name === "clear") {
       return /*#__PURE__*/React.createElement(Menu, {
@@ -10785,19 +10959,6 @@ var SheetTabContextMenu = function SheetTabContextMenu() {
   }));
 };
 
-var MoreItemsContaier = function MoreItemsContaier(_ref) {
-  var onClose = _ref.onClose,
-    children = _ref.children;
-  var containerRef = useRef(null);
-  useOutsideClick(containerRef, function () {
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [containerRef, onClose]);
-  return /*#__PURE__*/React.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) {
@@ -12412,12 +12573,12 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "fortune-workarea"
   }, mergedSettings.showToolbar && (/*#__PURE__*/React.createElement(Toolbar, {
     moreItemsOpen: moreToolbarItems !== null,
-    setMoreItems: setMoreToolbarItems
+    setMoreItems: setMoreToolbarItems,
+    onMoreToolbarItemsClose: onMoreToolbarItemsClose,
+    moreToolbarItems: moreToolbarItems
   })), mergedSettings.showFormulaBar && /*#__PURE__*/React.createElement(FxEditor, null)), /*#__PURE__*/React.createElement(Sheet, {
     sheet: sheet
-  }), mergedSettings.showSheetTabs && /*#__PURE__*/React.createElement(SheetTab, null), /*#__PURE__*/React.createElement(ContextMenu, null), /*#__PURE__*/React.createElement(FilterMenu, null), /*#__PURE__*/React.createElement(SheetTabContextMenu, null), context.showSheetList && /*#__PURE__*/React.createElement(SheetList, null), moreToolbarItems && (/*#__PURE__*/React.createElement(MoreItemsContaier, {
-    onClose: onMoreToolbarItemsClose
-  }, moreToolbarItems)), !_.isEmpty(context.contextMenu) && (/*#__PURE__*/React.createElement("div", {
+  }), mergedSettings.showSheetTabs && /*#__PURE__*/React.createElement(SheetTab, null), /*#__PURE__*/React.createElement(ContextMenu, null), /*#__PURE__*/React.createElement(FilterMenu, null), /*#__PURE__*/React.createElement(SheetTabContextMenu, null), context.showSheetList && /*#__PURE__*/React.createElement(SheetList, null), !_.isEmpty(context.contextMenu) && (/*#__PURE__*/React.createElement("div", {
     onMouseDown: function onMouseDown() {
       setContextWithProduce(function (draftCtx) {
         draftCtx.contextMenu = {};