@fileverse-dev/fortune-react 1.0.2-mod-38 → 1.0.2-mod-39

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, locale, getStyleByCell, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, moveToEnd, isShowHidenCR, getrangeseleciton, cancelNormalSelected, moveHighlightCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, normalizeSelection, scrollToHighlightCell, isLinkValid, goToLink, replaceHtml, removeHyperlink, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, getRangetxt, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, insertRowCol, drawArrow, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getInlineStringNoStyle, rangeHightlightselected, updateCell, editSheetName, cancelActiveImgItem, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, getFreezeState, toggleFreeze, jfrefreshgrid, handleCopy, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, sortSelection, handleLink, handlePasteByClick, deleteSheet, opToPatch, setCaretPosition, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, calcSelectionInfo, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePaste, groupValuesRefresh } from '@fileverse-dev/fortune-core';
+import { 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, 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, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, sortSelection, handleLink, handlePasteByClick, deleteSheet, opToPatch, setCaretPosition, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, calcSelectionInfo, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePaste, groupValuesRefresh } from '@fileverse-dev/fortune-core';
 import React, { useContext, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import produce, { applyPatches, enablePatches, produceWithPatches } from 'immer';
 import _ from 'lodash';
@@ -172,7 +172,7 @@ function _regenerator() {
             i = p[t],
             d = G.p,
             l = i[2];
-          r > 3 ? (o = l === n) && (c = i[4] || 3, u = i[5] === e ? i[3] : i[5], i[4] = 3, i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
         }
         if (o || r > 1) return a;
         throw y = !0, n;
@@ -784,37 +784,12 @@ var ContentEditable = function ContentEditable(_ref) {
 };
 
 var FormulaSearch = function FormulaSearch(props) {
-  var _context$luckysheet_s;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context;
-  var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
-  var hintRef = useRef(null);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    top = _useState2[0],
-    setTop = _useState2[1];
-  var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
-    var _hintRef$current;
-    if (!(firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) || !firstSelection.height_move || !hintRef.current) return;
-    var hintHeight = hintRef.current.offsetHeight;
-    var inputBottom = firstSelection.top + firstSelection.height_move;
-    var availableBelow = window.innerHeight - inputBottom;
-    var hintAbove = hintHeight > availableBelow;
-    var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
-    var divOffset = ((_hintRef$current = hintRef.current) === null || _hintRef$current === void 0 ? void 0 : _hintRef$current.offsetHeight) || 0;
-    setTop(hintAbove ? selectionHeight - (divOffset + 70) : selectionHeight + 4);
-  };
-  useEffect(function () {
-    calcuatePopUpPlacement();
-  });
   if (_.isEmpty(context.functionCandidates)) return null;
   return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
-    ref: hintRef,
     id: "luckysheet-formula-search-c",
-    className: "luckysheet-formula-search-c",
-    style: {
-      top: top
-    }
+    className: "luckysheet-formula-search-c"
   }), context.functionCandidates.map(function (v, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: v.n,
@@ -864,10 +839,8 @@ var FormulaSearch = function FormulaSearch(props) {
 };
 
 var FormulaHint = function FormulaHint(props) {
-  var _context$luckysheet_s;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context;
-  var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
   var _locale = locale(context),
     formulaMore = _locale.formulaMore;
   var fn = context.formulaCache.functionlistMap[context.functionHint];
@@ -883,7 +856,7 @@ var FormulaHint = function FormulaHint(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     isKeyAdded = _useState6[0],
     setApiKeyAdded = _useState6[1];
-  var _useState7 = useState(true),
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
     showFunctionBody = _useState8[0],
     setShouldShowFunctionBody = _useState8[1];
@@ -897,66 +870,11 @@ var FormulaHint = function FormulaHint(props) {
   var apiKeyPlaceholder = {
     ETHERSCAN_API_KEY: "Etherscan API key"
   };
-  var hintRef = useRef(null);
-  var _useState9 = useState(0),
-    _useState0 = _slicedToArray(_useState9, 2),
-    top = _useState0[0],
-    setTop = _useState0[1];
-  var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
-    var _hintRef$current;
-    if (!(firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) || !firstSelection.height_move || !hintRef.current) return;
-    var hintHeight = 422;
-    var inputBottom = firstSelection.top + firstSelection.height_move;
-    var availableBelow = window.innerHeight - inputBottom;
-    var hintAbove = hintHeight > availableBelow;
-    var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
-    var divOffset = ((_hintRef$current = hintRef.current) === null || _hintRef$current === void 0 ? void 0 : _hintRef$current.offsetHeight) || 0;
-    setTop(hintAbove ? selectionHeight - (divOffset + 70) : selectionHeight + 4);
-  };
-  useEffect(function () {
-    calcuatePopUpPlacement();
-  });
-  useEffect(function () {
-    var el = document.getElementById("function-details");
-    var handleWheel;
-    if (el) {
-      var scrollLockTimeout = null;
-      var cache = {
-        verticalScrollLock: false,
-        horizontalScrollLock: false
-      };
-      handleWheel = function handleWheel(e) {
-        e.preventDefault();
-        var step = 40;
-        var ratio = 1;
-        if (e.deltaY !== 0 && !cache.verticalScrollLock) {
-          cache.horizontalScrollLock = true;
-          el.scrollTop += (e.deltaY > 0 ? 1 : -1) * step * ratio;
-        } else if (e.deltaX !== 0 && !cache.horizontalScrollLock) {
-          cache.verticalScrollLock = true;
-          el.scrollLeft += (e.deltaX > 0 ? 1 : -1) * step * ratio;
-        }
-        clearTimeout(scrollLockTimeout);
-        scrollLockTimeout = setTimeout(function () {
-          cache.verticalScrollLock = false;
-          cache.horizontalScrollLock = false;
-        }, 50);
-      };
-      el.addEventListener("wheel", handleWheel, {
-        passive: false
-      });
-    }
-    return function () {
-      if (el && handleWheel) el.removeEventListener("wheel", handleWheel);
-    };
-  }, []);
   if (!fn) return null;
   return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
-    ref: hintRef,
     id: "luckysheet-formula-help-c",
     className: "luckysheet-formula-help-c",
     style: {
-      top: top,
       borderWidth: "1px",
       borderColor: (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) ? fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR : "#F8F9FA",
       backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
@@ -1047,11 +965,8 @@ var FormulaHint = function FormulaHint(props) {
     height: 16
   })))), showFunctionBody && (/*#__PURE__*/React.createElement("div", {
     className: "luckysheet-formula-help-content",
-    id: "function-details",
     style: {
-      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
-      maxHeight: "318px",
-      overflowY: "scroll"
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA")
     }
   }, fn.API_KEY && (/*#__PURE__*/React.createElement("div", {
     style: {
@@ -1188,12 +1103,8 @@ var FormulaHint = function FormulaHint(props) {
       borderBottomRightRadius: "10px"
     },
     className: "w-full"
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      var _document$getElementB;
-      (_document$getElementB = document.getElementById("function-button")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.click();
-    },
-    className: "color-text-link cursor-pointer text-helper-text-sm"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "color-text-link text-helper-text-sm"
   }, "Learn More")));
 };
 
@@ -1292,38 +1203,6 @@ var InputBox = function InputBox() {
   var getActiveFormula = useCallback(function () {
     return document.querySelector(".luckysheet-formula-search-item-active");
   }, []);
-  var insertSelectedFormula = useCallback(function (formulaName) {
-    var _getrangeseleciton;
-    var textEditor = document.getElementById("luckysheet-rich-text-editor");
-    if (!textEditor) return;
-    var searchTxt = ((_getrangeseleciton = getrangeseleciton()) === null || _getrangeseleciton === void 0 ? void 0 : _getrangeseleciton.textContent) || "";
-    var deleteCount = searchTxt.length;
-    textEditor.focus();
-    var selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0) return;
-    var range = selection.getRangeAt(0);
-    if (deleteCount !== 0 && range) {
-      var startOffset = Math.max(range.startOffset - deleteCount, 0);
-      var endOffset = range.startOffset;
-      range.setStart(range.startContainer, startOffset);
-      range.setEnd(range.startContainer, endOffset);
-      range.deleteContents();
-    }
-    var funcNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>"), "text/html").body.firstChild;
-    var parNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>", "text/html").body.firstChild;
-    if (range === null || range === void 0 ? void 0 : range.startContainer.parentNode) {
-      range.setStart(range.startContainer.parentNode, 1);
-    }
-    if (parNode) range.insertNode(parNode);
-    if (funcNode) range.insertNode(funcNode);
-    range.collapse();
-    selection.removeAllRanges();
-    selection.addRange(range);
-    setContext(function (draftCtx) {
-      draftCtx.functionCandidates = [];
-      draftCtx.functionHint = formulaName;
-    });
-  }, [setContext]);
   var clearSearchItemActiveClass = useCallback(function () {
     var activeFormula = getActiveFormula();
     if (activeFormula) {
@@ -1331,24 +1210,89 @@ var InputBox = function InputBox() {
     }
   }, [getActiveFormula]);
   var selectActiveFormula = useCallback(function (e) {
-    var _getActiveFormula, _getActiveFormula$que;
-    var formulaName = (_getActiveFormula = getActiveFormula()) === null || _getActiveFormula === void 0 ? void 0 : (_getActiveFormula$que = _getActiveFormula.querySelector(".luckysheet-formula-search-func")) === null || _getActiveFormula$que === void 0 ? void 0 : _getActiveFormula$que.textContent;
-    if (formulaName) {
-      insertSelectedFormula(formulaName);
+    var activeFormula = getActiveFormula();
+    var formulaNameDiv = activeFormula === null || activeFormula === void 0 ? void 0 : activeFormula.querySelector(".luckysheet-formula-search-func");
+    if (formulaNameDiv) {
+      var formulaName = formulaNameDiv.textContent;
+      var textEditor = document.getElementById("luckysheet-rich-text-editor");
+      if (textEditor) {
+        var _getrangeseleciton;
+        var searchTxt = ((_getrangeseleciton = getrangeseleciton()) === null || _getrangeseleciton === void 0 ? void 0 : _getrangeseleciton.textContent) || "";
+        var deleteCount = searchTxt.length;
+        textEditor.focus();
+        var selection = window.getSelection();
+        if ((selection === null || selection === void 0 ? void 0 : selection.rangeCount) === 0) return;
+        var range = selection === null || selection === void 0 ? void 0 : selection.getRangeAt(0);
+        if (deleteCount !== 0 && range) {
+          var startOffset = Math.max(range.startOffset - deleteCount, 0);
+          var endOffset = range.startOffset;
+          range.setStart(range.startContainer, startOffset);
+          range.setEnd(range.startContainer, endOffset);
+          range.deleteContents();
+        }
+        var functionStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>");
+        var lParStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>";
+        var functionNode = new DOMParser().parseFromString(functionStr, "text/html").body.childNodes[0];
+        var lParNode = new DOMParser().parseFromString(lParStr, "text/html").body.childNodes[0];
+        if (range === null || range === void 0 ? void 0 : range.startContainer.parentNode) {
+          range === null || range === void 0 ? void 0 : range.setStart(range.startContainer.parentNode, 1);
+        }
+        range === null || range === void 0 ? void 0 : range.insertNode(lParNode);
+        range === null || range === void 0 ? void 0 : range.insertNode(functionNode);
+        range === null || range === void 0 ? void 0 : range.collapse();
+        selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+        if (range) selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+        setContext(function (draftCtx) {
+          draftCtx.functionCandidates = [];
+          draftCtx.functionHint = formulaName;
+        });
+      }
       e.preventDefault();
       e.stopPropagation();
     }
-  }, [getActiveFormula, insertSelectedFormula]);
+  }, [getActiveFormula, setContext]);
   var selectActiveFormulaOnClick = useCallback(function (e) {
-    var _getActiveFormula2, _getActiveFormula2$qu;
-    preText.current = inputRef.current.innerText;
-    var formulaName = (_getActiveFormula2 = getActiveFormula()) === null || _getActiveFormula2 === void 0 ? void 0 : (_getActiveFormula2$qu = _getActiveFormula2.querySelector(".luckysheet-formula-search-func")) === null || _getActiveFormula2$qu === void 0 ? void 0 : _getActiveFormula2$qu.textContent;
-    if (formulaName) {
-      insertSelectedFormula(formulaName);
+    var activeFormula = getActiveFormula();
+    var formulaNameDiv = activeFormula === null || activeFormula === void 0 ? void 0 : activeFormula.querySelector(".luckysheet-formula-search-func");
+    if (formulaNameDiv) {
+      var formulaName = formulaNameDiv.textContent;
+      var textEditor = document.getElementById("luckysheet-rich-text-editor");
+      if (textEditor) {
+        var _getrangeseleciton2;
+        var searchTxt = ((_getrangeseleciton2 = getrangeseleciton()) === null || _getrangeseleciton2 === void 0 ? void 0 : _getrangeseleciton2.textContent) || "";
+        var deleteCount = searchTxt.length;
+        textEditor.focus();
+        var selection = window.getSelection();
+        if ((selection === null || selection === void 0 ? void 0 : selection.rangeCount) === 0) return;
+        var range = selection === null || selection === void 0 ? void 0 : selection.getRangeAt(0);
+        if (deleteCount !== 0 && range) {
+          var startOffset = Math.max(range.startOffset - deleteCount, 0);
+          var endOffset = range.startOffset;
+          range.setStart(range.startContainer, startOffset);
+          range.setEnd(range.startContainer, endOffset);
+          range.deleteContents();
+        }
+        var functionStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>");
+        var lParStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>";
+        var functionNode = new DOMParser().parseFromString(functionStr, "text/html").body.childNodes[0];
+        var lParNode = new DOMParser().parseFromString(lParStr, "text/html").body.childNodes[0];
+        if (range === null || range === void 0 ? void 0 : range.startContainer.parentNode) {
+          range === null || range === void 0 ? void 0 : range.setStart(range.startContainer.parentNode, 1);
+        }
+        range === null || range === void 0 ? void 0 : range.insertNode(lParNode);
+        range === null || range === void 0 ? void 0 : range.insertNode(functionNode);
+        range === null || range === void 0 ? void 0 : range.collapse();
+        selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+        if (range) selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+        setContext(function (draftCtx) {
+          draftCtx.functionCandidates = [];
+          draftCtx.functionHint = formulaName;
+        });
+      }
       e.preventDefault();
       e.stopPropagation();
     }
-  }, [getActiveFormula, insertSelectedFormula]);
+  }, [getActiveFormula, setContext]);
   var onKeyDown = useCallback(function (e) {
     lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
     preText.current = inputRef.current.innerText;
@@ -1465,7 +1409,10 @@ var InputBox = function InputBox() {
     onKeyDown: onKeyDown,
     onPaste: onPaste,
     allowEdit: edit ? !isHidenRC : edit
-  })), (context.functionCandidates.length > 0 || context.functionHint) && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormulaSearch, {
+  })), document.activeElement === inputRef.current && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormulaSearch, {
+    style: {
+      top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
+    },
     onMouseOver: function onMouseOver(e) {
       if (document.getElementById("luckysheet-formula-search-c")) {
         var hoveredItem = e.target.closest(".luckysheet-formula-search-item");
@@ -1475,10 +1422,14 @@ var InputBox = function InputBox() {
       }
       e.preventDefault();
     },
-    onMouseDown: function onMouseDown(e) {
+    onClick: function onClick(e) {
       selectActiveFormulaOnClick(e);
     }
-  }), /*#__PURE__*/React.createElement(FormulaHint, null))));
+  }), /*#__PURE__*/React.createElement(FormulaHint, {
+    style: {
+      top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
+    }
+  }))));
 };
 
 var ScrollBar = function ScrollBar(_ref) {
@@ -2608,8 +2559,18 @@ function useDialog() {
   };
 }
 
