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

package/dist/index.js

@@ -184,7 +184,7 @@ function _regenerator() {
             i = p[t],
             d = G.p,
             l = i[2];
-          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));
+          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));
         }
         if (o || r > 1) return a;
         throw y = !0, n;
@@ -796,12 +796,37 @@ var ContentEditable = function ContentEditable(_ref) {
 };
 
 var FormulaSearch = function FormulaSearch(props) {
+  var _context$luckysheet_s;
   var _useContext = React.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 = React.useRef(null);
+  var _useState = React.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);
+  };
+  React.useEffect(function () {
+    calcuatePopUpPlacement();
+  });
   if (___default['default'].isEmpty(context.functionCandidates)) return null;
   return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: hintRef,
     id: "luckysheet-formula-search-c",
-    className: "luckysheet-formula-search-c"
+    className: "luckysheet-formula-search-c",
+    style: {
+      top: top
+    }
   }), context.functionCandidates.map(function (v, index) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
       key: v.n,
@@ -851,8 +876,10 @@ var FormulaSearch = function FormulaSearch(props) {
 };
 
 var FormulaHint = function FormulaHint(props) {
+  var _context$luckysheet_s;
   var _useContext = React.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 = fortuneCore.locale(context),
     formulaMore = _locale.formulaMore;
   var fn = context.formulaCache.functionlistMap[context.functionHint];
@@ -868,7 +895,7 @@ var FormulaHint = function FormulaHint(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     isKeyAdded = _useState6[0],
     setApiKeyAdded = _useState6[1];
-  var _useState7 = React.useState(false),
+  var _useState7 = React.useState(true),
     _useState8 = _slicedToArray(_useState7, 2),
     showFunctionBody = _useState8[0],
     setShouldShowFunctionBody = _useState8[1];
@@ -882,11 +909,66 @@ var FormulaHint = function FormulaHint(props) {
   var apiKeyPlaceholder = {
     ETHERSCAN_API_KEY: "Etherscan API key"
   };
+  var hintRef = React.useRef(null);
+  var _useState9 = React.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);
+  };
+  React.useEffect(function () {
+    calcuatePopUpPlacement();
+  });
+  React.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__default['default'].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"),
@@ -977,8 +1059,11 @@ var FormulaHint = function FormulaHint(props) {
     height: 16
   })))), showFunctionBody && (/*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-content",
+    id: "function-details",
     style: {
-      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA")
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      maxHeight: "318px",
+      overflowY: "scroll"
     }
   }, fn.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
     style: {
@@ -1115,8 +1200,12 @@ var FormulaHint = function FormulaHint(props) {
       borderBottomRightRadius: "10px"
     },
     className: "w-full"
-  }, /*#__PURE__*/React__default['default'].createElement("p", {
-    className: "color-text-link text-helper-text-sm"
+  }, /*#__PURE__*/React__default['default'].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"
   }, "Learn More")));
 };
 
@@ -1215,6 +1304,38 @@ var InputBox = function InputBox() {
   var getActiveFormula = React.useCallback(function () {
     return document.querySelector(".luckysheet-formula-search-item-active");
   }, []);
+  var insertSelectedFormula = React.useCallback(function (formulaName) {
+    var _getrangeseleciton;
+    var textEditor = document.getElementById("luckysheet-rich-text-editor");
+    if (!textEditor) return;
+    var searchTxt = ((_getrangeseleciton = fortuneCore.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 = React.useCallback(function () {
     var activeFormula = getActiveFormula();
     if (activeFormula) {
@@ -1222,89 +1343,24 @@ var InputBox = function InputBox() {
     }
   }, [getActiveFormula]);
   var selectActiveFormula = React.useCallback(function (e) {
-    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 = fortuneCore.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;
-        });
-      }
+    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);
       e.preventDefault();
       e.stopPropagation();
     }
-  }, [getActiveFormula, setContext]);
+  }, [getActiveFormula, insertSelectedFormula]);
   var selectActiveFormulaOnClick = React.useCallback(function (e) {
-    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 = fortuneCore.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;
-        });
-      }
+    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);
       e.preventDefault();
       e.stopPropagation();
     }