+var datepickerStyles = "\n  .datepicker-toggle {\n    display: inline-block;\n    position: relative;\n    width: 100%;\n  }\n  \n  .datepicker-toggle-button {\n    opacity: 0.3;\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 16px;\n    height: 16px;\n    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjE2IiB5MT0iMiIgeDI9IjE2IiB5Mj0iNiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMiIgeDI9IjgiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxMCIgeDI9IjIxIiB5Mj0iMTAiPjwvbGluZT48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-position: center;\n    pointer-events: none;\n  }\n  \n  .datepicker-input {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #1a202c;\n    background-color: #fff;\n    cursor: pointer;\n  }\n  \n  .datepicker-input::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n  }\n  \n  .datepicker-input:focus {\n    outline: none;\n    border-color: #4299e1;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);\n  }\n";
+var injectDatepickerStyles = function injectDatepickerStyles() {
+  if (typeof document !== "undefined") {
+    var styleSheet = document.createElement("style");
+    styleSheet.textContent = datepickerStyles;
+    document.head.appendChild(styleSheet);
+  }
+};
+
+injectDatepickerStyles();
 var DataVerification = function DataVerification() {
-  var _context$dataVerifica, _context$dataVerifica2, _context$dataVerifica3, _context$dataVerifica4, _context$dataVerifica5, _context$dataVerifica6, _context$dataVerifica7, _context$dataVerifica8, _context$dataVerifica9, _context$dataVerifica0, _context$dataVerifica1, _context$dataVerifica10, _context$dataVerifica11, _context$dataVerifica12, _context$dataVerifica13, _context$dataVerifica14, _context$dataVerifica15, _context$dataVerifica16, _context$dataVerifica17, _context$dataVerifica18, _context$dataVerifica19, _context$dataVerifica20, _context$dataVerifica21, _context$dataVerifica22, _context$dataVerifica23;
+  var _context$dataVerifica, _context$dataVerifica2, _context$dataVerifica3, _context$dataVerifica4, _context$dataVerifica5, _context$dataVerifica6, _context$dataVerifica7, _context$dataVerifica8, _context$dataVerifica9, _context$dataVerifica0, _context$dataVerifica1, _context$dataVerifica10, _context$dataVerifica11;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext;
@@ -2618,15 +2579,11 @@ var DataVerification = function DataVerification() {
     hideDialog = _useDialog.hideDialog;
   var _locale = locale(context),
     dataVerification = _locale.dataVerification,
-    toolbar = _locale.toolbar,
     button = _locale.button,
     generalDialog = _locale.generalDialog;
-  var _useState = useState(["between", "notBetween", "equal", "notEqualTo", "moreThanThe", "lessThan", "greaterOrEqualTo", "lessThanOrEqualTo"]),
+  var _useState = useState(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"]),
     _useState2 = _slicedToArray(_useState, 1),
-    numberCondition = _useState2[0];
-  var _useState3 = useState(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"]),
-    _useState4 = _slicedToArray(_useState3, 1),
-    dateCondition = _useState4[0];
+    dateCondition = _useState2[0];
   var dataSelectRange = useCallback(function (type, value) {
     hideDialog();
     setContext(function (ctx) {
@@ -2761,48 +2718,36 @@ var DataVerification = function DataVerification() {
   return /*#__PURE__*/React.createElement("div", {
     id: "fortune-data-verification"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "title"
-  }, toolbar.dataVerification), /*#__PURE__*/React.createElement("div", {
-    className: "box"
+    className: "flex flex-col gap-4"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "box-item",
-    style: {
-      borderTop: "1px solid #E1E4E8"
-    }
+    className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "box-item-title"
-  }, dataVerification.cellRange), /*#__PURE__*/React.createElement("div", {
-    className: "data-verification-range"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "formulaInputFocus",
-    spellCheck: "false",
+    className: "text-heading-xsm mb-2"
+  }, dataVerification.cellRange), /*#__PURE__*/React.createElement(TextField, {
+    rightIcon: /*#__PURE__*/React.createElement(LucideIcon, {
+      name: "Grid2x2",
+      size: "sm"
+    }),
+    "aria-hidden": "true",
+    readOnly: true,
     value: (_context$dataVerifica = context.dataVerification.dataRegulation) === null || _context$dataVerifica === void 0 ? void 0 : _context$dataVerifica.rangeTxt,
     onChange: function onChange(e) {
       var value = e.target.value;
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.rangeTxt = value;
       });
-    }
-  }), /*#__PURE__*/React.createElement("i", {
-    className: "icon",
-    "aria-hidden": "true",
+    },
     onClick: function onClick() {
       hideDialog();
       dataSelectRange("rangeTxt", context.dataVerification.dataRegulation.value1);
-    },
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "tab",
-    width: 18
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "box-item"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "box-item-title"
-  }, dataVerification.verificationCondition), /*#__PURE__*/React.createElement("select", {
-    className: "data-verification-type-select",
+    className: "text-heading-xsm mb-2"
+  }, dataVerification.verificationCondition), /*#__PURE__*/React.createElement(Select$1, {
     value: context.dataVerification.dataRegulation.type,
-    onChange: function onChange(e) {
-      var value = e.target.value;
+    onValueChange: function onValueChange(value) {
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.type = value;
         if (value === "dropdown" || value === "checkbox") {
@@ -2818,18 +2763,14 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value2 = "";
       });
     }
-  }, ["dropdown", "checkbox", "number", "number_integer", "number_decimal", "text_content", "text_length", "date", "validity"].map(function (v) {
-    return /*#__PURE__*/React.createElement("option", {
+  }, /*#__PURE__*/React.createElement(SelectTrigger, null, /*#__PURE__*/React.createElement(SelectValue, null)), /*#__PURE__*/React.createElement(SelectContent, null, ["dropdown", "checkbox", "date"].map(function (v) {
+    return /*#__PURE__*/React.createElement(SelectItem$1, {
       value: v,
       key: v
     }, dataVerification[v]);
-  })), ((_context$dataVerifica2 = context.dataVerification) === null || _context$dataVerifica2 === void 0 ? void 0 : (_context$dataVerifica3 = _context$dataVerifica2.dataRegulation) === null || _context$dataVerifica3 === void 0 ? void 0 : _context$dataVerifica3.type) === "dropdown" && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "data-verification-range"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "formulaInputFocus",
-    spellCheck: "false",
+  }))), ((_context$dataVerifica2 = context.dataVerification) === null || _context$dataVerifica2 === void 0 ? void 0 : (_context$dataVerifica3 = _context$dataVerifica2.dataRegulation) === null || _context$dataVerifica3 === void 0 ? void 0 : _context$dataVerifica3.type) === "dropdown" && (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React.createElement(TextField, {
     value: context.dataVerification.dataRegulation.value1,
     placeholder: dataVerification.placeholder1,
     onChange: function onChange(e) {
@@ -2838,39 +2779,28 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }), /*#__PURE__*/React.createElement("i", {
-    className: "icon",
-    "aria-hidden": "true",
-    onClick: function onClick() {
-      return dataSelectRange("dropDown", context.dataVerification.dataRegulation.value1);
-    },
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "tab",
-    width: 18
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "check"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "mt-4 flex items-center"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "border-2",
     checked: context.dataVerification.dataRegulation.type2 === "true",
-    id: "mul",
-    onChange: function onChange(e) {
+    onCheckedChange: function onCheckedChange(e) {
       var checked = e.target.checked;
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.type2 = "".concat(checked);
       });
     }
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "mul"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ml-2"
   }, dataVerification.allowMultiSelect)))), ((_context$dataVerifica4 = context.dataVerification) === null || _context$dataVerifica4 === void 0 ? void 0 : (_context$dataVerifica5 = _context$dataVerifica4.dataRegulation) === null || _context$dataVerifica5 === void 0 ? void 0 : _context$dataVerifica5.type) === "checkbox" && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
+    className: "mt-4 space-y-2"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "check-box"
-  }, /*#__PURE__*/React.createElement("span", null, dataVerification.selected, " \u2014\u2014 "), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    className: "data-verification-value1",
-    placeholder: dataVerification.placeholder2,
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "data-verification-checkbox-label"
+  }, dataVerification.selected), /*#__PURE__*/React.createElement(TextField, {
     value: (_context$dataVerifica6 = context.dataVerification) === null || _context$dataVerifica6 === void 0 ? void 0 : (_context$dataVerifica7 = _context$dataVerifica6.dataRegulation) === null || _context$dataVerifica7 === void 0 ? void 0 : _context$dataVerifica7.value1,
+    placeholder: dataVerification.placeholder2,
     onChange: function onChange(e) {
       var value = e.target.value;
       setContext(function (ctx) {
@@ -2878,129 +2808,41 @@ var DataVerification = function DataVerification() {
       });
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: "check-box"
-  }, /*#__PURE__*/React.createElement("span", null, dataVerification.notSelected, " \u2014\u2014 "), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    className: "data-verification-value2",
-    placeholder: dataVerification.placeholder2,
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "data-verification-checkbox-label"
+  }, dataVerification.notSelected), /*#__PURE__*/React.createElement(TextField, {
     value: (_context$dataVerifica8 = context.dataVerification) === null || _context$dataVerifica8 === void 0 ? void 0 : (_context$dataVerifica9 = _context$dataVerifica8.dataRegulation) === null || _context$dataVerifica9 === void 0 ? void 0 : _context$dataVerifica9.value2,
+    placeholder: dataVerification.placeholder2,
     onChange: function onChange(e) {
       var value = e.target.value;
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.value2 = value;
       });
     }
-  })))), (((_context$dataVerifica0 = context.dataVerification) === null || _context$dataVerifica0 === void 0 ? void 0 : (_context$dataVerifica1 = _context$dataVerifica0.dataRegulation) === null || _context$dataVerifica1 === void 0 ? void 0 : _context$dataVerifica1.type) === "number" || ((_context$dataVerifica10 = context.dataVerification) === null || _context$dataVerifica10 === void 0 ? void 0 : (_context$dataVerifica11 = _context$dataVerifica10.dataRegulation) === null || _context$dataVerifica11 === void 0 ? void 0 : _context$dataVerifica11.type) === "number_integer" || ((_context$dataVerifica12 = context.dataVerification) === null || _context$dataVerifica12 === void 0 ? void 0 : (_context$dataVerifica13 = _context$dataVerifica12.dataRegulation) === null || _context$dataVerifica13 === void 0 ? void 0 : _context$dataVerifica13.type) === "number_decimal" || ((_context$dataVerifica14 = context.dataVerification) === null || _context$dataVerifica14 === void 0 ? void 0 : (_context$dataVerifica15 = _context$dataVerifica14.dataRegulation) === null || _context$dataVerifica15 === void 0 ? void 0 : _context$dataVerifica15.type) === "text_length") && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React.createElement("select", {
-    className: "data-verification-type-select",
-    value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.type2 = value;
-        ctx.dataVerification.dataRegulation.value1 = "";
-        ctx.dataVerification.dataRegulation.value2 = "";
-      });
-    }
-  }, numberCondition.map(function (v) {
-    return /*#__PURE__*/React.createElement("option", {
-      value: v,
-      key: v
-    }, dataVerification[v]);
-  })), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React.createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "number",
-    placeholder: "1",
-    value: context.dataVerification.dataRegulation.value1,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value1 = value;
-      });
-    }
-  }), /*#__PURE__*/React.createElement("span", null, "-"), /*#__PURE__*/React.createElement("input", {
-    type: "number",
-    placeholder: "100",
-    value: context.dataVerification.dataRegulation.value2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value2 = value;
-      });
-    }
-  }))) : (/*#__PURE__*/React.createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "number",
-    style: {
-      width: "100%"
-    },
-    placeholder: dataVerification.placeholder3,
-    value: context.dataVerification.dataRegulation.value1,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value1 = value;
-      });
-    }
-  }))))), ((_context$dataVerifica16 = context.dataVerification) === null || _context$dataVerifica16 === void 0 ? void 0 : (_context$dataVerifica17 = _context$dataVerifica16.dataRegulation) === null || _context$dataVerifica17 === void 0 ? void 0 : _context$dataVerifica17.type) === "text_content" && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React.createElement("select", {
-    className: "data-verification-type-select",
-    value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.type2 = value;
-        ctx.dataVerification.dataRegulation.value1 = "";
-        ctx.dataVerification.dataRegulation.value2 = "";
-      });
-    }
-  }, ["include", "exclude", "equal"].map(function (v) {
-    return /*#__PURE__*/React.createElement("option", {
-      value: v,
-      key: v
-    }, dataVerification[v]);
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    style: {
-      width: "100%"
-    },
-    placeholder: dataVerification.placeholder4,
-    value: context.dataVerification.dataRegulation.value1,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.value1 = value;
-      });
-    }
-  })))), ((_context$dataVerifica18 = context.dataVerification) === null || _context$dataVerifica18 === void 0 ? void 0 : (_context$dataVerifica19 = _context$dataVerifica18.dataRegulation) === null || _context$dataVerifica19 === void 0 ? void 0 : _context$dataVerifica19.type) === "date" && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React.createElement("select", {
-    className: "data-verification-type-select",
+  })))), ((_context$dataVerifica0 = context.dataVerification) === null || _context$dataVerifica0 === void 0 ? void 0 : (_context$dataVerifica1 = _context$dataVerifica0.dataRegulation) === null || _context$dataVerifica1 === void 0 ? void 0 : _context$dataVerifica1.type) === "date" && (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React.createElement(Select$1, {
     value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
+    onValueChange: function onValueChange(value) {
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.type2 = value;
         ctx.dataVerification.dataRegulation.value1 = "";
         ctx.dataVerification.dataRegulation.value2 = "";
       });
     }
-  }, dateCondition.map(function (v) {
-    return /*#__PURE__*/React.createElement("option", {
+  }, /*#__PURE__*/React.createElement(SelectTrigger, null, /*#__PURE__*/React.createElement(SelectValue, null)), /*#__PURE__*/React.createElement(SelectContent, null, dateCondition.map(function (v) {
+    return /*#__PURE__*/React.createElement(SelectItem$1, {
       value: v,
       key: v
     }, dataVerification[v]);
-  })), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React.createElement("div", {
-    className: "input-box"
+  }))), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4 flex gap-2 items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "datepicker-toggle"
   }, /*#__PURE__*/React.createElement("input", {
     type: "date",
-    placeholder: "1",
+    className: "datepicker-input",
     value: context.dataVerification.dataRegulation.value1,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -3008,9 +2850,13 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }), /*#__PURE__*/React.createElement("span", null, "-"), /*#__PURE__*/React.createElement("input", {
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "datepicker-toggle-button"
+  })), /*#__PURE__*/React.createElement("span", null, "-"), /*#__PURE__*/React.createElement("div", {
+    className: "datepicker-toggle"
+  }, /*#__PURE__*/React.createElement("input", {
     type: "date",
-    placeholder: "100",
+    className: "datepicker-input",
     value: context.dataVerification.dataRegulation.value2,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -3018,13 +2864,15 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value2 = value;
       });
     }