-  }, [getActiveFormula, setContext]);
+  }, [getActiveFormula, insertSelectedFormula]);
   var onKeyDown = React.useCallback(function (e) {
     lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
     preText.current = inputRef.current.innerText;
@@ -1421,10 +1477,7 @@ var InputBox = function InputBox() {
     onKeyDown: onKeyDown,
     onPaste: onPaste,
     allowEdit: edit ? !isHidenRC : edit
-  })), document.activeElement === inputRef.current && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(FormulaSearch, {
-    style: {
-      top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
-    },
+  })), (context.functionCandidates.length > 0 || context.functionHint) && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(FormulaSearch, {
     onMouseOver: function onMouseOver(e) {
       if (document.getElementById("luckysheet-formula-search-c")) {
         var hoveredItem = e.target.closest(".luckysheet-formula-search-item");
@@ -1434,14 +1487,10 @@ var InputBox = function InputBox() {
       }
       e.preventDefault();
     },
-    onClick: function onClick(e) {
+    onMouseDown: function onMouseDown(e) {
       selectActiveFormulaOnClick(e);
     }
-  }), /*#__PURE__*/React__default['default'].createElement(FormulaHint, {
-    style: {
-      top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
-    }
-  }))));
+  }), /*#__PURE__*/React__default['default'].createElement(FormulaHint, null))));
 };
 
 var ScrollBar = function ScrollBar(_ref) {
@@ -2571,18 +2620,8 @@ 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;
+  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 _useContext = React.useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext;
@@ -2591,11 +2630,15 @@ var DataVerification = function DataVerification() {
     hideDialog = _useDialog.hideDialog;
   var _locale = fortuneCore.locale(context),
     dataVerification = _locale.dataVerification,
+    toolbar = _locale.toolbar,
     button = _locale.button,
     generalDialog = _locale.generalDialog;
-  var _useState = React.useState(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"]),
+  var _useState = React.useState(["between", "notBetween", "equal", "notEqualTo", "moreThanThe", "lessThan", "greaterOrEqualTo", "lessThanOrEqualTo"]),
     _useState2 = _slicedToArray(_useState, 1),
-    dateCondition = _useState2[0];
+    numberCondition = _useState2[0];
+  var _useState3 = React.useState(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"]),
+    _useState4 = _slicedToArray(_useState3, 1),
+    dateCondition = _useState4[0];
   var dataSelectRange = React.useCallback(function (type, value) {
     hideDialog();
     setContext(function (ctx) {
@@ -2730,36 +2773,48 @@ var DataVerification = function DataVerification() {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "fortune-data-verification"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex flex-col gap-4"
+    className: "title"
+  }, toolbar.dataVerification), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "box"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex flex-col"
+    className: "box-item",
+    style: {
+      borderTop: "1px solid #E1E4E8"
+    }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "text-heading-xsm mb-2"
-  }, dataVerification.cellRange), /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
-    rightIcon: /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
-      name: "Grid2x2",
-      size: "sm"
-    }),
-    "aria-hidden": "true",
-    readOnly: true,
+    className: "box-item-title"
+  }, dataVerification.cellRange), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "data-verification-range"
+  }, /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "formulaInputFocus",
+    spellCheck: "false",
     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__default['default'].createElement("i", {
+    className: "icon",
+    "aria-hidden": "true",
     onClick: function onClick() {
       hideDialog();
       dataSelectRange("rangeTxt", context.dataVerification.dataRegulation.value1);
-    }
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex flex-col"
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+    name: "tab",
+    width: 18
+  })))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "box-item"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "text-heading-xsm mb-2"
-  }, dataVerification.verificationCondition), /*#__PURE__*/React__default['default'].createElement(ui.Select, {
+    className: "box-item-title"
+  }, dataVerification.verificationCondition), /*#__PURE__*/React__default['default'].createElement("select", {
+    className: "data-verification-type-select",
     value: context.dataVerification.dataRegulation.type,
-    onValueChange: function onValueChange(value) {
+    onChange: function onChange(e) {
+      var value = e.target.value;
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.type = value;
         if (value === "dropdown" || value === "checkbox") {
@@ -2775,14 +2830,18 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value2 = "";
       });
     }
-  }, /*#__PURE__*/React__default['default'].createElement(ui.SelectTrigger, null, /*#__PURE__*/React__default['default'].createElement(ui.SelectValue, null)), /*#__PURE__*/React__default['default'].createElement(ui.SelectContent, null, ["dropdown", "checkbox", "date"].map(function (v) {
-    return /*#__PURE__*/React__default['default'].createElement(ui.SelectItem, {
+  }, ["dropdown", "checkbox", "number", "number_integer", "number_decimal", "text_content", "text_length", "date", "validity"].map(function (v) {
+    return /*#__PURE__*/React__default['default'].createElement("option", {
       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__default['default'].createElement("div", {
-    className: "mt-4"
-  }, /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
+  })), ((_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__default['default'].createElement("div", {
+    className: "show-box-item"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "data-verification-range"
+  }, /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "formulaInputFocus",
+    spellCheck: "false",
     value: context.dataVerification.dataRegulation.value1,
     placeholder: dataVerification.placeholder1,
     onChange: function onChange(e) {
@@ -2791,28 +2850,39 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "mt-4 flex items-center"
-  }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
-    className: "border-2",
+  }), /*#__PURE__*/React__default['default'].createElement("i", {
+    className: "icon",
+    "aria-hidden": "true",
+    onClick: function onClick() {
+      return dataSelectRange("dropDown", context.dataVerification.dataRegulation.value1);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+    name: "tab",
+    width: 18
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "check"
+  }, /*#__PURE__*/React__default['default'].createElement("input", {
+    type: "checkbox",
     checked: context.dataVerification.dataRegulation.type2 === "true",
-    onCheckedChange: function onCheckedChange(e) {
+    id: "mul",
+    onChange: function onChange(e) {
       var checked = e.target.checked;
       setContext(function (ctx) {
         ctx.dataVerification.dataRegulation.type2 = "".concat(checked);
       });
     }
-  }), /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "ml-2"
+  }), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: "mul"
   }, 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__default['default'].createElement("div", {
-    className: "mt-4 space-y-2"
+    className: "show-box-item"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex items-center gap-2"
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "data-verification-checkbox-label"
-  }, dataVerification.selected), /*#__PURE__*/React__default['default'].createElement(ui.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,
+    className: "check-box"
+  }, /*#__PURE__*/React__default['default'].createElement("span", null, dataVerification.selected, " \u2014\u2014 "), /*#__PURE__*/React__default['default'].createElement("input", {
+    type: "text",
+    className: "data-verification-value1",
     placeholder: dataVerification.placeholder2,
+    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,
     onChange: function onChange(e) {
       var value = e.target.value;
       setContext(function (ctx) {
@@ -2820,41 +2890,41 @@ var DataVerification = function DataVerification() {
       });
     }
   })), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex items-center gap-2"
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "data-verification-checkbox-label"
-  }, dataVerification.notSelected), /*#__PURE__*/React__default['default'].createElement(ui.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,
+    className: "check-box"
+  }, /*#__PURE__*/React__default['default'].createElement("span", null, dataVerification.notSelected, " \u2014\u2014 "), /*#__PURE__*/React__default['default'].createElement("input", {
+    type: "text",
+    className: "data-verification-value2",
     placeholder: dataVerification.placeholder2,
+    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,
     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) === "date" && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "mt-4"
-  }, /*#__PURE__*/React__default['default'].createElement(ui.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) === "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__default['default'].createElement("div", {
+    className: "show-box-item"
+  }, /*#__PURE__*/React__default['default'].createElement("select", {
+    className: "data-verification-type-select",
     value: context.dataVerification.dataRegulation.type2,
-    onValueChange: function onValueChange(value) {
+    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 = "";
       });
     }
-  }, /*#__PURE__*/React__default['default'].createElement(ui.SelectTrigger, null, /*#__PURE__*/React__default['default'].createElement(ui.SelectValue, null)), /*#__PURE__*/React__default['default'].createElement(ui.SelectContent, null, dateCondition.map(function (v) {
-    return /*#__PURE__*/React__default['default'].createElement(ui.SelectItem, {
+  }, numberCondition.map(function (v) {
+    return /*#__PURE__*/React__default['default'].createElement("option", {
       value: v,
       key: v
     }, dataVerification[v]);
-  }))), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "mt-4 flex gap-2 items-center"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "datepicker-toggle"
+  })), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "input-box"
   }, /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "date",
-    className: "datepicker-input",
+    type: "number",
+    placeholder: "1",
     value: context.dataVerification.dataRegulation.value1,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -2862,13 +2932,97 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }), /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "datepicker-toggle-button"
-  })), /*#__PURE__*/React__default['default'].createElement("span", null, "-"), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "datepicker-toggle"
+  }), /*#__PURE__*/React__default['default'].createElement("span", null, "-"), /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
+    className: "input-box"
+  }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
+    className: "show-box-item"
+  }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("option", {
+      value: v,
+      key: v
+    }, dataVerification[v]);
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "input-box"
+  }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
+    className: "show-box-item"
+  }, /*#__PURE__*/React__default['default'].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 = "";
+      });
+    }
+  }, dateCondition.map(function (v) {
+    return /*#__PURE__*/React__default['default'].createElement("option", {
+      value: v,
+      key: v
+    }, dataVerification[v]);
+  })), context.dataVerification.dataRegulation.type2 === "between" || context.dataVerification.dataRegulation.type2 === "notBetween" ? (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "input-box"
   }, /*#__PURE__*/React__default['default'].createElement("input", {
     type: "date",
-    className: "datepicker-input",
+    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__default['default'].createElement("span", null, "-"), /*#__PURE__*/React__default['default'].createElement("input", {
+    type: "date",
+    placeholder: "100",
     value: context.dataVerification.dataRegulation.value2,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -2876,15 +3030,13 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value2 = value;
       });
     }
-  }), /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "datepicker-toggle-button"
-  })))) : (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "mt-4"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "datepicker-toggle"
+  }))) : (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "input-box"
   }, /*#__PURE__*/React__default['default'].createElement("input", {
     type: "date",
-    className: "datepicker-input",
+    style: {
+      width: "100%"
+    },
     placeholder: dataVerification.placeholder3,
     value: context.dataVerification.dataRegulation.value1,
     onChange: function onChange(e) {
@@ -2893,35 +3045,57 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.value1 = value;
       });
     }