-  }))) : (/*#__PURE__*/React.createElement("div", {
-    className: "input-box"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "datepicker-toggle-button"
+  })))) : (/*#__PURE__*/React.createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "datepicker-toggle"
   }, /*#__PURE__*/React.createElement("input", {
     type: "date",
-    style: {
-      width: "100%"
-    },
+    className: "datepicker-input",
     placeholder: dataVerification.placeholder3,
     value: context.dataVerification.dataRegulation.value1,
     onChange: function onChange(e) {
@@ -3033,57 +2881,35 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }))))), ((_context$dataVerifica20 = context.dataVerification) === null || _context$dataVerifica20 === void 0 ? void 0 : (_context$dataVerifica21 = _context$dataVerifica20.dataRegulation) === null || _context$dataVerifica21 === void 0 ? void 0 : _context$dataVerifica21.type) === "validity" && (/*#__PURE__*/React.createElement("div", {
-    className: "show-box-item"
-  }, /*#__PURE__*/React.createElement("select", {
-    className: "data-verification-type-select",
-    value: context.dataVerification.dataRegulation.type2,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setContext(function (ctx) {
-        ctx.dataVerification.dataRegulation.type2 = value;
-        ctx.dataVerification.dataRegulation.value1 = "";
-        ctx.dataVerification.dataRegulation.value2 = "";
-      });
-    }
-  }, ["identificationNumber", "phoneNumber"].map(function (v) {
-    return /*#__PURE__*/React.createElement("option", {
-      value: v,
-      key: v
-    }, dataVerification[v]);
-  }))))), /*#__PURE__*/React.createElement("div", {
-    className: "box-item"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "datepicker-toggle-button"
+  }))))))), /*#__PURE__*/React.createElement(Divider$2, {
+    className: "w-full border-t-[1px]"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2"
   }, ["prohibitInput", "hintShow"].map(function (v) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "check",
-      key: "div".concat(v)
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      id: v,
-      key: "input".concat(v),
+      key: v,
+      className: "flex items-center"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      className: "border-2",
       checked: context.dataVerification.dataRegulation[v],
-      onChange: function onChange() {
+      onCheckedChange: function onCheckedChange(e) {
+        var checked = e.target.checked;
         setContext(function (ctx) {
           var _ctx$dataVerification5;
           var dataRegulation = (_ctx$dataVerification5 = ctx.dataVerification) === null || _ctx$dataVerification5 === void 0 ? void 0 : _ctx$dataVerification5.dataRegulation;
           if (v === "prohibitInput") {
-            dataRegulation.prohibitInput = !dataRegulation.prohibitInput;
+            dataRegulation.prohibitInput = checked;
           } else if (v === "hintShow") {
-            dataRegulation.hintShow = !dataRegulation.hintShow;
+            dataRegulation.hintShow = checked;
           }
         });
       }
-    }), /*#__PURE__*/React.createElement("label", {
-      htmlFor: v,
-      key: "label".concat(v)
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "ml-2"
     }, dataVerification[v]));