-  }), /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "datepicker-toggle-button"
-  }))))))), /*#__PURE__*/React__default['default'].createElement(ui.Divider, {
-    className: "w-full border-t-[1px]"
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex flex-col gap-2"
+  }))))), ((_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__default['default'].createElement("div", {
+    className: "show-box-item"
+  }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("option", {
+      value: v,
+      key: v
+    }, dataVerification[v]);
+  }))))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "box-item"
   }, ["prohibitInput", "hintShow"].map(function (v) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
-      key: v,
-      className: "flex items-center"
-    }, /*#__PURE__*/React__default['default'].createElement(ui.Checkbox, {
-      className: "border-2",
+      className: "check",
+      key: "div".concat(v)
+    }, /*#__PURE__*/React__default['default'].createElement("input", {
+      type: "checkbox",
+      id: v,
+      key: "input".concat(v),
       checked: context.dataVerification.dataRegulation[v],
-      onCheckedChange: function onCheckedChange(e) {
-        var checked = e.target.checked;
+      onChange: function onChange() {
         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 = checked;
+            dataRegulation.prohibitInput = !dataRegulation.prohibitInput;
           } else if (v === "hintShow") {
-            dataRegulation.hintShow = checked;
+            dataRegulation.hintShow = !dataRegulation.hintShow;
           }
         });
       }
-    }), /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "ml-2"
+    }), /*#__PURE__*/React__default['default'].createElement("label", {
+      htmlFor: v,
+      key: "label".concat(v)
     }, dataVerification[v]));
-  }), ((_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__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
+  }), ((_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__default['default'].createElement("div", {
+    className: "input-box"
+  }, /*#__PURE__*/React__default['default'].createElement("input", {
+    type: "text",
+    style: {
+      width: "100%"
+    },
     placeholder: dataVerification.placeholder5,
     value: context.dataVerification.dataRegulation.hintValue,
     onChange: function onChange(e) {
@@ -2930,37 +3104,25 @@ var DataVerification = function DataVerification() {
         ctx.dataVerification.dataRegulation.hintValue = value;
       });
     }
-  }))))), /*#__PURE__*/React__default['default'].createElement(ui.Divider, {
-    className: "w-full border-t-[1px] my-4"
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex gap-2 justify-between items-center"
-  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
-    variant: "secondary",
-    style: {
-      minWidth: "80px"
-    },
+  }))))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "button-basic button-primary",
     onClick: function onClick() {
-      btn("close");
-    }
-  }, button.cancel), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex gap-2"
-  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
-    variant: "secondary",
-    style: {
-      minWidth: "80px"
+      btn("confirm");
     },
+    tabIndex: 0
+  }, button.confirm), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "button-basic button-close",
     onClick: function onClick() {
       btn("delete");
-    }
-  }, dataVerification.deleteVerification), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
-    variant: "default",
-    style: {
-      minWidth: "80px"
     },
+    tabIndex: 0
+  }, dataVerification.deleteVerification), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "button-basic button-close",
     onClick: function onClick() {
-      btn("confirm");
-    }
-  }, button.confirm))));
+      btn("close");
+    },
+    tabIndex: 0
+  }, button.cancel));
 };
 
 function getDisplayedRangeTxt(context) {
@@ -2972,7 +3134,12 @@ 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$ : "";
 }
 