-  }), ((_context$dataVerifica22 = context.dataVerification) === null || _context$dataVerifica22 === void 0 ? void 0 : (_context$dataVerifica23 = _context$dataVerifica22.dataRegulation) === null || _context$dataVerifica23 === void 0 ? void 0 : _context$dataVerifica23.hintShow) && (/*#__PURE__*/React.createElement("div", {
-    className: "input-box"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    style: {
-      width: "100%"
-    },
+  }), ((_context$dataVerifica10 = context.dataVerification) === null || _context$dataVerifica10 === void 0 ? void 0 : (_context$dataVerifica11 = _context$dataVerifica10.dataRegulation) === null || _context$dataVerifica11 === void 0 ? void 0 : _context$dataVerifica11.hintShow) && (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextField, {
     placeholder: dataVerification.placeholder5,
     value: context.dataVerification.dataRegulation.hintValue,
     onChange: function onChange(e) {
@@ -3092,25 +2918,37 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.hintValue = value;
       });
     }
-  }))))), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-primary",
+  }))))), /*#__PURE__*/React.createElement(Divider$2, {
+    className: "w-full border-t-[1px] my-4"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 justify-between items-center"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
     onClick: function onClick() {
-      btn("confirm");
+      btn("close");
+    }
+  }, button.cancel), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
     },
-    tabIndex: 0
-  }, button.confirm), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-close",
     onClick: function onClick() {
       btn("delete");
+    }
+  }, dataVerification.deleteVerification), /*#__PURE__*/React.createElement(Button$1, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
     },
-    tabIndex: 0
-  }, dataVerification.deleteVerification), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-close",
     onClick: function onClick() {
-      btn("close");
-    },
-    tabIndex: 0
-  }, button.cancel));
+      btn("confirm");
+    }
+  }, button.confirm))));
 };
 
 function getDisplayedRangeTxt(context) {
@@ -3122,12 +2960,7 @@ function getDisplayedRangeTxt(context) {
   return (_context$rangeDialog$ = (_context$rangeDialog = context.rangeDialog) === null || _context$rangeDialog === void 0 ? void 0 : _context$rangeDialog.rangeTxt) !== null && _context$rangeDialog$ !== void 0 ? _context$rangeDialog$ : "";
 }
 
-var datepickerStyles = "\n  .datepicker-toggle {\n    display: inline-block;\n    position: relative;\n    width: 100%;\n  }\n  \n  .datepicker-toggle-button {\n    opacity: 0.3;\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 16px;\n    height: 16px;\n    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjE2IiB5MT0iMiIgeDI9IjE2IiB5Mj0iNiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMiIgeDI9IjgiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxMCIgeDI9IjIxIiB5Mj0iMTAiPjwvbGluZT48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-position: center;\n    pointer-events: none;\n  }\n  \n  .datepicker-input {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #1a202c;\n    background-color: #fff;\n    cursor: pointer;\n  }\n  \n  .datepicker-input::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n  }\n  \n  .datepicker-input:focus {\n    outline: none;\n    border-color: #4299e1;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);\n  }\n";
-if (typeof document !== "undefined") {
-  var styleSheet = document.createElement("style");
-  styleSheet.textContent = datepickerStyles;
-  document.head.appendChild(styleSheet);
-}
+injectDatepickerStyles();
 var ConditionRules = function ConditionRules(_ref) {
   var type = _ref.type;
   var _useContext = useContext(WorkbookContext),
@@ -3448,7 +3281,8 @@ var RangeDialog = function RangeDialog() {
     showDialog = _useDialog.showDialog;
   var _locale = locale(context),
     dataVerification = _locale.dataVerification,
-    button = _locale.button;
+    button = _locale.button,
+    toolbar = _locale.toolbar;
   var _useState = useState(getDisplayedRangeTxt(context)),
     _useState2 = _slicedToArray(_useState, 2),
     rangeTxt2 = _useState2[0],
@@ -3473,7 +3307,7 @@ var RangeDialog = function RangeDialog() {
       }), undefined, locale(context).conditionformat["conditionformat_".concat(rulesType)]);
       return;
     }
-    showDialog(/*#__PURE__*/React.createElement(DataVerification, null));
+    showDialog(/*#__PURE__*/React.createElement(DataVerification, null), undefined, toolbar.dataVerification);
   }, [setContext, showDialog, context]);
   useEffect(function () {
     setRangeTxt2(getDisplayedRangeTxt(context));
@@ -3662,7 +3496,7 @@ var DropDownList = function DropDownList() {
             arr.splice(index, 1);
           }
           setSelected(arr);
-          setDropcownValue(ctx, v, arr);
+          setDropdownValue(ctx, v, arr);
         });
       },
       tabIndex: 0