-injectDatepickerStyles();
+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);
+}
 var ConditionRules = function ConditionRules(_ref) {
   var type = _ref.type;
   var _useContext = React.useContext(WorkbookContext),
@@ -3293,8 +3460,7 @@ var RangeDialog = function RangeDialog() {
     showDialog = _useDialog.showDialog;
   var _locale = fortuneCore.locale(context),
     dataVerification = _locale.dataVerification,
-    button = _locale.button,
-    toolbar = _locale.toolbar;
+    button = _locale.button;
   var _useState = React.useState(getDisplayedRangeTxt(context)),
     _useState2 = _slicedToArray(_useState, 2),
     rangeTxt2 = _useState2[0],
@@ -3319,7 +3485,7 @@ var RangeDialog = function RangeDialog() {
       }), undefined, fortuneCore.locale(context).conditionformat["conditionformat_".concat(rulesType)]);
       return;
     }
-    showDialog(/*#__PURE__*/React__default['default'].createElement(DataVerification, null), undefined, toolbar.dataVerification);
+    showDialog(/*#__PURE__*/React__default['default'].createElement(DataVerification, null));
   }, [setContext, showDialog, context]);
   React.useEffect(function () {
     setRangeTxt2(getDisplayedRangeTxt(context));
@@ -3508,7 +3674,7 @@ var DropDownList = function DropDownList() {
             arr.splice(index, 1);
           }
           setSelected(arr);
-          fortuneCore.setDropdownValue(ctx, v, arr);
+          fortuneCore.setDropcownValue(ctx, v, arr);
         });
       },
       tabIndex: 0
@@ -3978,9 +4144,8 @@ var SheetOverlay = function SheetOverlay() {
       display: "none"
     }
   }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-    name: "caret-down-fill",
-    width: 16,
-    height: 16
+    name: "combo-arrow",
+    width: 16
   })), context.dataVerificationDropDownList && /*#__PURE__*/React__default['default'].createElement(DropDownList, null), /*#__PURE__*/React__default['default'].createElement("div", {
     id: "luckysheet-dataVerification-showHintBox",
     className: "luckysheet-mousedown-cancel",
@@ -4214,6 +4379,9 @@ var Sheet = function Sheet(_ref) {
     }
   }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
   var onWheel = React.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) {
       fortuneCore.handleGlobalWheel(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
     });
@@ -4299,9 +4467,6 @@ var Combo = function Combo(_ref) {
     setPopupPosition = _useState4[1];
   var popupRef = React.useRef(null);
   var buttonRef = React.useRef(null);
-  var isLucideIcon = React.useMemo(function () {
-    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip"].includes(iconId);
-  }, [iconId]);
   useOutsideClick(popupRef, function () {
     setOpen(false);
   });
@@ -4329,7 +4494,7 @@ var Combo = function Combo(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     ref: buttonRef,
     className: "fortune-toolbar-combo"
-  }, !isLucideIcon ? (/*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "fortune-toolbar-combo-button",
     onClick: function onClick(e) {
       if (_onClick) {
@@ -4348,13 +4513,7 @@ var Combo = function Combo(_ref) {
     name: iconId
   })) : (/*#__PURE__*/React__default['default'].createElement("span", {
     className: "fortune-toolbar-combo-text"
-  }, text !== undefined ? text : "")))) : (/*#__PURE__*/React__default['default'].createElement(ui.IconButton, {
-    icon: getIcon(iconId),
-    variant: "ghost",
-    onClick: function onClick() {
-      return setOpen(!open);
-    }
-  })), showArrow && (/*#__PURE__*/React__default['default'].createElement("div", {
+  }, text !== undefined ? text : ""))), showArrow && (/*#__PURE__*/React__default['default'].createElement("div", {
     className: "fortune-toolbar-combo-arrow",
     onClick: function onClick() {
       return setOpen(!open);
@@ -5259,30 +5418,6 @@ var FormatSearch = function FormatSearch(_ref) {
   }, button.cancel)));
 };
 