@@ -3677,6 +3511,118 @@ var DropDownList = function DropDownList() {
   }));
 };
 
+var IframeBoxs = function IframeBoxs() {
+  var _context$insertedIfra;
+  var _useContext = useContext(WorkbookContext),
+    context = _useContext.context,
+    setContext = _useContext.setContext,
+    refs = _useContext.refs;
+  var containerRef = useRef(null);
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      if (!containerRef.current) return;
+      var iframeBoxes = containerRef.current.querySelectorAll(".luckysheet-modal-dialog-iframe");
+      var clickedInsideSomeIframe = Array.from(iframeBoxes).some(function (el) {
+        return el.contains(e.target);
+      });
+      if (!clickedInsideSomeIframe && context.activeIframe !== undefined) {
+        setContext(function (ctx) {
+          ctx.activeIframe = undefined;
+        });
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [context.activeIframe, setContext]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "fortune-iframe-boxes",
+    ref: containerRef
+  }, (_context$insertedIfra = context.insertedIframes) === null || _context$insertedIfra === void 0 ? void 0 : _context$insertedIfra.map(function (frame) {
+    var isActive = frame.id === context.activeIframe;
+    var style = {
+      width: frame.width * context.zoomRatio,
+      height: frame.height * context.zoomRatio,
+      left: frame.left * context.zoomRatio,
+      top: frame.top * context.zoomRatio,
+      position: "absolute",
+      padding: 0,
+      zIndex: isActive ? 300 : 200
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      key: frame.id,
+      id: isActive ? "fortune-modal-dialog-activeIframe" : frame.id,
+      className: "luckysheet-modal-dialog luckysheet-modal-dialog-iframe",
+      style: style,
+      onClick: function onClick(e) {
+        if (!isActive) {
+          setContext(function (ctx) {
+            ctx.activeIframe = frame.id;
+          });
+        }
+        e.stopPropagation();
+      },
+      onMouseDown: function onMouseDown(e) {
+        if (isActive) {
+          onIframeMoveStart(context, refs.globalCache, e.nativeEvent);
+        }
+        e.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "luckysheet-modal-dialog-content",
+      style: {
+        width: "100%",
+        height: "100%",
+        overflow: "hidden"
+      }
+    }, /*#__PURE__*/React.createElement("iframe", {
+      title: "iframe-".concat(frame.id),
+      src: frame.src,
+      style: {
+        width: "100%",
+        height: "100%",
+        border: "none",
+        pointerEvents: "none"
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "luckysheet-modal-dialog-border"
+    }), isActive && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "luckysheet-modal-dialog-resize"
+    }, ["lt", "mt", "lm", "rm", "rt", "lb", "mb", "rb"].map(function (dir) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: dir,
+        className: "luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-".concat(dir),
+        "data-type": dir,
+        style: {
+          zIndex: 300,
+          position: "absolute"
+        },
+        onMouseDown: function onMouseDown(e) {
+          onIframeResizeStart(context, refs.globalCache, e.nativeEvent, dir);
+          e.stopPropagation();
+        }
+      });
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "luckysheet-modal-dialog-controll"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "luckysheet-modal-controll-btn luckysheet-modal-controll-del",
+      role: "button",
+      tabIndex: 0,
+      title: "Delete",
+      onClick: function onClick() {
+        setContext(function (ctx) {
+          var _ctx$insertedIframes;
+          ctx.insertedIframes = ctx === null || ctx === void 0 ? void 0 : (_ctx$insertedIframes = ctx.insertedIframes) === null || _ctx$insertedIframes === void 0 ? void 0 : _ctx$insertedIframes.filter(function (f) {
+            return f.id !== frame.id;
+          });
+          ctx.activeIframe = undefined;
+        });
+      }
+    }, "DELETE")))));
+  }));
+};
+
 var SheetOverlay = function SheetOverlay() {
   var _refs$cellArea$curren, _refs$cellArea$curren2, _context$luckysheet_s, _context$luckysheet_s2, _context$luckysheet_s3, _context$luckysheet_s4, _context$luckysheet_s5, _context$luckysheet_s6, _context$presences$le, _context$presences, _context$linkCard, _context$rangeDialog;
   var _useContext = useContext(WorkbookContext),
@@ -4119,7 +4065,7 @@ var SheetOverlay = function SheetOverlay() {
     id: "luckysheet-multipleRange-show"
   }), /*#__PURE__*/React.createElement("div", {
     id: "luckysheet-dynamicArray-hightShow"
-  }), /*#__PURE__*/React.createElement(ImgBoxs, null), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(ImgBoxs, null), /*#__PURE__*/React.createElement(IframeBoxs, null), /*#__PURE__*/React.createElement("div", {
     id: "luckysheet-dataVerification-dropdown-btn",
     onClick: function onClick() {
       setContext(function (ctx) {
@@ -4132,8 +4078,9 @@ var SheetOverlay = function SheetOverlay() {
       display: "none"
     }
   }, /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "combo-arrow",
-    width: 16
+    name: "caret-down-fill",
+    width: 16,
+    height: 16
   })), context.dataVerificationDropDownList && /*#__PURE__*/React.createElement(DropDownList, null), /*#__PURE__*/React.createElement("div", {
     id: "luckysheet-dataVerification-showHintBox",
     className: "luckysheet-mousedown-cancel",
@@ -4367,9 +4314,6 @@ var Sheet = function Sheet(_ref) {
     }
   }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
   var onWheel = useCallback(function (e) {
-    var el = document.getElementById("function-details");
-    var isMouseOver = el === null || el === void 0 ? void 0 : el.matches(":hover");
-    if (el && isMouseOver) return;
     setContext(function (draftCtx) {
       handleGlobalWheel(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
     });
@@ -4455,6 +4399,9 @@ var Combo = function Combo(_ref) {
     setPopupPosition = _useState4[1];
   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);
+  }, [iconId]);
   useOutsideClick(popupRef, function () {
     setOpen(false);
   });
@@ -4482,7 +4429,7 @@ var Combo = function Combo(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     ref: buttonRef,
     className: "fortune-toolbar-combo"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !isLucideIcon ? (/*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-combo-button",
     onClick: function onClick(e) {
       if (_onClick) {
@@ -4501,7 +4448,13 @@ var Combo = function Combo(_ref) {
     name: iconId
   })) : (/*#__PURE__*/React.createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text !== undefined ? text : ""))), showArrow && (/*#__PURE__*/React.createElement("div", {
+  }, text !== undefined ? text : "")))) : (/*#__PURE__*/React.createElement(IconButton, {
+    icon: getIcon(iconId),
+    variant: "ghost",
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
+  })), showArrow && (/*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-combo-arrow",
     onClick: function onClick() {
       return setOpen(!open);
@@ -5406,6 +5359,121 @@ var FormatSearch = function FormatSearch(_ref) {
   }, button.cancel)));
 };
 
+var DuneChartsInputModal = function DuneChartsInputModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit,
+    icon = _ref.icon,
+    _ref$submitText = _ref.submitText,
+    submitText = _ref$submitText === void 0 ? "Submit" : _ref$submitText,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "Enter a value..." : _ref$placeholder;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    url = _useState2[0],
+    setUrl = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showError = _useState4[0],
+    setShowError = _useState4[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (isOpen && inputRef.current) {
+      var timer = setTimeout(function () {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      }, 100);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+    return undefined;
+  }, [isOpen]);
+  if (!isOpen) return null;
+  var handleSubmit = function handleSubmit() {
+    var trimmed = url.trim();
+    if (trimmed && sanitizeDuneUrl(trimmed)) {
+      onSubmit(trimmed);
+      setUrl("");
+      setShowError(false);
+      onClose();
+    } else {
+      setShowError(true);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      handleSubmit();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-overlay",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "input-modal",
+    style: {
+      transformOrigin: "top center"
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-header"
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: icon
+  }), /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    className: "modal-input",
+    type: "text",
+    placeholder: placeholder,
+    value: url,
+    onChange: function onChange(e) {
+      setUrl(e.target.value);
+      setShowError(false);
+    },
+    onKeyDown: handleKeyDown
+  })), showError && (/*#__PURE__*/React.createElement("div", {
+    className: "modal-error-message"
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    style: {
+      width: "14px",
+      height: "14px"
+    },
+    name: "circle-alert"
+  }), /*#__PURE__*/React.createElement("span", null, "Please make sure the URL is a valid Dune chart link"))), url.length > 0 && !showError && (/*#__PURE__*/React.createElement("div", {
+    className: "modal-footer"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    onClick: handleSubmit,
+    className: "modal-button"
+  }, submitText)))));
+};
+
+var getIcon = function getIcon(title) {
+  switch (title) {
+    case "align-left":
+      return "AlignLeft";
+    case "align-center":
+      return "AlignCenter";
+    case "align-right":
+      return "AlignRight";
+    case "align-top":
+      return "ArrowUpFromLine";
+    case "align-middle":
+      return "AlignVerticalMiddle";
+    case "align-bottom":
+      return "ArrowDownFromLine";
+    case "text-overflow":
+      return "TextOverflow";
+    case "text-wrap":
+      return "WrapText";
+    case "text-clip":
+      return "TextClip";
+    default:
+      return "";
+  }
+};
 var Toolbar = function Toolbar(_ref) {
   var _context$luckysheet_s, _flowdata$row, _settings$customToolb;
   var setMoreItems = _ref.setMoreItems,
@@ -5427,6 +5495,10 @@ var Toolbar = function Toolbar(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     itemLocations = _useState4[0],
     setItemLocations = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showDuneModal = _useState6[0],
+    setShowDuneModal = _useState6[1];
   var _useDialog = useDialog(),
     showDialog = _useDialog.showDialog,
     hideDialog = _useDialog.hideDialog;
@@ -5457,12 +5529,12 @@ var Toolbar = function Toolbar(_ref) {
   var sheetWidth = context.luckysheetTableContentHW[0];
   var currency = settings.currency;
   var defaultFormat = defaultFmt(currency);
-  var _useState5 = useState("#000000"),
-    _useState6 = _slicedToArray(_useState5, 1),
-    customColor = _useState6[0];
-  var _useState7 = useState("1"),
+  var _useState7 = useState("#000000"),
     _useState8 = _slicedToArray(_useState7, 1),
-    customStyle = _useState8[0];
+    customColor = _useState8[0];
+  var _useState9 = useState("1"),
+    _useState0 = _slicedToArray(_useState9, 1),
+    customStyle = _useState0[0];
   var showSubMenu = useCallback(function (e, className) {
     var target = e.target;
     var menuItem = target.className === "fortune-toolbar-menu-line" ? target.parentElement : target;
@@ -5742,27 +5814,38 @@ var Toolbar = function Toolbar(_ref) {
         tooltip: toolbar.horizontalAlign,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, items.map(function (_ref3) {
-          var text = _ref3.text,
-            title = _ref3.title;
-          return /*#__PURE__*/React.createElement(Option, {
+        return /*#__PURE__*/React.createElement(Select, {
+          style: {
+            minWidth: "fit-content",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 4
+          }
+        }, items.map(function (_ref3) {
+          var _$find2;
+          var title = _ref3.title;
+          return /*#__PURE__*/React.createElement(IconButton, {
             key: title,
+            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),
+            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 handleHorizontalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
               });
               setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: title
-          })));
+            },
+            tabIndex: 0
+          });
         }));
       });
     }
     if (name === "vertical-align") {
-      var _$find2;
+      var _$find3;
       var _items = [{
         title: "align-top",
         text: align.top,
@@ -5777,29 +5860,40 @@ var Toolbar = function Toolbar(_ref) {
         value: 2
       }];
       return /*#__PURE__*/React.createElement(Combo, {
-        iconId: ((_$find2 = _.find(_items, function (item) {
+        iconId: ((_$find3 = _.find(_items, function (item) {
           return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
-        })) === null || _$find2 === void 0 ? void 0 : _$find2.title) || "align-top",
+        })) === null || _$find3 === void 0 ? void 0 : _$find3.title) || "align-top",
         key: name,
         tooltip: toolbar.verticalAlign,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, _items.map(function (_ref4) {
-          var text = _ref4.text,
-            title = _ref4.title;
-          return /*#__PURE__*/React.createElement(Option, {
+        return /*#__PURE__*/React.createElement(Select, {
+          style: {
+            minWidth: "fit-content",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 4
+          }
+        }, _items.map(function (_ref4) {
+          var _$find4;
+          var title = _ref4.title;
+          return /*#__PURE__*/React.createElement(IconButton, {
             key: title,
+            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),
+            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 handleVerticalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
               });
               setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: title
-          })));
+            },
+            tabIndex: 0
+          });
         }));
       });
     }
@@ -5874,7 +5968,7 @@ var Toolbar = function Toolbar(_ref) {
         key: name,
         onClick: function onClick() {
           if (context.allowEdit === false) return;
-          showDialog(/*#__PURE__*/React.createElement(DataVerification, null));
+          showDialog(/*#__PURE__*/React.createElement(DataVerification, null), undefined, toolbar.dataVerification);
         }
       });
     }
@@ -6348,12 +6442,23 @@ var Toolbar = function Toolbar(_ref) {
         tooltip: toolbar.textWrap,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, _items6.map(function (_ref1) {
-          var text = _ref1.text,
-            iconId = _ref1.iconId,
+        return /*#__PURE__*/React.createElement(Select, {
+          style: {
+            minWidth: "fit-content",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 4
+          }
+        }, _items6.map(function (_ref1) {
+          var iconId = _ref1.iconId,
             value = _ref1.value;
-          return /*#__PURE__*/React.createElement(Option, {
+          return /*#__PURE__*/React.createElement(IconButton, {
             key: value,
+            isActive: _curr.value === value,
+            icon: getIcon(iconId),
+            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 var d = getFlowdata(ctx);
@@ -6361,12 +6466,9 @@ var Toolbar = function Toolbar(_ref) {
                 updateFormat(ctx, refs.cellInput.current, d, "tb", value);
               });
               setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: iconId
-          })));
+            },
+            tabIndex: 0
+          });
         }));
       });
     }
@@ -6517,7 +6619,7 @@ var Toolbar = function Toolbar(_ref) {
         });
       }
     });
-  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDialog, hideDialog, 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]);
+  }, [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,
     className: "fortune-toolbar",
@@ -6572,7 +6674,29 @@ var Toolbar = function Toolbar(_ref) {
       icon: n.icon,
       iconName: n.iconName
     }, n.children);