-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,
@@ -5619,38 +5754,27 @@ var Toolbar = function Toolbar(_ref) {
         tooltip: toolbar.horizontalAlign,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React__default['default'].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__default['default'].createElement(ui.IconButton, {
+        return /*#__PURE__*/React__default['default'].createElement(Select, null, items.map(function (_ref3) {
+          var text = _ref3.text,
+            title = _ref3.title;
+          return /*#__PURE__*/React__default['default'].createElement(Option, {
             key: title,
-            isActive: ((_$find2 = ___default['default'].find(items, function (item) {
-              return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.ht);
-            })) === null || _$find2 === void 0 ? void 0 : _$find2.title) === title,
-            icon: getIcon(title),
-            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 fortuneCore.handleHorizontalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
               });
               setOpen(false);
-            },
-            tabIndex: 0
-          });
+            }
+          }, /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "fortune-toolbar-menu-line"
+          }, text, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+            name: title
+          })));
         }));
       });
     }
     if (name === "vertical-align") {
-      var _$find3;
+      var _$find2;
       var _items = [{
         title: "align-top",
         text: align.top,
@@ -5665,40 +5789,29 @@ var Toolbar = function Toolbar(_ref) {
         value: 2
       }];
       return /*#__PURE__*/React__default['default'].createElement(Combo, {
-        iconId: ((_$find3 = ___default['default'].find(_items, function (item) {
+        iconId: ((_$find2 = ___default['default'].find(_items, function (item) {
           return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
-        })) === null || _$find3 === void 0 ? void 0 : _$find3.title) || "align-top",
+        })) === null || _$find2 === void 0 ? void 0 : _$find2.title) || "align-top",
         key: name,
         tooltip: toolbar.verticalAlign,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React__default['default'].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__default['default'].createElement(ui.IconButton, {
+        return /*#__PURE__*/React__default['default'].createElement(Select, null, _items.map(function (_ref4) {
+          var text = _ref4.text,
+            title = _ref4.title;
+          return /*#__PURE__*/React__default['default'].createElement(Option, {
             key: title,
-            isActive: ((_$find4 = ___default['default'].find(_items, function (item) {
-              return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
-            })) === null || _$find4 === void 0 ? void 0 : _$find4.title) === title,
-            icon: getIcon(title),
-            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 fortuneCore.handleVerticalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
               });
               setOpen(false);
-            },
-            tabIndex: 0
-          });
+            }
+          }, /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "fortune-toolbar-menu-line"
+          }, text, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+            name: title
+          })));
         }));
       });
     }
@@ -5773,7 +5886,7 @@ var Toolbar = function Toolbar(_ref) {
         key: name,
         onClick: function onClick() {
           if (context.allowEdit === false) return;
-          showDialog(/*#__PURE__*/React__default['default'].createElement(DataVerification, null), undefined, toolbar.dataVerification);
+          showDialog(/*#__PURE__*/React__default['default'].createElement(DataVerification, null));
         }
       });
     }
@@ -6247,23 +6360,12 @@ var Toolbar = function Toolbar(_ref) {
         tooltip: toolbar.textWrap,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React__default['default'].createElement(Select, {
-          style: {
-            minWidth: "fit-content",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: 4
-          }
-        }, _items6.map(function (_ref1) {
-          var iconId = _ref1.iconId,
+        return /*#__PURE__*/React__default['default'].createElement(Select, null, _items6.map(function (_ref1) {
+          var text = _ref1.text,
+            iconId = _ref1.iconId,
             value = _ref1.value;
-          return /*#__PURE__*/React__default['default'].createElement(ui.IconButton, {
+          return /*#__PURE__*/React__default['default'].createElement(Option, {
             key: value,
-            isActive: _curr.value === value,
-            icon: getIcon(iconId),
-            variant: "ghost",
             onClick: function onClick() {
               setContext(function (ctx) {
                 var d = fortuneCore.getFlowdata(ctx);
@@ -6271,9 +6373,12 @@ var Toolbar = function Toolbar(_ref) {
                 fortuneCore.updateFormat(ctx, refs.cellInput.current, d, "tb", value);
               });
               setOpen(false);
-            },
-            tabIndex: 0
-          });
+            }
+          }, /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "fortune-toolbar-menu-line"
+          }, text, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+            name: iconId
+          })));
         }));
       });
     }
@@ -9610,21 +9715,6 @@ 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__default['default'].createElement("symbol", {
-    id: "caret-down-fill",
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none"
-  }, /*#__PURE__*/React__default['default'].createElement("rect", {
-    width: "14",
-    height: "14",
-    rx: "4",
-    fill: "black",
-    "fill-opacity": "0.1"
-  }), /*#__PURE__*/React__default['default'].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"
   }))));
 };