-  }));
+  }), /*#__PURE__*/React.createElement(Button, {
+    iconId: "dune-logo",
+    tooltip: "Insert Dune Chart",
+    key: "dune-charts",
+    onClick: function onClick() {
+      if (context.allowEdit === false) return;
+      setShowDuneModal(true);
+    }
+  }), showDuneModal && (/*#__PURE__*/React.createElement(DuneChartsInputModal, {
+    isOpen: showDuneModal,
+    onSubmit: function onSubmit(url) {
+      setContext(function (draftCtx) {
+        insertDuneChart(draftCtx, url);
+      });
+      setShowDuneModal(false);
+    },
+    onClose: function onClose() {
+      return setShowDuneModal(false);
+    },
+    icon: "dune-logo",
+    placeholder: "Add Dune chart link to embed",
+    submitText: "Embed Dune chart"
+  })));
 };
 
 var LocationBox = function LocationBox() {
@@ -9703,6 +9827,74 @@ var SVGDefines = function SVGDefines(_ref) {
     "clip-rule": "evenodd",
     d: "M12.75 2.25C13.1642 2.25 13.5 2.58579 13.5 3V15C13.5 15.4142 13.1642 15.75 12.75 15.75C12.3358 15.75 12 15.4142 12 15V3C12 2.58579 12.3358 2.25 12.75 2.25Z",
     fill: "#363B3F"
+  })), /*#__PURE__*/React.createElement("symbol", {
+    id: "dune-logo",
+    viewBox: "0 0 18 16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "18",
+    height: "16",
+    viewBox: "0 0 18 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    "clip-path": "url(#clip0_80_246690)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7.99485 15.9875C12.4102 15.9875 15.9896 12.4085 15.9896 7.99373C15.9896 3.57891 12.4102 0 7.99485 0C3.57941 0 0 3.57891 0 7.99373C0 12.4085 3.57941 15.9875 7.99485 15.9875Z",
+    fill: "#F4603E"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M1.39258 12.5028C1.39258 12.5028 6.67562 10.7723 15.9868 7.73633C15.9868 7.73633 16.4968 12.7082 11.3424 15.3015C11.3424 15.3015 8.80068 16.5197 6.01215 15.7383C6.01215 15.7383 3.23545 15.2142 1.39258 12.5028Z",
+    fill: "#1E1870"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_80_246690"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  }))))), /*#__PURE__*/React.createElement("symbol", {
+    id: "circle-alert",
+    viewBox: "0 0 14 14",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    "clip-path": "url(#clip0_138_127604)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.99967 4.0835C7.32184 4.0835 7.58301 4.34466 7.58301 4.66683V7.00016C7.58301 7.32233 7.32184 7.5835 6.99967 7.5835C6.67751 7.5835 6.41634 7.32233 6.41634 7.00016V4.66683C6.41634 4.34466 6.67751 4.0835 6.99967 4.0835Z",
+    fill: "#FB3449"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.99967 8.75016C6.67751 8.75016 6.41634 9.01133 6.41634 9.3335C6.41634 9.65566 6.67751 9.91683 6.99967 9.91683H7.00551C7.32767 9.91683 7.58884 9.65566 7.58884 9.3335C7.58884 9.01133 7.32767 8.75016 7.00551 8.75016H6.99967Z",
+    fill: "#FB3449"
+  }), /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M0.583008 7.00016C0.583008 3.45634 3.45585 0.583496 6.99967 0.583496C10.5435 0.583496 13.4163 3.45634 13.4163 7.00016C13.4163 10.544 10.5435 13.4168 6.99967 13.4168C3.45585 13.4168 0.583008 10.544 0.583008 7.00016ZM6.99967 1.75016C4.10018 1.75016 1.74967 4.10067 1.74967 7.00016C1.74967 9.89966 4.10018 12.2502 6.99967 12.2502C9.89917 12.2502 12.2497 9.89966 12.2497 7.00016C12.2497 4.10067 9.89917 1.75016 6.99967 1.75016Z",
+    fill: "#FB3449"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_138_127604"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "14",
+    height: "14",
+    fill: "white"
+  }))))), /*#__PURE__*/React.createElement("symbol", {
+    id: "caret-down-fill",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "14",
+    height: "14",
+    rx: "4",
+    fill: "black",
+    "fill-opacity": "0.1"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.64775 8.97978L3.77152 6.10355C3.45654 5.78857 3.67962 5.25 4.12507 5.25H9.87753C10.323 5.25 10.5461 5.78857 10.2311 6.10355L7.35486 8.97978C7.15959 9.17504 6.84301 9.17504 6.64775 8.97978Z",
+    fill: "#363B3F"
   }))));
 };
 
@@ -10342,6 +10534,9 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
     },
     getLocaleContext: function getLocaleContext() {
       return locale(context);
+    },
+    getWorkbookContect: function getWorkbookContect() {
+      return context;
     }
   };
 }
@@ -11065,6 +11260,48 @@ var SheetList = function SheetList() {
   }));
 };
 
+var DunePreview = function DunePreview(_ref) {
+  var url = _ref.url,
+    position = _ref.position,
+    onKeepAsLink = _ref.onKeepAsLink,
+    onEmbed = _ref.onEmbed;
+  var embedUrl = sanitizeDuneUrl(url);
+  if (!embedUrl) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fortune-dune-preview",
+    style: {
+      left: position.left,
+      top: position.top
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-dune-preview-header"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "fortune-dune-preview-title"
+  }, "Detected Dune chart link")), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-dune-preview-content"
+  }, /*#__PURE__*/React.createElement("iframe", {
+    src: embedUrl,
+    title: "Dune Chart Preview",
+    style: {
+      width: "100%",
+      height: "100%",
+      border: "none"
+    }
+  })), /*#__PURE__*/React.createElement("p", null, "Do you want to insert Dune chart?"), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-dune-preview-footer"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "ghost",
+    onClick: onKeepAsLink,
+    className: "!w-fit px-0"
+  }, "Keep as Link"), /*#__PURE__*/React.createElement(Button$1, {
+    onClick: onEmbed,
+    className: "!w-fit px-0"
+  }, "Embed")));
+};
+
 var _excluded = ["onChange", "onOp", "data"];
 enablePatches();
 var triggerGroupValuesRefresh = function triggerGroupValuesRefresh(ctx) {
@@ -11597,7 +11834,25 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style: {
       width: "60px"
     }
-  }, formula.count, ": ", calInfo.count)), !!calInfo.numberC && !!calInfo.sum && (/*#__PURE__*/React.createElement("div", null, formula.sum, ": ", calInfo.sum)), !!calInfo.numberC && !!calInfo.average && (/*#__PURE__*/React.createElement("div", null, formula.average, ": ", calInfo.average)), !!calInfo.numberC && !!calInfo.max && (/*#__PURE__*/React.createElement("div", null, formula.max, ": ", calInfo.max)), !!calInfo.numberC && !!calInfo.min && (/*#__PURE__*/React.createElement("div", null, formula.min, ": ", calInfo.min)))))));
+  }, formula.count, ": ", calInfo.count)), !!calInfo.numberC && !!calInfo.sum && (/*#__PURE__*/React.createElement("div", null, formula.sum, ": ", calInfo.sum)), !!calInfo.numberC && !!calInfo.average && (/*#__PURE__*/React.createElement("div", null, formula.average, ": ", calInfo.average)), !!calInfo.numberC && !!calInfo.max && (/*#__PURE__*/React.createElement("div", null, formula.max, ": ", calInfo.max)), !!calInfo.numberC && !!calInfo.min && (/*#__PURE__*/React.createElement("div", null, formula.min, ": ", calInfo.min)))), context.showDunePreview && (/*#__PURE__*/React.createElement(DunePreview, {
+    url: context.showDunePreview.url,
+    position: context.showDunePreview.position,
+    onKeepAsLink: function onKeepAsLink() {
+      setContextWithProduce(function (draftCtx) {
+        draftCtx.showDunePreview = undefined;
+      }, {
+        noHistory: true
+      });
+    },
+    onEmbed: function onEmbed() {
+      setContextWithProduce(function (draftCtx) {
+        insertDuneChart(draftCtx, context.showDunePreview.url);
+        draftCtx.showDunePreview = undefined;
+      }, {
+        noHistory: true
+      });
+    }
+  })))));
 });
 
 export { Workbook };